/meeet-react-js

The Meeet dating website repository.

💜 Welcome to the Meeet repository! 🫂

🚀 Version 0.1 (English, Français)

meeet-cover

⚠️ The project is still in early development, but you can check out my progress under the DEV branch ⚠️

Meeet is by far the biggest solo project I have ever worked on. Meeet is a dating app based on geolocation which allows users to meet people around them. Users can see profiles through a grid, the nearest profile being the first one. Moreover, users can be filtered by their age, gender and what they are looking for. Users can see other users' profiles containing their pictures, name, age, description, interests and some general information about them. Following a user's interest for another user, they can either add them to favorites, start a conversation with them or block them.

Size React Redux React Router Firebase HTML5 CSS3 SASS JavaScript NPM

Wireframes and model

  • All the wireframes were made on Whimsical and can be seen here
  • The model for all responsive pages was made on Figma and can be seen here

Task list

The project is evolving every day. To keep track of the changes and what I want to do next, I made a task list in Notion (in French) which can be read here.

Technologies

In order to make this project, I used the following technologies (these can change depending on the development):

Front-end

  • React
  • React Redux Toolkits
  • React Router
  • HTML
  • CSS
  • SASS
  • JavaScript
  • React Leaflet (for the maps)

Back-end

  • Google Firebase Authentication
  • Google Firestore

File hierarchy

Front-end

All the different page elements are divided in components. Indeed, each component has its own folder, JavaScript and style files which makes it easier to seperate elements. The routes are handled with React Router and are different if used with a mobile or desktop viewport. Indeed, I used conditional rendering thanks to states to render different routes to achieve the model that I created. For the moment, all the front-end is static but I am currently working on making it dynamic with React Redux and the use of Google Firebase.

Back-end

I originally started working on a PostgreSQL database with pgAdmin 4 in Node.js and Express. However, since this project was going to be bigger than expected I preferred spending my time on the frontend. To resolve this issue, I used Google Firebase which is a noSQL serverless database. I implemented Firebase Authentication to create the user accounts and to manage the logged in state. Then, I used Firestore to create all the different tables related to the users.

Troubleshooting

When I started working on this exciting project, I made sure to keep track of what I was going through and the progress I was making. I kept it all in a Notion file. Please note that these are rough notes and some of them may be obsolete.

Thank you for checking out my work, this project means a lot for me and I am really looking forward to the day when I can show it done!