Roommate Matching
Tinder, but for roommates. Answer a questionnaire about your roommate preferences, then get a Tinder-style interface that allows you to swipe left and right on certain roommates. After both sides match with each other, the app starts a chat to allow both sides to discuss specific information.
This project is a roommate matching app. You start in the app by making an account and profile. Part of the profile process is filling out a questionnaire via editing your profile that is about your roommate preferences. After the questionnaire is completed, you get a Tinder-style interface that allows an individual to swipe left (for no) and right (for yes) on certain roommates on your feed. If you and another person both swipe right on each other it creates a match. If you match with a possible roommate it allows both sides to see the match and message with that individual.
There is a sign-in page, sign-up page, a dashboard, a swiping page, a matches page, a messaging page, and a profile editor page. The sign-in page will allow the user to enter a username and password. If the username and password is correct then it allows the user to continue to the dashboard, where they can access the swipe page. Once on the swipe page, the user can swipe left and right on possible roommates. The swipe page will have a navigation bar on the top that allows the user to access all the pages that were specified above. Even though the site is not posted online, click the either of the buttons below to see view the GitHub repository and the video my group member made of the functionality of the app. Continue reading below for more information about the project.
For the front end, we utilized React with JSX for building reusable components and React Router to configure and manage website routes. Styling was implemented with a combination of CSS and Tailwind CSS for a clean, consistent, and responsive design.
On the back end, we implemented Node.js to handle server-side logic. We used MySQL as our database solution, hosted on Amazon Web Services (AWS) for scalability and reliability. To interact with the database, we wrote and executed SQL queries for data management and retrieval.
I contributed extensively to the front-end development and styling of our roommate matching application. I implemented consistent CSS styling across all pages—including the index, dashboard, swipe, matching, profile, edit profile, sign in, and sign up pages—ensuring a cohesive look and feel. This included setting the background colors, color scheme, fonts, text box design, and button styling. I also fully styled the navigation bar for a clean and user-friendly experience.
On the functional side, I developed the feature that ends the swipe process once a user has viewed all possible matches, displaying a message and link to the matches page instead. I also resolved a connectivity issue with the edit profile page, rebuilt its skeleton, and assisted teammates in making it fully functional.
Additionally, I created the initial skeletons for the message and chat pages, worked collaboratively with Brandon C. on UX and UI design for several core pages Sign Up, Dashboard, Home, Swipe), and added the project’s favicon (logo) to strengthen the app’s branding.
Back to Projects