React project developed at 42 school in Barcelona as part of Promofarma + Codely.tv challenge during summer 2023.
Promofarma is the online parapharmacy offering a wide catalog of more than 1.000 pharmacies and other vendors in a single web.
CodelyTv is an online coding learing platform based in Spain.
Both companies joined forces to offer 42 students a 2 week challange with the goal of creating a front-end application capable of displaying, listing and sorting products from Promofarma's GrahpQL API which they kindly open for us. We also had to include some functionalities such as giving hipotethical users the hability to save faved products for future reference and recurring visits to the web using localhost.
The idea was to expose students to a real case scenario of working inside a company with real demands and being able to deliver a solid product inside a tight deadline.
As support at the beginning Javi from Codely gave us the technical details and guideline about how to face the problem of creating such an application by using videos and resources they offered us by opening Codely.TV learning platform for a month. Free of charge.
Due to time constrains I focussed on the UX / UI experience jumping directly to wireframing and designing a single page application in Figma including all needed features for the project (display products, search products, filter products either by category or brand including the feature of saving faved products into localStorage)
Then I created a basic static HTML skeleton using TailwindCSS for rapid prototyping in order to have a base layout to work within React which was the tool I choosed for creating the app. I implemented an AJAX feature so users do not need to click any button in order to accept their search or filtering preferences so basically each user prompt or interaction is connecting with the Promofarma API which is quite fast under GrapQL.
Due to CORS the app is only available to test locally so just clone this repo then
npm i
then
npm start
Boris a fellow 42 student did all the testings with cypress for this project. Danke! ;)