Monster Match

Looking for a haunting connection? Monster Match is a spookier Tinder! Join fellow horror fans, swipe for love or frightful fun, and match with your perfect monster…or maybe just a friendly ghost!

Comment

🧛‍♀️ Monster Match

Looking for a heart-pounding connection this Halloween? Introducing Monster Match – the first dating app that brings out your inner ghoul! Imagine Tinder, but spookier: every profile is a monster match waiting to happen. Join fellow horror fans, craft a killer costume profile, and swipe through a cast of creatures as you search for love or just some frightful fun. With our ‘Fright or Flight’ swiping feature, spooky customizations, and matches made in the Halloween spirit, Monster Match is where you’ll meet your perfect partner…or maybe just a friendly ghost!

🏗️ How We Built the Project

Here’s an overview of how we used the MERN stack to bring our monster dating app to life:

  1. Frontend (React):
    We built the UI in React to create a responsive and interactive experience. Users can:

    • Create a monster profile (with a name, species, abilities, and haunt).
    • Swipe through other monster profiles using react-tinder-card.
    • View matches and start chatting instantly.

  2. Backend (Express & Node.js):

    • Express serves as our API to handle profile creation, user data, and matching logic.
    • We created secure routes for authentication, swiping, and retrieving matches.
    • Socket.io was integrated on the server to manage real-time chat between matched users.

  3. Database (MongoDB Atlas):

    • MongoDB stores monster profiles, matches, and chat histories.
    • We designed schemas to link users with their matches and conversations efficiently.

  4. Authentication (JWT):

    • We used JSON Web Tokens (JWT) for user authentication.
    • Once monsters log in, JWTs keep them authenticated as they swipe and chat.

🧟 What We Learned

Through this project, we leveled up in several areas, including:

  • React: Building a modular and reusable component-based UI.
  • Express & Node.js: Creating API endpoints for profile management and matchmaking logic.
  • MongoDB Atlas: Storing user data in the cloud.

🚧 Challenges We Faced

While working with the MERN stack was exciting, we ran into several challenges along the way:

  1. State Management in React:
    Managing state for swipe logic and matched profiles across multiple components required careful planning. We ended up using Context API to share state globally.

  2. Authentication with JWT:
    Setting up JWT-based authentication was tricky, especially for token expiration and refresh logic. But once we got it working, it felt really secure.

Share this project:

Updates