https://github.com/kiranwankhade/game_of_memory

Built a full-stack MERN memory game featuring secure authentication, global leaderboard, and real-time score tracking. Designed responsive UI with theme switching and implemented scalable, secure REST APIs.
https://github.com/kiranwankhade/game_of_memory

bcryptjs cors dotenv expressjs jsonwebtoken mongodb mongoose nodejs react reactbootstrap reactdom reactjs redux redux-thunk

Last synced: 4 days ago
JSON representation

Host: GitHub
URL: https://github.com/kiranwankhade/game_of_memory
Owner: kiranwankhade
Created: 2025-12-18T06:14:44.000Z (5 months ago)
Default Branch: main
Last Pushed: 2026-02-25T05:11:51.000Z (3 months ago)
Last Synced: 2026-02-25T10:41:32.947Z (3 months ago)
Topics: bcryptjs, cors, dotenv, expressjs, jsonwebtoken, mongodb, mongoose, nodejs, react, reactbootstrap, reactdom, reactjs, redux, redux-thunk
Language: JavaScript
Homepage: https://game-of-boxes.vercel.app/
Size: 537 KB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 🎮 Game of Memory (Game of Boxes)

A full-stack web-based memory game where users test and improve their memory skills by matching boxes. This project includes secure authentication, modern UI, and a scalable backend architecture.

---

## 🚀 Live Demo
[deployed link](https://game-of-boxes.vercel.app/)

---

## 📌 Project Overview
Game of Memory is an interactive web application built using the MERN stack. Users can sign up, log in (including Google OAuth), and play a memory game with a smooth and responsive UI. The application follows best practices for scalability, security, and maintainability.

---

## 🛠️ Tech Stack

### Frontend
- React.js (Vite)
- Redux Toolkit
- React Router
- Bootstrap & React Bootstrap
- Axios
- Google OAuth
- React Toastify

### Backend
- Node.js
- Express.js
- MongoDB & Mongoose
- JWT Authentication
- Google Auth Library
- bcryptjs
- Helmet & Rate Limiting
- CORS

---

## ✨ Features

✅ User authentication (JWT + Google OAuth)
✅ Secure password hashing
✅ Responsive UI
✅ Memory box matching game
✅ Redux state management
✅ API-based architecture
✅ Protected routes
✅ Environment-based configuration
✅ Scalable and modular project structure

## 📂 Folder Structure
```
game_of_memory/
│
├── game-of-boxes/
│ ├── src/
│ ├── components/
│ ├── redux/
│ └── pages/
│
├── game-of-boxes-backend/
│ ├── controllers/
│ ├── models/
│ ├── routes/
│ └── middleware/
│
└── README.md
```

## ⚙️ Installation & Setup

### 1️⃣ Clone the Repository

```bash
git clone https://github.com/kiranwankhade/game_of_memory.git
cd game_of_memory
```

### 2️⃣ Setup Backend
```
cd game-of-boxes-backend
npm install
```

#### Create a .env file inside the backend:
```
PORT=5000
MONGO_URI=your_mongodb_connection
JWT_SECRET=your_secret_key
GOOGLE_CLIENT_ID=your_google_client_id
```

#### Run backend:
```
npm run dev
```

### 3️⃣ Setup Frontend
```
cd game-of-boxes
npm install
```

#### Create a .env file inside the backend:
```
VITE_API_URL=http://localhost:5000
VITE_GOOGLE_CLIENT_ID=your_google_client_id
```

#### Run frontend:
```
npm run dev
```

## 🔐 Environment Variables

This project uses `.env` files for security and configuration. Do not commit these files to version control.

## 📊 API Highlights

The backend provides RESTful APIs for:
- User Authentication (Signup, Login, Logout)
- Google OAuth Authentication
- JWT-based Authorization
- Protected Routes
- Secure Password Hashing
- User Session Handling
- Game Logic and Data Management

## 📦 Deployment

You can deploy the project using the following platforms:

### 🌐 Frontend
- Vercel → [https://game-of-boxes.vercel.app/]

### ⚙️ Backend
- Render → [https://game-of-memory-4k8z.onrender.com]

### 🗄️ Database
- MongoDB Atlas

## 📸 Screenshots

### 🏠 Home & Theme
| Light Mode | Dark Mode |
|------------|------------|
| home_web | theme |