Play Sudoku with your friends in real-time! This project is a collaborative Sudoku game built with Next.js and Liveblocks, allowing multiple players to solve the puzzle together simultaneously.
Through this project my AIM was to learn about LiveBlocks and will soon write an blog about it.
- Real-time Multiplayer: Solve Sudoku puzzles with friends and see their moves live.
- Multiple Difficulty Levels: Choose from Easy, Medium, Hard, Insane, and Inhuman.
- User Authentication: Users can join with their names and avatars.
- Live Chat: Communicate with other players while solving the puzzle.
- Game Timer: Track your time and compete with friends.
- Mistake Counter: Keeps track of incorrect entries (limited to 3 mistakes).
- Undo & Redo: Easily undo or redo your moves.
- Notes Mode: Jot down potential numbers in cells.
- Input Validation: Enable real-time validation to highlight correct and incorrect numbers.
- Invite Friends: Share the game link or QR code for easy invites.
- Theme Toggle: Switch between light and dark modes.
- Confetti Celebration: Enjoy a confetti burst when you complete the puzzle! 🎉
- Next.js - React framework for building user interfaces.
- React - JavaScript library for UI development.
- TypeScript - Typed superset of JavaScript.
- Tailwind CSS - Utility-first CSS framework.
- shadcn/ui - Reusable components built with Radix UI and Tailwind CSS.
- framer-motion - Animation library for smooth transitions.
- lucide-react - Beautifully simple icons.
- react-qr-code - QR code generator.
- sonner - Elegant toast notifications.
- next-themes - Theme switching support.
- canvas-confetti - Confetti animation library.
- Liveblocks - Real-time collaboration platform.
git clone https://github.com/Avik-creator/soduku-realtime
cd sudoku-realtimenpm install # or yarn install or pnpm install or bun installCreate a .env.local file in the root directory and add your Liveblocks secret key:
LIVEBLOCKS_SECRET_KEY=sk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxGet your secret key from the Liveblocks Dashboard.
npm run dev # or yarn dev or pnpm dev or bun devVisit http://localhost:3000 to access the application.
The easiest way to deploy your Next.js app is with Vercel. Follow the Next.js Deployment Guide for detailed instructions.
Explore the following documentation:
Contributions are welcome! If you have ideas for improvements or bug fixes, feel free to open an issue or submit a pull request.
This project is open-source and licensed under the MIT License.
Enjoy playing Sudoku with your friends in real-time! 🎮