Menu Close

42MATCHA

CodeWithAnbu





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

  1. Go to your google account settings

    Untitled

  2. Go to the Security settings

    Untitled

  3. Click on App passwords

    Untitled

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

    Untitled

  5. Save the generated password

    Untitled

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

NODEMAILER_USER=google_email_address
NODEMAILER_PASS=google_app_password

(back to top)

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:

(back to top)

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

(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

Contact

(back to top)

View Source Code
Post Views: 76
Posted in Development