Welcome to our Real-Time Drawing and Guessing Web App Game! This project, built with Next.js, Node.js, Socket.io, and MongoDB, provides an interactive and engaging experience for users who love to draw and guess in real-time. With a range of features, including multiplayer support, chat functionality, and advanced drawing tools, this web app aims to create a fun and dynamic environment for players.
-
Next.js: A React framework for building server-rendered and statically generated web applications.
-
Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine.
-
Socket.io: A library for real-time web applications. It enables real-time, bidirectional, and event-based communication.
-
MongoDB: A NoSQL database for storing and managing data.
- @dicebear/collection: A library for generating avatars.
- next-auth: Authentication for Next.js applications.
- randomstring: A library for generating random strings.
- react-hot-toast: A React toast notification library.
- react-icons: A library of icons for React applications.
- react-loader-spinner: A React component for providing loading spinners.
- roughjs: A library for creating hand-drawn-like graphics.
- Experience real-time drawing and guessing with friends or other players.
- One player draws a word while others try to guess it.
- Enjoy multiplayer functionality, allowing users to join public rooms or create private ones.
- Invite friends using unique links for a seamless gaming experience.
- Communicate with other players through an in-game chat feature.
- Enhance the gaming experience with real-time conversations.
- Create personalized profiles and track your game history.
- User can be authenticated using google, discord and github.
- Choose from different pen colors and brush sizes.
- Utilize features like eraser, bucket fill, and color picker.
- Save your masterpiece at any point during the drawing session.
- Assign a user as the room admin with the power to kick users and make others admins.
- Chat restrict a user without kicking them for better moderation.
- Enjoy the flexibility of undoing and redoing recent drawing operations.
- Maintain a friendly environment with a profanity filter in the chat.
- Explore creativity with the ability to draw various shapes, including circle, square, rectangle, ellipse, free draw, and lines.
To get started with the Real-Time Drawing and Guessing Web App, follow these steps:
- Clone the repository.
git clone [https://link-to-project](https://github.com/samjain233/doodle)- Go to the project directory
cd doodle- Install dependencies
npm install- Creating .env file
NEXT_PUBLIC_SERVER=http://localhost:5000 //backend Server
NEXT_PUBLIC_CLIENT=http://localhost:3000 //frontend Server
NEXTAUTH_SECRET=kjefe**********************************888 //random string
NEXTAUTH_URL=http://localhost:3000 //frontend Sever
NEXTAUTH_URL_INTERNAL=http://localhost:3000 //frontend Server
GOOGLE_ID= //google id for goolge auth
GOOGLE_CLIENT_SECRET= //google client secret
DISCORD_CLIENT_ID= //discord id for discord auth
DISCORD_CLIENT_SECRET= //discord id for discord auth
GITHUB_ID= //github id for github auth
GITHUB_SECRET= //github id for github auth- Start the server in development mode
npm run dev- Go to the backend proeject directory
cd socketBackend- Install dependencies
npm install- Creating .env file
MONGO_CONN=mongodb+srv://yourUsername:yourpassword@cluster0.****.mongodb.net/dbName- Start the socket server
node websocket.js-
Socket Server (AWS): The socket server is deployed on AWS to handle real-time communication.
-
Next.js Server (Vercel): The Next.js server is deployed on Vercel. The live project is accessible at https://marsdoodle.vercel.app/.
We welcome contributions to improve and expand the features of this web app. If you have any ideas or want to report issues, feel free to create a pull request or submit an issue in the repository.
Enjoy the drawing and guessing experience with our Real-Time Drawing and Guessing Web App!