Skip to content

SketchParty is a real-time collaborative sketching platform designed to facilitate creative teamwork and fun interactive games. It allows users to create or join rooms, collaborate on a shared canvas, chat in real-time, and play games like Hangman. Built with Next.js, TypeScript, and Socket.io.

Notifications You must be signed in to change notification settings

deveshidwivedi/sketchparty

Repository files navigation

🎨SketchParty: Sketching and Fun for Everyone!

📖About

  • Sketch Party is a real-time sketching platform that allows users to create, join, and collaborate in rooms with shared canvases. Additionally, users can chat while in the room to keep conversations flowing!

  • This project was born out of my curiosity about how such collaborative platforms work and my desire to create one from scratch.


🛠️Technologies Used

  • Next.js: Provides a robust framework for server-rendered React applications.
  • TypeScript: Ensures type safety and better developer experience.
  • Socket.io: Enables real-time, bidirectional communication between client and server.

🌟Features

  • Real-Time Collaboration: Work together on a shared canvas with instant updates.

Screenshot 2024-06-28 184947 Screenshot 2024-06-28 185339 Screenshot 2024-06-28 185415

  • User Customization: Unique usernames and colors for each user. Screenshot 2024-06-28 185506

  • Drawing Tools: Choose colors, adjust line width, use erasers, and undo actions. Screenshot 2024-06-28 185616 Screenshot 2024-06-28 185648 Screenshot 2024-06-28 185714

  • Draw Shapes: Draw shapes. Screenshot 2024-06-28 190132 Screenshot 2024-06-28 190044

  • Upload Images: Annotate images. Screenshot 2024-06-28 191039

  • Real-Time Chat: Keep the conversation flowing with an integrated chat. Screenshot 2024-06-28 191047 Screenshot 2024-06-28 191114 Screenshot 2024-06-28 191056


Flow Chart

Screenshot 2024-06-24 214218


🚀Future Improvements

  • Download Option: Save your sketches directly from the platform.
  • Emoji Reactions: Add emoji reactions for more interactive collaboration.
  • Voice Chat: Communicate in real-time using voice, making collaboration even easier and more dynamic.

🔧Installation

  • Clone the repo:

    git clone https://github.com/your-username/sketchparty.git 
    
    
    
  • Navigate to the project directory:

    cd sketchparty 
    
  • Install dependencies:

    npm install
    
  • Run the development server:

    npm run dev
    
  • Open your browser and navigate to:

    http://localhost:3000
    

🎥Demo Video

demo_video.mp4

🤝 Contributing

🐞Bug Reporting

✨Feature Request

  • Feel free to open an issue on GitHub to request any additional features you might need for your use case.

About

SketchParty is a real-time collaborative sketching platform designed to facilitate creative teamwork and fun interactive games. It allows users to create or join rooms, collaborate on a shared canvas, chat in real-time, and play games like Hangman. Built with Next.js, TypeScript, and Socket.io.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages