paint-app-realtime

💥 An effortless real-time paint application 💥

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 🌈
• NodeJS cluster mode with Redis and PM2 integration 🛃
• Server deployment on Heroku 🔥
• Frontend deployment on Vercel 🔥
• Automatic deployment on both platforms 🏃
• Text, Brush, Pen, and Rectangle draw ✏️ 🖌️ 🔡 🟥
• Color selection 🌈
• Increase or decrease the brush size 🖌️
• Increase or decrease the text size 🔡
• Custom hook to maintain history 💻
• Both Undo and Redo feature 🔄
• Clear canvas and Download canvas image feature 🖼️

Technologies

• React
• Canvas API
• Node
• Express
• Socket.io
• Redis
• PM2 with Cluster mode
• Heroku
• Glitch
• Vercel

How to run

📢 Server

• git clone
• npm install
• npm start

📢 Client

• git clone
• cd client
• npm install
• add .env

REACT_APP_SERVER_URL=http://localhost:5000/

• npm start

📢 For cluster mode

If you wish to run the server in cluster mode, then please switch to feature/cluster branch and use npm run start:cluster command to run the server.

You should have Redis and PM2 installed on your machine.