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."

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

• React on the front-end. 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!
• CSS for styling. 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.
• Express and Node.js on the backend to build a REST API for my front-end to interface with and to handle user authentication.
• MongoDB for the database. I used MongoDB to store images and content of submitted designs as well as user information. I used Mongoose to write queries to my database.

Screenshots