Matcha 🔥
Matcha is a Tinder-like dating website I created from scratch with two schoolmates of mine. It allows user to create an account, which is verified via an email with unique link. After that, user can log in, complete their profile by adding their gender, sexual preferences, bio, list of their interests, profile picture and optionally four other pictures. User gets a list of match suggestions based on their preferences. They can run an advanced search selecting one or a few criteria, such as age, location or interests. The user can check other users' profiles and see if they're online, or the date and time when they were online the last time. They can also report users as “fake accounts” and block them. A blocked user won’t appear anymore in the search results. When two users like each other, they can start chatting in real time.
Users receive real-time notifications when they are liked by another user, their profile was checked by another user, they received a message and when a user they liked likes them back.
For more information about this project, check out the project's assignment.
Project Purpose & Goal
Matcha was the second web development project in my school's curriculum and the first team project worked on. This project was an intorduction to a more advanced tool for creating web applications: the micro-framework. The purpose was to create a Tinder-like dating website, where interactions between the users will be at the very heart of the project.
Our goal was to create a robust and user-friendly online dating platform that facilitates connections between users through comprehensive profile customization,real-time interactions and advanced search functionalities, while ensuring user safety and privacy through features like account verification,reporting and blocking.
JavaScript
ReactJS
Redux
NodeJS
TailwindCSS
PostgreSQL
Stack & Constraints
We were free to choose any technologies for this project. The only constraint was that we were not allowed to use non-relational databases.
We chose JavaScript, ReactJS, Redux, NodeJS, ExpressJS, PostgreSQL and TailwindCSS as the main technologies. We didn't have any previous experience with this stack and we learned everything by doing. ReactJS offered the benefits of reusable components and hooks, which we found very useful for building the UI. We chose Redux for state handling to avoid the need to pass props down through multiple layers of components. We had previous experience with MySQL, and we thought this project would be the perfect opportunity to learn PostgreSQL. We chose NodeJS to handle the backend because of its reliability and efficiency. The microframework of our choice was ExpressJS as it is the most standard one for NodeJS. Although Tailwind proved to be a bit challenging at first, once we got a hang of it, it turned out to be a fantastic tool for creating unique and responsive design.
JavaScript
ReactJS
Redux
NodeJS
TailwindCSS
PostgreSQL
Thought Process & Problems
Just as with other school assignments, I approached Matcha as I would a real-life team project and employed practices aligned with industry standards. The first step was to summarize the workload and equally divide the tasks. We used Trello app in order to keep each other updated, and Github for version control. We prepared a basic layout and design of the website together, then worked on our respective tasks, while keeping each other updated about the progress and problems we encountered.
The main issues we encountered during this project were due to lack of frequent updates and communication among us as team members. This led to problems when merging our individual contributions of the project we each worked on separately, causing integration challenges and conflicts. This helped us realize the importance of regular updates and close collaboration, as well as improved our teamwork and other soft skills.
Login page.