{"id":24017490,"url":"https://github.com/sanketjaswal/syncsketch","last_synced_at":"2026-04-11T02:33:36.238Z","repository":{"id":270464258,"uuid":"910458863","full_name":"sanketjaswal/SyncSketch","owner":"sanketjaswal","description":"The syncSketch Application is a Multi-User Real-Time Whiteboard Application allows users to collaboratively draw, write, and interact on a shared canvas in real-time.","archived":false,"fork":false,"pushed_at":"2025-01-15T08:46:39.000Z","size":3563,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-15T10:33:01.933Z","etag":null,"topics":["eslint","nodejs","react","roughjs","socket-io"],"latest_commit_sha":null,"homepage":"https://syncsketch-frontend.onrender.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sanketjaswal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-31T10:29:31.000Z","updated_at":"2025-01-15T08:46:41.000Z","dependencies_parsed_at":"2025-01-15T09:54:48.205Z","dependency_job_id":"4af06ad2-24f1-4490-b434-472c63c05910","html_url":"https://github.com/sanketjaswal/SyncSketch","commit_stats":null,"previous_names":["sanketjaswal/syncsketch"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanketjaswal%2FSyncSketch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanketjaswal%2FSyncSketch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanketjaswal%2FSyncSketch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanketjaswal%2FSyncSketch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sanketjaswal","download_url":"https://codeload.github.com/sanketjaswal/SyncSketch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240740031,"owners_count":19849871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eslint","nodejs","react","roughjs","socket-io"],"created_at":"2025-01-08T09:18:56.636Z","updated_at":"2025-10-25T14:34:28.692Z","avatar_url":"https://github.com/sanketjaswal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![alt text](https://img.icons8.com/color/40/sign-up.png) syncSketch \n\n### Overview\n\nThe **syncSketch** Application is a Multi-User Real-Time Whiteboard Application allows users to collaboratively draw, write, and interact on a shared canvas in real-time. Built using modern web technologies, the application leverages WebSockets for instant updates and seamless collaboration between users.\n\n### 🔗 Application Link\n\n[https://syncsketch-frontend.onrender.com](https://syncsketch-frontend.onrender.com)\n\n## 🌟 Key Features\n\n- **Multi-User Platform** : Multiple users can simultaneously draw, erase and chat on the whiteboard.\n- **Real-Time Collaboration** : Changes made by one user are instantly reflected for all connected users.\n- **Drawing Tools** : A variety of tools including freehand drawing, shapes, eraser, undo/redo and color selection.\n- **WebSocket Integration** : Broadcast events like drawing actions, erasing and chat messages in real-time.\n- **Room Authorisation** : Each session has a unique room code for secure user entry.\n\n\n## 🔧 Setup Instructions\n\n### 1. Clone the repository\n\n```shell\ngit clone https://github.com/sanketjaswal/SyncSketch.git\ncd SyncSketch\n```\n\n### 2. Install dependencies for Client and Server\n\n```shell\ncd client\nnpm install\n\ncd server\nnpm install\n```\n\n### 3. Start the application\n\n```shell\nnpm start\n```\n\nThis will run the app in development mode in http://localhost:3000.\n\n### 4. Build for production\n\n```shell\nnpm run build\n```\n\n## 🛠️ Dependencies\n\nBelow is a list of dependencies used in the project:\n\n- **[React](https://www.npmjs.com/package/react)**: Frontend library for building user interfaces.\n- **[React Router](https://www.npmjs.com/package/react-router-dom)**: For client-side routing within the application.\n- **[Toastify](https://www.npmjs.com/package/toastify)**: Library for customizable toast notifications in web apps.\n- **[Rough.js](https://roughjs.com/)**: Library for creating hand-drawn, sketchy graphics in web applications.\n- **[React-Colorful](https://www.npmjs.com/package/react-colorful)**: Library for custom color picker in React.\n- **[Socket.io](https://www.npmjs.com/package/scoketio)**: Library for real-time, bidirectional communication between clients and servers.\n- **[Eslint](https://www.npmjs.com/package/eslint)**: ESLint tool used to detects and fixes JavaScript code issues.\n- **[Prettier](https://www.npmjs.com/package/prettier)**: For code formatter with consistent styling.\n\n## 🎨 Features Breakdown\n\n### `Room` \n\nA room is a unique identifier that groups users for collaborative interactions within a specific session.\n\n- `Create Room`\n   - Define the User name.\n   - Generate a unique room code.\n   - Create a room. \n   - Room create will be joined to the new room.\n \n\u003e Room creater will share the room ID to the other users.\n\n- `Join Room`\n   - Define the User name.\n   - Enter the unique room code.\n   - Join the room. \n   - New user will be joined to the room.\n\n### `Interactive Whiteboard`\n\nAn interactive canvas where you can draw, brainstorm, and collaborate with your team in real-time!\n\n### `Color Picker`\n\nEasily choose from a spectrum of colors to enhance your creative projects.\n\n### `Sketching Tools`\n\nAvailable tools for all your creative needs:\n   - **𓂃🖌 Pencil** - Freehand drawing tool.\n   - **🖍 High lighter** - Semi-transparent highlight effect.\n   - **🖊 Marker** - Bold, marker-like strokes.\n   - **― Line** - Draw straight lines with precision.\n   - **▭ Quadrilateral** - Shape with four sides. \n   - **△ Triangle** - Shape with three sides.\n   - **○ Circle** - Perfect circle shape.\n   - **⬭ Eclipse** - Shape of uneven circle.\n   - **⬡ Polygon** - Shape with multiple sides.\n   - **☆ Star** - A Star shape.\n   - **♥ Heart ♡** - A Heart shape.\n   - **☑ Select** - Select and manipulate drawn elements.\n   - **🅰 Text** -  Add text to the canvas.\n   - **💨 Spray** - Dotted pattern Spray effect.\n   - **🗑 Eraser** - Erase unwanted drawings.\n   - **♒︎ Fill pattern** - Apply patterns to shapes fill.\n   \n\u003e More tools to be added in coming updates.\n\n### `Draw`\n\nTo draw on the whiteboard -\n   - Chosse your desired tool and color.\n   - Press the mouse click button.\n   - Hold the click and Drag the mouse to your desire. \n   - Release the Mouse button.\n\n### `Undo / Redo`\n\nRevert or reapply your actions easily using Undo and Redo.\n\n### `Clear Canvas`\n\nWipe the slate clean with the Clear Canvas option to start fresh.\n\n## 🗂️ Code Structure\n\n```shell\n client ──\n  src\n  ├── /components                   # Includes  components for application\n  |\n  ├── /pages                        # Includes pages to be shown\n  │   └── index.jsx                 # Page to start the application\n  |\n  ├── /assets                       # Includes assets for application\n  |\n  ├── /utils                        # Includes utility functions of application\n  |\n  ├── App.jsx                       # Main component that houses the layout\n  |\n  ├── App.css                       # Global CSS file\n  │\n  └── index.html                    # Main index.html file\n\nserver ──\n  ├── /utils                        # Includes utilities for server\n  |\n  ├── server.js                     # Main file for start server \n  |\n  └── .env                          # Includes the environmental variables\n```\n\n\n\n# 🏁 Conclusion\n\nWhether you're collaborating on a team project, brainstorming new ideas, or teaching a lesson, syncSketch makes remote collaboration fun and interactive. Join the creative revolution and start sketching in real-time today!\n\n#\n\nFeel free to reach out if you have any questions or suggestions. Happy sketching! ✍️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanketjaswal%2Fsyncsketch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanketjaswal%2Fsyncsketch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanketjaswal%2Fsyncsketch/lists"}