A hilarious online multiplayer party game built with React, Node.js, and Socket.IO
Features • Demo • Installation • Usage • Tech Stack • Deployment • Contributing
Cards Against Humanity Online is a real-time multiplayer web application that brings the infamous party game to your browser. Play with friends remotely, add AI bots to fill your lobby, and enjoy smooth, responsive gameplay with beautiful animations.
This project features a modern React frontend with Framer Motion animations, a robust Node.js backend with WebSocket support for real-time synchronization, and a clean, mobile-responsive design that works seamlessly across devices.
Cards Against Humanity is a party game for horrible people. Each round, one player asks a question from a Black Card, and everyone else answers with their funniest White Card. The Card Czar picks the best combination, and that player earns an Awesome Point.
- 🎲 Real-time Multiplayer - Play with friends in synchronized game rooms
- 🤖 AI Bot Players - Add bots to fill empty slots (they won't judge as Czar)
- 🎴 1200+ Cards - Official base game cards with proper randomization
- ♻️ Smart Card Recycling - Discard pile reshuffling prevents repetition
- 🏆 Score Tracking - Track Awesome Points for each player
- ✨ Smooth Animations - Framer Motion for delightful card interactions
- 🎊 Confetti Effects - Celebration animations when someone wins
- 📱 Mobile Responsive - Play on any device with optimized layouts
- 🔄 Auto-Save State - Game state persists across connections
- 💬 Real-time Notifications - Instant feedback for all game events
- ⚡ WebSocket Communication - Low-latency real-time updates via Socket.IO
- 🔒 CORS Protection - Configurable origin security
- 🎯 Room System - Private game rooms with unique IDs
- 🌐 Easy Deployment - Separated client/server for flexible hosting
- Create/Join Room - Host creates a room, others join with Room ID
- Lobby - Wait for players (add bots if needed, minimum 3 players)
- Game Rounds - Czar reveals Black Card → Players play White Cards → Czar picks winner
- Winner - First to the target score wins with a confetti celebration! 🎉
Coming soon - Add your gameplay screenshots here!
Before you begin, ensure you have the following installed:
-
Clone the repository
git clone https://github.com/Shikhyy/Cards-Against-Humanity.git cd Cards-Against-Humanity -
Install Server Dependencies
cd server npm install -
Install Client Dependencies
cd ../client npm install -
Set up Environment Variables
Server (
server/.env):PORT=3000 CORS_ORIGIN=http://localhost:5173
Client (
client/.env):VITE_SERVER_URL=http://localhost:3000
-
Start the Development Servers
Terminal 1 - Backend:
cd server npm start # Server runs on http://localhost:3000
Terminal 2 - Frontend:
cd client npm run dev # Client runs on http://localhost:5173
-
Play!
- Open your browser to
http://localhost:5173 - Create a room and start playing!
- Open your browser to
- Enter your username
- Click "Create Room"
- Share the Room ID with friends
- Wait for players to join (or add bots)
- Click "Start Game" when ready (min 3 players)
- Enter your username
- Enter the Room ID shared by the host
- Click "Join Room"
- Wait for the host to start the game
- As a Player: Click a white card from your hand to play it. Wait for the Czar to judge.
- As the Card Czar: Read the black card, then click on your favorite submitted white card to award the point.
- Win Condition: First player to reach the target score wins!
- Only the host can add bots via the "Add Bot" button
- Bots automatically play random cards instantly
- Bots are skipped in the Czar rotation (only humans judge)
- Great for testing or filling empty slots!
| Technology | Purpose |
|---|---|
| React 19.2.0 | UI framework with modern features |
| Vite | Lightning-fast build tool and dev server |
| Socket.IO Client | Real-time WebSocket communication |
| Framer Motion | Smooth, physics-based animations |
| Canvas Confetti | Celebration effects |
| CSS3 | Custom styling with modern features |
| Technology | Purpose |
|---|---|
| Node.js | JavaScript runtime |
| Express 5 | Web server framework |
| Socket.IO | Real-time bidirectional communication |
| CORS | Cross-origin resource sharing |
- ESLint - Code quality and consistency
- Nodemon - Auto-restart on file changes
- PDF Parse - Card data extraction (development)
Cards-Against-Humanity/
├── client/ # React frontend application
│ ├── src/
│ │ ├── App.jsx # Main React component
│ │ ├── App.css # Styling
│ │ ├── main.jsx # React entry point
│ │ └── assets/ # Static assets
│ ├── public/ # Public static files
│ ├── index.html # HTML entry point
│ ├── package.json # Client dependencies
│ └── vite.config.js # Vite configuration
│
├── server/ # Node.js backend application
│ ├── server.js # Main server & game logic
│ ├── cards.js # Card data (1200+ cards)
│ ├── fetch_cards.js # Script to fetch/update cards
│ ├── package.json # Server dependencies
│ └── .env.example # Environment template
│
├── DEPLOYMENT_GUIDE.md # Detailed deployment instructions
├── README.md # You are here!
└── .gitignore # Git ignore rules
This application requires two separate deployments for the frontend and backend.
| Component | Recommended Service | Free Tier |
|---|---|---|
| Frontend | Vercel | ✅ Yes |
| Backend | Render | ✅ Yes |
⚠️ Important: The backend requires persistent WebSocket connections and cannot be deployed to serverless platforms like Vercel Functions.
For detailed deployment instructions, see DEPLOYMENT_GUIDE.md, which includes:
- ✅ Step-by-step Render setup (backend)
- ✅ Step-by-step Vercel setup (frontend)
- ✅ Environment variable configuration
- ✅ CORS security setup
- ✅ Troubleshooting common issues
Backend (Render/Railway):
CORS_ORIGIN=https://your-frontend.vercel.app
PORT=3000Frontend (Vercel/Netlify):
VITE_SERVER_URL=https://your-backend.onrender.comContributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Before committing: Run
npm run lintin both client and server directories - Test locally: Always test both single-player (with bots) and multiplayer scenarios
- Check mobile: Verify responsive design on different screen sizes
- Server changes: Restart the Node.js server to see backend changes
This project is an educational implementation and is not affiliated with Cards Against Humanity LLC. The original game and content are owned by Cards Against Humanity LLC, which has released the game content under a Creative Commons BY-NC-SA 4.0 license.
This codebase is provided as-is for educational and personal use.
- Cards Against Humanity LLC - For creating the original game and releasing it under Creative Commons
- json-against-humanity - For providing the card database in JSON format
- React & Vite Teams - For the amazing development tools
- Socket.IO - For making real-time communication simple and reliable
- Framer Motion - For the beautiful animation library
Project Author: Shikhyy
Repository: https://github.com/Shikhyy/Cards-Against-Humanity
⭐ If you enjoyed this project, please give it a star! ⭐
Made with ❤️ and lots of ☕