MERN stack Memory Card Game

A fun and interactive memory card game built using MERN stack and Tailwind CSS. The game tests your memory by flipping and matching pairs of cards. It includes user authentication, score tracking, and a real-time leaderboard.

Authors

• @RuhonBorah

🚀 About Me

I'm a full stack developer specializing in MERN. I enjoy building interactive user interfaces and working on both the frontend and backend to create seamless web experiences.

🔗 Links

Environment Variables

To run this project, we need to add the following environment variables to our .env file:

MONGO_URI APP_PORT=8000

MONGODB_URL=mongodb+srv://<username>:<password>@cluster0.prxt0.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0

JWT_SECRET=secret

Deployment

Backend is deployed on Render: Memory Game API

Frontend is deployed on Vercel: Memory Game Frontend

Features

• User authentication with JWT
• Card matching game logic
• Real-time leaderboard
• Score and high score tracking
• Confetti animation for new high scores
• Responsive design using Tailwind CSS
• Data persistence with MongoDB and Express API

Tech Stack

Client: React, Vite, TailwindCSS
Server: Node, Express, MongoDB
Authentication: JWT

Installation

To install and run the project locally:

Clone the project:

  git clone https://github.com/Rohangith1/React-Game

install dependencies for the backend:

cd server
npm i

install dependencies for the backend:

cd clint
npm i

run locally:

git clone https://github.com/Rohangith1/React-Game

To run the backend:

cd backend
nodemon

To run the backend:

cd clint
npm run dev