The project re-creates the Tinder app. It allows a user to like or pass on different profiles. When a profile is liked, the user can then send a message to that profile. The app keeps track of sent messages and allows the user to navigate between liked profiles, un-selected profiles and messages. In the header, the user can click on the profile icon to see liked profiles, the paw icons to see un-selected profiles, and the chat icon to see currently sent messages.
- HTML
- CSS
- JavaScript
- React
The Tindog app orginally was designed to use Javascript classes to create the like and nope tags on each profile and track which profiles had been liked. I created this project using the React library to re-create that same functionality while also adding on top of it. I was able to add components and states that allowed for the user to navigate through liked profiles, un-selected profiles, and messages that have currently been sent by the user.
- Toggle between liked profiles, profiles, and current messages
- Displaying the most recent message if available
- Determining which profile inputs have already been selected
- Keeping a history of sent messages
- Add ability to respond to messages
- On page refresh, keep history of chats and liked profiles