Cooper's Cupids is a dating webapp built as a term project for ECE 366 - Software Engineering & Large System Design. The frontend was built with React, the backend was developed in Java (Spark), and MySQL was used for the database.
The site is fully responsive and contains features expected of a dating app, including:
- Sign up / Login
- Profile Creation / Editing
- User Feed & Like / Dislike Mechanic
- User Matching
- User Messaging
The frontend of this project was built in React using TypeScript.
There are 5 main pages, each of which is responsive to changes in screen size:
Before a user logs into their Cooper's Cupids account, only the homepage is available. The rest of the navbar tabs are hidden, and attempts to access other pages will redirect here. The homepage contains a signup / login card, which can be toggled by clicking on Already have an account? & Don't have an account?. The form has proper validation and will check for & alert the user on improper email format, emails already linked to accounts, incorrect email + password combinations, and empty fields. Additionally, the homepage contains information about Cooper's Cupids.
The Profile Page is where users can create and edit the profile that other users will see. Before a profile is created, the page will prompt the user to create one. Once a profile is created, the page will display the user's profile while giving the option to edit.
On the feed page users are shown the profiles of other users one-by-one and given the option to like or dislike. If a user has not yet created a profile, they will be prompted to do so before being shown other profiles.
Once two users match, a conversation between them is automatically created. Matching with a user is the only way to begin a conversation. Similar to most messaging apps, the conversations appear along the left side, sorted from top to bottom by most recent activity. If the screen width becomes too small, the conversations are displayed as icons. The conversation list, as well as the conversation viewer, are individually scrollable. When a new message is sent / recieved, that conversation will move to the top of the list and the date will be appear in the conversation if this is the first message of the day. Clicking on a user's icon within a conversation will display their profile, and clicking on the broken heart icon will instantly unmatch with the user and delete the conversation.
The Settings Page offers the ability to update one's account settings.
Options include:
- Updating email preferences
- Updating email address
- Updating password
- Deleting Account
The backend was built in Java using Spark, as well as MySQL for the database.
When a user creates an account, it is assigned a randomly generated user ID that is used throughout the database. This way, the email & password can be changed while maintaining a proper database structure.
Cookies are generated on the backend that last for 3 hours. These cookies are used to allow users to stay logged in and are required in all requests.
The feed is generated by first showing all users that liked the current user and then sorting the rest of the users by their similarity to the current user. This similarity score is found by calculating the overlap in the two users' interests.