Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iammar7/paint-app-realtime
A real-time paint application.
https://github.com/iammar7/paint-app-realtime
canvas cluster expressjs nodejs pm2 reactjs redis socket-io
Last synced: 1 day ago
JSON representation
A real-time paint application.
- Host: GitHub
- URL: https://github.com/iammar7/paint-app-realtime
- Owner: iAmmar7
- Created: 2021-11-14T10:24:08.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-16T17:15:10.000Z (11 months ago)
- Last Synced: 2023-12-16T18:21:59.268Z (11 months ago)
- Topics: canvas, cluster, expressjs, nodejs, pm2, reactjs, redis, socket-io
- Language: JavaScript
- Homepage: https://paint-app-realtime.vercel.app/
- Size: 729 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# paint-app-realtime
:boom: An effortless real-time paint application :boom:
## Vercel + ~Heroku~ Glitch deployment
https://paint-app-realtime.vercel.app/
> If you face issues with **WebSockets** on the above URL, then please try to refresh the Glitch server here https://api-paint-app-realtime.glitch.me/
## Few cool features
- Real-time drawing interaction with all the connected users :rainbow:
- NodeJS **cluster mode** with **Redis** and **PM2** integration :customs:
- Server deployment on **Heroku** :fire:
- Frontend deployment on **Vercel** :fire:
- **Automatic deployment** on both platforms :runner:
- Text, Brush, Pen, and Rectangle draw :pencil2: :paintbrush: :abcd: :red_square:
- Color selection :rainbow:
- Increase or decrease the brush size :paintbrush:
- Increase or decrease the text size :abcd:
- Custom hook to maintain **history** :computer:
- Both **Undo** and **Redo** feature :arrows_counterclockwise:
- **Clear canvas** and **Download canvas** image feature :framed_picture:
## Technologies
- React 
- Canvas API 
- Node 
- Express 
- Socket.io 
- Redis 
- PM2 with Cluster mode 
- ~Heroku 
~
- Glitch 
- Vercel 
## How to run
#### :loudspeaker: Server
- git clone
- npm install
- npm start
#### :loudspeaker: Client
- git clone
- cd client
- npm install
- add .env
```
REACT_APP_SERVER_URL=http://localhost:5000/
```
- npm start
#### :loudspeaker: For cluster mode
If you wish to run the server in cluster mode, then please switch to [feature/cluster](https://github.com/iAmmar7/paint-app-realtime/tree/feature/cluster) branch and use ```npm run start:cluster``` command to run the server.
> You should have **Redis** and **PM2** installed on your machine.