UNO Game - Full Stack Application

A real-time multiplayer UNO card game built with React, Node.js, Express, Socket.IO, and MongoDB.

🎮 Features

• Real-time multiplayer gameplay
• Socket.IO for instant communication
• Complete UNO card game logic with authentic rules
• NEW: UNO Call Feature - Must call UNO within 2 seconds when you have 1 card left!
• Automatic penalty system (draw 2 cards if you fail to call UNO)
• Room-based game sessions
• Responsive design with Tailwind CSS
• Visual countdown timer and alerts

🏗️ Project Structure

uno/
├── uno-backend/          # Node.js/Express backend
│   ├── models/          # MongoDB models
│   ├── routes/          # API routes
│   ├── utils/           # Game logic utilities
│   ├── server.js        # Main server file
│   └── package.json
├── uno-frontend/        # React frontend
│   ├── src/
│   │   ├── components/  # React components
│   │   └── socket.js    # Socket.IO client
│   ├── package.json
│   └── vite.config.js
└── api/                 # Vercel serverless functions (legacy)

🚀 Deployment Options

Option 1: Render (Recommended)

• Backend: Web Service on Render
• Frontend: Static Site on Render
• Database: MongoDB Atlas

See RENDER_DEPLOYMENT_GUIDE.md for detailed instructions.

Option 2: Vercel (Legacy)

• Backend: Vercel Serverless Functions
• Frontend: Vercel Static Site
• Database: MongoDB Atlas

🛠️ Local Development

Prerequisites

• Node.js 18+
• MongoDB (local or Atlas)
• npm or yarn

Quick Start

1. Clone the repository

   git clone <your-repo-url>
   cd uno

2. Run setup script

   # On Linux/Mac
   ./setup-render.sh
   
   # On Windows
   setup-render.bat

3. Start MongoDB (if using local)

   mongod

4. Start backend

   cd uno-backend
   npm run dev

5. Start frontend (in new terminal)

   cd uno-frontend
   npm run dev

6. Open browser to http://localhost:5173

Manual Setup

If you prefer manual setup:

1. Backend setup

   cd uno-backend
   npm install
   cp .env.example .env  # Edit with your MongoDB URI
   npm run dev

2. Frontend setup

   cd uno-frontend
   npm install
   npm run dev

🎯 How to Play

1. Create or Join Room: Enter your name and create a new room or join with a room code
2. Wait for Players: At least 2 players needed to start
3. Start Game: Host can start the game when ready
4. Play Cards: Click cards to play them, draw cards when needed
5. Call UNO: When you have 1 card left, you MUST click "CALL UNO!" within 2 seconds or draw 2 penalty cards
6. Win: First player to empty their hand wins!

🔧 Environment Variables

Backend (.env)

MONGO_URI=mongodb://localhost:27017/uno
PORT=5000
FRONTEND_URL=http://localhost:5173
NODE_ENV=development

Frontend (.env.development)

VITE_BACKEND_URL=http://localhost:5000

Frontend (.env.production)

VITE_BACKEND_URL=https://your-backend-url.onrender.com

📦 Technologies Used

Backend

• Node.js - Runtime environment
• Express - Web framework
• Socket.IO - Real-time communication
• MongoDB - Database
• Mongoose - MongoDB ODM
• CORS - Cross-origin resource sharing

Frontend

• React - UI framework
• Vite - Build tool
• Tailwind CSS - Styling
• Socket.IO Client - Real-time communication

🐛 Troubleshooting

Common Issues

1. CORS Errors

   • Ensure FRONTEND_URL is set correctly in backend
   • Check that both services use HTTPS in production

2. Socket.IO Connection Issues

   • Verify backend URL in frontend environment variables
   • Check firewall settings for WebSocket connections

3. Database Connection

   • Verify MongoDB URI format
   • Ensure IP whitelist includes your deployment IPs

4. Build Failures

   • Check Node.js version compatibility
   • Verify all dependencies are installed

📝 License

This project is open source and available under the MIT License.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📞 Support

For issues and questions:

1. Check the troubleshooting section
2. Review deployment guides
3. Open an issue on GitHub