Context
This project was the second of three main deliverables during my 3-month coding boot camp at Ironhack. I collaborated with one fellow student. We worked on this project for one week.
Idea
Who always stays on top of things? Giraffe is a tool that helps you keep an overview of your shopping plans. You can see all your items of interest in one place. Just paste the link to the item, and a product card will be automatically created. Save and organize your items in a list. This way, you can easily compare items from different vendors and thus make more informed buying decisions.
Used Technologies
We used Express as a foundation and Mongoose for models and database communication. A user authentication mechanism with password encryption is provided to protect the routes. The front end is built without using any framework, but with dynamic views and handlebars. As an extra step, we integrated a web scraping tool into our application to bring the core product feature (automatic card creation based on the link) to life.
Realised Features
Features to be added
Reflection
Besides making the web scraping work, the front end (at this point done with views and handlebars) was a big challenge because we wanted to use many stateful elements and pages (overlay modals, list tags). At this point, we needed to perform a re-render of the page with every change of a variable, which resulted in a very complex handlebars management – thankfully, frontend libraries such as React were invented!