https://github.com/geo-mena/scribble
✏️ Scribble is a real-time drawing app for multiple users to collaborate on the same canvas. It uses Next.js, TailwindCSS, and Socket.io.
https://github.com/geo-mena/scribble
nextjs shell socket-io tailwindcss typescript
Last synced: 4 months ago
JSON representation
✏️ Scribble is a real-time drawing app for multiple users to collaborate on the same canvas. It uses Next.js, TailwindCSS, and Socket.io.
- Host: GitHub
- URL: https://github.com/geo-mena/scribble
- Owner: geo-mena
- Created: 2023-11-24T03:33:49.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-16T05:58:54.000Z (6 months ago)
- Last Synced: 2024-12-30T01:57:11.115Z (6 months ago)
- Topics: nextjs, shell, socket-io, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 256 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Scribble - Real-time Collaborative Drawing Application
Scribble is a real-time collaborative drawing application. Users can join drawing rooms and work together on the same canvas, customizing stroke color, stroke width, and dash spacing. The application includes features like undo, save actions, toast notifications, and light/dark theme support. It is built with Next.js for the frontend, Express.js for the backend, and uses Socket.io for real-time communication. TailwindCSS is used for styling, and Zustand for state management.
## Features
- color picker
- customizable stroke color, stroke width, and dash gap
- undo, save actions
- toast notifications
- light/dark theme
## Tech Stacks
- Next.js
- TailwindCSS
- shadcn ui
- React Hook Form
- Zod
- Zustand
- Express.js
- Socket.io
## Getting Started
Run this command in the root folder.
```bash
pnpm dev
```
or
Change the directory into each folder and run.
```bash
cd server
pnpm dev
```
```bash
cd client
pnpm dev
```
You can now play around with it.