/Tinder-Swipe-Right

An engaging Tinder-inspired web application developed using the MERN stack. Seamlessly combining modern frontend technologies with a robust backend, this platform offers users a dynamic matchmaking experience. With features like profile creation, swiping, matches, and messaging, it provides a streamlined interface for connecting individuals

Primary LanguageJavaScript

Team Project By: 👋,ɭaƜƦ៩♬c៩ Maduabuc♬ι & Abduɭɭahι Nguι

Tinder Web Clone App

Webstack – Portfolio Project

Project done during Short Specialization at ALX School. This is our Final Project in ALX, to showcase our creativity and skills.

Technologies

  • MERN STACK`- MongoDB, ExpressJs, ReactJS, NodeJS
  • Front-End (ReactJS)
  • Back-End (NodeJS, ExpressJS)
  • Database (MongoDB- NoSQL)

Landing Page

App Design & Main Features

  • Once you create an account, you will start seeing profiles of different users based on your preferences.
  • For every user of the app, Tinder shows these information details: current age, mutual friends (via matching preferences), mutual interests between the users, and target description. The process of matching starts here when you can do the following:
  • Swipe-Right/Tick: If you like a profile, you will swipe right.
  • Swipe-Left/X: If you don’t like a profile, you will swipe left.
  • Match: If both the profiles swipe right, it’s a match.
  • After there is a Match, both Users can start chatting by clicking on the preferred users on the Matches.
Components Description
Dependencies All Dependencies are available on the requirement.txt on both frontend and backend
Endpoints: You can get the endpoint documentation HERE.


Steps in Running the Tinder Swipe-Right Clone App

1. Clone the repo https://github.com/codeabuu/Tinder-Swipe-Right
2. Navigate to repo directory and Install all relevant requirements on package.json for both frontend and backend
3. Make sure you create a Database (app-data) with users and messages collection in MongoDB.
4. Navigate to the frontend and backend, then start the servers up using– npm start and npm run dev respectively.
5. You would be taken to the web browser with the local url: http://localhost:3000/ where you would find the HomePage(/) and be redirected to Create Account or Login