Giraffe

Context

This project was the second out of three main deliverables during my 3-months Coding Bootcamp at Ironhack. I collaborated with one fellow student (Lisa Hilterhaus) and we finalized this project within one week.

Idea

Who always stays on top of things? Giraffe is a tool that helps you to 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 is being automatically created. Save and organize your items in a list. This way you can compare items from different vendors easily and thus take more reasonable buying decisions.

Used technologies

As required, we used Express as a foundation and Mongoose for models and database communication. A user authentification mechanism with password encryption is provided to protect the routes. The frontend is built without using any framework, but with dynamic views and handlebars.
As an extra step, we integrated a webscraping tool in our application to bring the core product feature (automatic card creation based on the link) to life.

Reflection

Besides making the webscraping work, the frontend (at this point done with views and handlebars) was a big challenge, because we wanted to use many stateful elements and pages (eg. overlay modals, list tags,...). At this point we needed to perform rerender the page with every change of a variable, which resulted in a very complex handlebars management — thankfully frontend libraries such as React were invented!