Choices, choices and more choices!
With the varieties of restaurants and cuisines out there, eating out with someone else can be the biggest headache in the world leading to unnecessary arguments and wastage of time.
Chicken Tinder helps two people make a unanimous decision in deciding where to eat via a fun and playful way - removing conflicts and minimising the paradox of choices
With the varieties of restaurants and cuisines out there, eating out with someone else can be the biggest headache in the world leading to unnecessary arguments and wastage of time.
Chicken Tinder helps two people make a unanimous decision in deciding where to eat via a fun and playful way - removing conflicts and minimising the paradox of choices
- Multi-step signup process that asks for piecemeal information so as to keep user engaged
- Input validations prevents erroneous information from being stored in db
- Users can add friends via email addresses, this is to ensure that users can only add people whom they know
- Currently, adding a friend is one-sided, we would like to improve this by allowing users to send, accept and reject friend requests
- The first user initiates a session by setting location around which they wish to eat at. Proximity parameter allows users to decide how far they are willing to travel based on the center.
- User can then start swiping through a deck of restaurant cards in Tinder fashion
How we did it:
- We used react-google-maps API to create an autocomplete input bar and corresponding map that would display the location that the user chooses.
- We used various MUI components to create a user-friendly multi-step form.
- Information about center, radius, cuisine type will be sent to the backend which queries the Google Maps API.
- Google Maps API returns an array of 20 restaurants which the backend (1) saves in db and then (2) sends to frontend. Restaurant results are saved in db so that it's retrievable later on for the second user
- If user has been invited to a session, users can choose to join session or create a new one. Creating a new one will delete any pre-existing sessions.
- Once user joins session as the second user, they will see the same set of restaurant card choices served to the first user
- Users can swipe at the same time, or separately.
- If both users swiped 'yes' on a restaurant, a matched message would appear either at the swipe or upon the next swipe.
- Users can click on card to navigate to a Google Search page of the restaurant.
How we did it:
- Restaurant results from Google Maps API is sent to frontend and saved in db when first user initiates session
- Frontend retrieves these results from db via GET request when second user joins session
- Restaurant name and photo is rendered using react-tinder-cards API which also provides the swipe functionality
- After every swipe, swipe details are stored in db and checked against existing data to see if there is a match
- Once there is a match, backend sends match success information to the frontend to render success message
Database and Entity Relationship Diagram (ERD) Planning
During the planning phase of the project, the team decided to utilize a SQL database (PostgreSQL) to store the respective users info and restaurant matching activites under the assumption that the data to be updated are minimal and straightforward.
Initial ERD setup was to store all restaurant likes (right-swipe) for users within an object for a particular match session.
While implementing the project, the team felt that it might be better to utilize a NOSQL database instead for the added flexibility in amending and storing additional data (users dislike) while allowing the app to scale substantially when group matching feature is introduced in the future.