Matcha
This project is about creating an app allowing two potential lovers to meet, from the registration to the final encounter. A user will then be able to register, connect, fill his/her profile, search and look into the profile of other users, like them, chat with those that he matched with.
To meet all the required features, a Full Stack Javascript
stack has been chosen: React + Tailwind for the client, we used Node.js + Express for the back with the help of Socket.io to handle all the real-time events in the application and Postgres for the database. We weren’t allowed to use ORM for the database. All SQL queries are written manually. The application is fully dockerized.
Through this project, we learned about:
- Micro-frameworks
- Users account management
- Sockets
- GPS location
- Data validation and security
- Docker-compose
Table of Contents
Installation
git clone https://github.com/Korkrane/42MATCHA.git
cd 42MATCHA/server
touch .env
In the .env
file add these fields:
ACCESS_TOKEN_SECRET=4242XX424208
REFRESH_TOKEN_SECRET=424200000X1
Finally, at the root of the project
./run.sh
When the images are built, you can access the site here:
https://localhost:3000/signin
Nodemailer system setup with google
⚠️ If you do not follow the steps below, you won’t be able to access to a complete personalized user creation. However you can still access the app by creating a dummy user.
Steps to follow
-
Go to your google account settings
-
Go to the
Security
settings -
Click on
App passwords
-
Click on Select app and then Other, you can call it matcha for example
-
Save the generated password
-
add these variables to your
/server/.env
NODEMAILER_USER=google_email_address
NODEMAILER_PASS=google_app_password
Usage
Provide instructions and examples for use. Include screenshots as needed.
To add a screenshot, create an assets/images
folder in your repository and upload your screenshot to it. Then, using the relative filepath, add it to your README using the following syntax:
Features
- Database
- users seeding
- password hashing
- Users
- user creation
- get user GPS location
- pictures upload
- user details edition
- user relation management (like/block/report)
- user profiles browsing based on matching algorithm
- user profiles browsing with custom filters (age/distance/fame)
- Chat & Notifications
- real-time notifications for visits/likes/matches
- real-time chat messages between matched users
- Authentication
- jwt authentication & protected API routes
- email confirmation on signup
- email on reset/forgot password
To go further
Through this project, we implemented a lot of features that was new to us and with libraries that we weren’t always used to. Some parts could be clearly be coded in a simpler way or refactored to reduce the complexity.
Here is a list of what could be improved in general:
- group all the axios call in a single place in the client instead of storing them individually in component files
- make more reusable components to remove duplicates generic components in the client pages
- create a specific file for socket event handling in the back
- improve the chat UI globally
- display a visual notice on some user actions instead of only noticing errors (password reset, user details update, when 2 users match)
- add a caching system for the api calls when a user request to browse a lot of profiles with the same filters