An automatically generated, customizable packing list builder. 👜
Motivation 🧠
My friends, family—including myself—have often complained about keeping track of everything they need to pack when going on trips. We often resort to manually typing up and printing long packing lists—even then, a couple things are still forgotten. To make packing easier, remove the complicated, time-consuming question of "what do I bring?", and "never sigh over packing again," I decided to create a website that automatically builds personalized packing lists for each user based on their travel type and needs.
Technologies Used 💡
・MERN Stack (MongoDB, Express.js, React, Node.js), Heroku, Google API Tokens
Application Overview 📖
Components
1. Frontend: Built with React and HTML/CSS, the frontend communities with the backend to log a user in, display their packing lists and the step-based user interface to generate a packing list.
2. Backend: Built with Express.js, the backend communicates with the frontend and the database. When called from the frontend, the backend (1) sends all needed user information by querying the database or (2) generates and sends a new packing list for a certain user's preferences based on a graph-search algorithm implemented in the backend.
3. Database: In the form of a MongoDB database, our database holds one collection that stores each packing list as a schema within a user class.
We deployed our website on Heroku but had to take it down due to financial reasons. Here are a couple screenshots from our website!
Takeaways 👣
As this was my first web development project; I felt lost and frustrated at many points. Learning git version control, command line navigation, three new languages, and figuring out React hooks at once was difficult, but through dedicating time to learning each process by watching tutorials and seeking guidance from friends, I slowly became comfortable with these tools.
Debugging server errors was still difficult, but through consistent effort and perseverance, several weeks later, I successfully deployed the product I had envisioned!
This experience taught me not only web development but also the tools and mindset needed for building software from the ground up. I also developed an excitement for designing and building software from scratch by myself or in a small team! 🤩