Draw N' Chat
This is a web app where users can sign up and participate in a group chat. They communicate by drawing on a canvas and sending their drawings.
Set Up the App
This app uses Node.js, socket.io, rita, random words, ejs and Express framework.
- Download the zip file or clone this respository to your desired directory on your computer.
- Download node.js
- In your terminal, navigate to your directory that contain the respository and type in
npm install express,
npm install socket.io,
npm install rita,
npm install random-words,
npm install ejsto install the packages.
Run & Test the App
- In your terminal, navigate to the directory containing the files, and type in
node server.jsto run the app. It should start a server at
- Visit the page and if you don't have an account, go to sign up page.
- Usernames are randomly generated, and you may randomize it until you like the one.
- Double check password and submit the form.
- If all valid, a canvas will occur, you may draw your avatar on the canvas.
- You may still continue to log in if you don't draw anything, a placeholder image will be given.
- Now log in with your username and if all valid, you may enter the chat.
- Start drawing and press submit button to send your drawings, note the canvas cannot be empty.
There are drawing options and sliders to change the pen type, color, alpha and such.
By Alex Yixuan Xu