Tinder Clone (movieConnect) - ReactJs, NodeJs, MySQL, WebSockets, JWT

Description:

• Designed a feature-rich dating website with comprehensive profile creation/management, movie-based swiping, and personalized matching capabilities.
• Engineered an innovative MVC-structured application using React for the front-end and Socket.io/Node.js as the API, delivering a seamless user experience with real-time updates.
• Integrated JSON Web Tokens (JWT) into the existing system, providing secure and efficient user authentication and authorization.
• Leveraged TmdbAPI and MySQL database to create a filtering system.

Live Demo

Installation

cd movie-client
npm install 
npm run dev

Technologies Used:

• ReactJS
• NodeJS
• ExpressJS
• Socket.io
• MySQL
• TmdbAPI
• JSON Web Token

Top Features:

• Bcrypt password encryption/verification
• Multer file upload of profile images
• JWT authentication and authorization
• Filtered matching system based on preferences and movie interests
• Genre based movie recommendation filtering as well as favorited movie filtering
• Movie recommendation refreshing
• Bcrypt password encryption/verification
• Front end UI error handling
• Mobile first web design

Design:

Client-side:

This is the front-end repository

Routes

Error Handling

Server-Side:

The back-end repository: movieConnect

Socket.io Server:

• Express server:
  • Module-View-Controller project structure
  • Manually contructed User model NO-ORM
  • Store User profile images in static folder on server
  • User Authenication done through secure HTTP only JWT

Database:

Tables:

• Users: stores username, password, status, bio, name, gender, preference, image, and birthday
• Favorites: stores title id as movie favorite, the username id, and the type of favorite
• Chats: stores text, username id, author (name field in Users), roomId, and time chat sent
• Rooms: stores roomId, username 1 (sender), username 2 (recepient)