Cover image for my project: Design.io

About the Project

Design.io is an online platform where everyone, not just professionals, can share and get inspired by designs. If you think about it, everything in the physical world has been designed, whether it was carefully considered or not. Think about how your bed is placed in your bedroom and which apps are on your phone's home screen. The mission of Design.io is to increase people's awareness of simple design opportunities so that you can point to things around your home and say: "Hey, I designed that."

My Motivation

I built Design.io because I was doing a lot of cleaning and re-organizing in my room and basement. I found myself thinking about the different ways I could position the light on my desk, stack clothes in my closet, and other simple but meaningful design decisions. That's when I got the idea that there should be an online platform where I could get inspiration from what other people were doing.

Building Design.io was also a great opportunity for me to dive into the world of web development after watching countless tutorials on Youtube. It was a process of learning things when I needed to and reading lots of online documentation. This project will hold a special place in my heart because it was the first self-initiated programming project that I have completed from start to finish.

Technologies Used

Front-End

On the front-end, I used React. Working with React was pretty enjoyable as it placed my HTML and Javascript all in the same file. My favorite parts about React were the easy state management and reusable component architecture. This was my first time using React, so I'm sure that I still have lots to learn about it!

At the very beginning of the project, I was using a lot of pre-built components from MaterialUI. But then I realized that it was really hard to customize them because I had no clue how the CSS worked behind the scenes. That's when I decided to go back and learn my CSS fundamentals, especially flexbox and CSS grid. Eventually, I purged all of the MaterialUI components from my project and styled my entire project with CSS that I wrote from scratch.

Back-End

On the back-end, I used an Express server to build a REST API for my front-end to interface with. I also used Express to handle user authentication. For my database, I used MongoDB to store images and content of submitted designs as well as user information. Lastly, I used Mongoose to write queries to my database.

Key Features

  • User authentication and a system to create new accounts
  • Featured designs slideshow with play, pause, and prev/next buttons
  • Ability to save favorite designs once logged in
  • Personal profile with the ability to submit new designs and update personal information
  • Mobile-friendly and responsive design throughout the site

In the future, I hope to implement a badge system for users and automatically add badges when certain criteria are reached. I would also like to make the font sizes more responsive as text is too large on phone screens right now.

Featured Screenshots