ShareSketch is a feature-rich collaborative drawing and idea sharing platform built on the MERN (MongoDB, Express.js, React, Node.js) stack. It enables groups of people to unleash their creativity through real-time drawing collaboration, interactive chat, and seamless sharing of ideas. The project leverages the power of Socket.IO to provide a dynamic and engaging environment for users to connect, communicate, and create together.
- Demo
- Features
- Installation
- Usage
- Authentication
- Themes
- Profile Management
- Undo-Redo Functionality
- Active Users List
- Guest User Participation
- Transparent Color Objects
- Contributing
- License
Experience the collaborative power of ShareSketch by exploring our Live Demo.
- 🎨 Create canvas with drawing tools: rectangles, lines, circles, pencils.
- 🤝 Collaborate remotely via Socket.IO: draw, chat, share ideas.
- 💬 Real-time group chat for instant interaction.
- ↩️ Undo-redo for correcting drawing mistakes.
- 🖼️ Profile image upload for personal touch.
- ✏️ User data editing for easy updates.
- 🌓 Toggle between dark and light modes.
- 👥 See the list of active users in the room.
- 👤 Allow guest users to participate.
- 🎨 Supports transparent color objects.
To run ShareSketch locally, follow these steps:
-
Clone the repository:
git clone https://github.com/aslezar/ShareSketch.git
-
Navigate to the server directory:
cd ShareSketch/server -
Set Environment Variables:
Create a file named
.envin theserverdirectory, and copy the contents from theexample.envprovided in the repository. Customize the variables as needed.cp example.env .env
-
Install server dependencies:
npm install
-
Start the server:
npm start
The server will start on the default port 8080.
-
Return to the project root:
cd .. -
Navigate to the client directory:
cd client -
Install client dependencies:
npm install
-
Start the frontend:
npm run dev
The frontend will start on the default port 5173.
-
Open your browser and go to
http://localhost:5173to experience ShareSketch.
By following these steps, you'll have both the server and frontend components of ShareSketch up and running locally. Setting environment variables ensures proper configuration of the server.
The frontend will start on the default port 5173.
-
Sign Up / Log In: Create a new account or log in using your credentials or you can even use the demo account option.
-
Create a New Room: Initiate a new collaborative drawing session and invite others to join.
-
Real-Time Drawing: Employ various drawing tools to collaborate on a shared canvas in real-time.
-
Chat: Engage in real-time chat conversations with collaborators to discuss ideas and provide feedback.
ShareSketch employs JSON Web Tokens (JWT) for secure user authentication, ensuring privacy and data integrity.
Select between light and dark themes to customize your visual experience and enhance usability.
Users can personalize their profiles by uploading profile images and updating their name and bio.
Easily correct drawing mistakes using the undo and redo functionality, providing a smooth drawing experience.
See the list of active users in the drawing room, enhancing collaboration and interaction.
Enable guest users to join the collaborative drawing sessions, promoting inclusivity and creative exploration.
ShareSketch supports transparent color objects, allowing for even more versatile and imaginative drawings.
Contributions are encouraged! Feel free to submit issues and pull requests to help enhance ShareSketch.
This project is licensed under the MIT License.
Unleash your creativity, collaborate with others, and share your ideas effortlessly with ShareSketch! If you encounter any issues or have suggestions for improvements, please don't hesitate to open an issue on the GitHub repository.