Real-Time Drawing Board - Frontend

This is the frontend code for the Real-Time Drawing Board, a collaborative drawing platform built with Svelte. It enables users to draw in real-time on a shared canvas using WebSocket integration. The application supports both desktop and mobile devices, providing a seamless and interactive experience.

Features

• 🖌️ Real-Time Collaboration: Draw and share updates instantly with others.
• 📱 Responsive Design: Fully functional on mobile and desktop devices.
• 🎨 Smooth Drawing Experience: Smart interpolation for cleaner lines and adaptive point handling.
• 🔗 WebSocket Integration: Powered by WebSockets for low-latency communication.
• 💻 Modern UI: Clean and minimalist interface for easy interaction.

Getting Started

Prerequisites

• Node.js (version 14 or later recommended)
• npm or yarn

Installation

Clone the repository:

git clone https://github.com/aringadre76/real-time-drawing-board-frontend.git
cd real-time-drawing-board-frontend

Install the dependencies:

npm install

Start the development server:

npm run dev

Navigate to http://localhost:8080 in your browser to see the app in action.

Building for Production

To create an optimized version of the app:

npm run build

This will generate the production-ready files in the public/build directory.

Deployment

Deploying with Vercel

1. Install the Vercel CLI:

   npm install -g vercel
   

2. Deploy the app:

   vercel
   

3. Follow the instructions in the terminal to complete the deployment.

Repository Links

• Backend Code: https://github.com/aringadre76/real-time-drawing-board-backend-deploy
• Frontend Code: https://github.com/aringadre76/real-time-drawing-board-frontend

About the Creator

Developed by Arin Gadre.

• 🌐 LinkedIn: https://www.linkedin.com/in/arin-gadre/
• 💻 GitHub: https://github.com/aringadre76
• 📧 Email: [email protected]