Swish .
A database-driven café recommendation engine featuring user registration, reviews and favourite cafés
Tech Stack
- Next.js
- Tailwind CSS
- Node JS
- Mongoose
- MongoDB
- Jest
- React Testing Library
- Mocha
- Chai
Background
I wanted to leverage my skills in Next.js and Tailwind CSS to design an attractive, user-friendly café recommendation and review platform. I drew on my previous experience using MongoDB to build a database to manage users, cafés and reviews. In the future, I am excited to develop a mobile application that incorporates the design elements of the web platform and features discounts for customers to use, enhancing user engagement.
Screenshots
Challenges
Updating cafe data
- I faced a challenge in updating cafe data, for example, when adding new properties such as a location and map to the JSON file of cafe data. After saving these changes and running the command to seed the updated data, I discovered that all the reviews for each cafe had been deleted.
- To address this, I created an upsert script that destructured the cafe data to exclude the reviews. This allowed me to update the cafe data without affecting the reviews. I then ran the upsert script to update the cafe data and the reviews remained intact.
Filtering cafe amenities
- I encountered difficulty in implementing a range of amenity buttons within a form. My goal was to allow users to select as many amenity buttons as they wanted, with each selected button serving as a filter to display cafes that offered the corresponding amenities.
- I worked around this by creating a function that manages the state of a list of selected amenities. The function checks if the clicked amenity is already in the list and removes it it is and adds the amenity to the list if it is not. I then passed this function to each amenity button to manage the state of the selected amenities.
Keeping a cafe saved
- I encountered a challenge in keeping a cafe saved when a user navigated away from the cafe page. I wanted to ensure that when a user saved a cafe, it would remain saved when they returned to the page.
- To successfully solve this, I created a service on the backend that keeps track of which user is logged in and which cafe they want to save. I then checked if the café belongs to that user and if it does, I saved it to their list of favourite cafés. This ensured that the cafe remained saved when the user navigated away from the page.