Real Time Web course repo

For this course I created a real time drawing application. To make this happen, I used the html5 element, Node, Express, EJS and Socket.io. I did not know how to draw on a canvas element, so I followed a drawing app tutorial. When it was all there and running I added Socket.io so that it was visible in different browsers.

I ran into the problem that you just could not color at the same time. Therefore, I looked for apps that looked a like and found a drawing app that helped me with that.

Finally, I added a color picker so you can choose your color yourself

Table of Content

• Dependencies
• Features
• Get started
• Socket
• To do
• Resources

Dependencies

• Server: Node
• Routing: Express
• Templating: EJS
• CSS: SASS
• Monitor: https://nodemon.io/
• Real time engine: Sockets.io

Features

• See what other people are drawing
• Draw at the same time
• Pick your own color

Get started

• Run $ git clone https://github.com/fennadew/real-time-web.git in your terminal in the desired directory.
• cd to the repository and run npm install to install all dependencies.
• Run npm run nodemon start the server with automatic reload. App listens on http://localhost:3000/.

Socket.io, Node.js and Express

Socket.io is a real time engine that ensures that you can see the same information in real time or different browsers, can input and be updated in all browsers. This library works with Node.js and communicates changes to the server. Express is used for routing.

To do

• Better styling
• More functionalities
• Improve perfomance
• Make available for mobile

Resources

• Tutorial drawing app
• Drawing app