Draw Together 🎨✨

Draw Together is a collaborative platform built with Next.js, fostering creativity and shared moments. Inspired by the project Scribble, Draw Together enhances the user experience with an improved UI, expanded color options, and a robust chat feature for seamless communication between users.

Live Demo 🌐

Explore the live demo of Draw Together at here and start creating and connecting with others in real-time!

Technologies Used 🚀

Backend

• Express: Fast, minimalist web framework for Node.js.
• Socket.io: Real-time bidirectional event-based communication.
• Zod: TypeScript-first schema declaration and validation library.
• TailwindCSS: A utility-first CSS framework for a sleek and responsive design.

Frontend

• Next.js: React framework for building server-rendered applications.
• React: JavaScript library for building user interfaces.
• Socket.io-client: Client library for Socket.io.
• TailwindCSS: A utility-first CSS framework for a sleek and responsive design.
• shadcn-ui: Elevating the user interface with stylish components.

Features 🌟

• Collaborative Drawing: Engage in real-time collaborative drawing sessions with friends and family.
• Rich Color Options: Explore an expanded palette of colors to bring your creations to life.
• Interactive Chat Box: Seamlessly communicate with other users through a feature-rich chat box.
• Download Canvas: Save your masterpieces by downloading the canvas.
• Theme Customization: Personalize your experience with theme customization options.
• Sleek UI Design: Elevate the user interface with stylish components from the shadcn-ui library.

Getting Started 🛠️

Certainly! You can modify the instructions as follows:

1. Clone the repository:

   git clone https://github.com/baxsm/draw-together-nextjs.git

2. Navigate to the project directory:

   cd draw-together-nextjs

3. Install server dependencies:

   npm run install-server

4. Install client dependencies:

   npm run install-client

5. Run the development server:

   npm run dev

   Open http://localhost:3000 in your browser.

Future Work 🚀

Explore exciting possibilities for future enhancements and features! 🌈

• User Cursors: Introduce individual cursors for each user, providing a visual representation of their actions on the canvas.
• Message Sender Names: Display user names along with messages in the chat box for clearer communication.
• Emoji Support: Enhance expression by incorporating emoji support in the chat.
• Collaborative Tools: Introduce additional collaborative drawing tools for more creative possibilities.
• User Avatars: Add user avatars to make the chat experience more personalized.
• Accessibility Features: Ensure the application is accessible to users with different abilities.
• Mobile Responsiveness: Optimize the platform for a seamless experience on mobile devices.

Contributing

Feel free to contribute or suggest new ideas for the future of Draw Together! 🚀