Menu Close



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 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


git clone
cd 42MATCHA/server
touch .env

In the .env file add these fields:


Finally, at the root of the project


When the images are built, you can access the site here:


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
  1. Go to your google account settings


  2. Go to the Security settings


  3. Click on App passwords


  4. Click on Select app and then Other, you can call it matcha for example


  5. Save the generated password


  6. add these variables to your /server/.env


(back to top)


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:

(back to top)


  • 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

(back to top)

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


(back to top)

View Source Code
Posted in Development