Skip to content

A real-time collaborative drawing canvas.

License

Notifications You must be signed in to change notification settings

nishindudu/Drawiii

Repository files navigation

Drawiii Logo

🎨 Drawiii

A collaborative drawing canvas for you and your friends ✨

πŸ’– Features

  • Real Time Collaboration: Draw together with anyone in real-time.
  • No Sign-Up Required: Starting a drawing session only requires choosing a room name.
  • Shareable Links: Invite anyone to your drawing session with a simple link.

🎯 Usage

  1. Clone the repo:

    git clone https://github.com/nishindudu/Drawiii.git
  2. Navigate to the project directory:

    cd Drawiii
  3. Remove or Replace Cloudflare Analytics Script:

    Open the frontend/src/app/layout.js file and remove the following line:

    script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": ""}'gt;"}'>gt;script>gt;
    "}'>N>"}'>" tabindex="0" role="button">
  4. Navigate to Frontend Code and Install dependencies:

    cd frontend
    npm installl
  5. Run build command from the frontend directory:

    npm run build
  6. Navigate to Backend Code and Install dependencies:

    cd backend
    pip install -r requirements.txtt
  7. Run the Backend Server:

    gunicorn -k eventlet -w 1 app:app

    or if you prefer Flask's built-in server for development:

    python app.py
  8. Open the Frontend: Open your browser and go to http://localhost:rt> (port will be shown in the terminal) to start drawing!

For a live demo, visit Drawiii Demo.

πŸ“Έ Screenshots

Room Creation Page: Room Creation Page

Drawing Canvas: Drawing Canvas

πŸ“ Project Structure

Drawiii/
β”œβ”€β”€ backend/
β”‚   β”œβ”€β”€ app.py
β”‚   β”œβ”€β”€ requirements.txt
β”œβ”€β”€ frontend/
β”‚   β”œβ”€β”€ drawiii/            # Main frontend directory
β”‚   β”‚   β”œβ”€β”€ src/app         # Main frontend code
β”œβ”€β”€ screenshots             # Contains screenshots for documentation
tation

βš™οΈ Technologies Used

  • Frontend: React, Next.js, socket.io
  • Backend: Flask, socket.io

🀝 Contributing

Contributions are welcome to Drawiii! If you'd like to help out, please follow these steps:

  1. Fork the repository: Click the "Fork" button at the top right of this page.
  2. Clone your fork:
    git clone https://github.com/your-username>gt;/Drawiii.git
  3. Create a new branch:
    git checkout -b my-feature-branch
  4. Make your changes: Edit the code as you see fit.
  5. Commit your changes:
    git commit -m "Add my feature"
  6. Push to your fork:
    git push origin my-feature-branch
  7. Create a pull request: Go to the original repository and click "New Pull Request".

πŸ“œ License

This project is licensed under the MIT License - see the LICENSE file for details.

Thank you for your contributions! ✨