App Screen 1 (UI + Backend Integration)

Vipin Yadav
Aug 23, 2017 · 4 min read

If you are familiar with my previous post and app idea then you know what I did before, otherwise just check my app idea.

And also check the prototype for that idea

So after setting all things up such as design & database & API request queries, It was time to elaborate all those in code. So first I did was to write the code for the front-end of each screen and after that it was time to integrate them with back-end and database.

App’s first screen

Here goes the UI of my app’s main screen which comes after successful login or signup.

In here you can that the screen is divided into two parts, one for group chat and other for whiteboard. I actually integrated two screens in one because it becomes messsy when you need to switch between these two. Now we can chat as well as draw on the same screen, no switching required.

For now, I’ll talk about only whiteboard because the chat is another feature so I’ll do that in my next post.

The UI of Whiteboard

Tool Bar

In the whiteboard, there are two sections on the top bar one is Tools and other is Colour Palate. There is also an option for size of a tool.

Basic Tool Bar

There are only four tools available for now.

  1. Pencil : We can use this to draw any free hand shape on the whiteboard canvas. By default this tool is selected. We can control its w=size by the size tool.
  2. Eraser : This tool is used to erase anything drawn on the canvas. This is fixed in size.
  3. Clear : This tool clears the canvas means erase everything drawn on that.
Size tool

4. Size bar : We can use this tool to set size of the pencil tool.

Colour Palate

Below the tool bar there is a colour palate with various colours.

Colour Palate

Using this colour palate we can choose colour for the pencil. By default the first item of colour palate is selected and the colour for pencil is that.

Canvas

This is the space used to draw anything on. It is an HTML5 canvas which supports drawing. The size of canvas is flexible with screen size. But the page is not responsive, so it becomes problem sometimes to draw on small screens such as mobile devices.

In back-end code, I use socket.io to capture each and every event on the canvas and emit that to the server, from where server emits that to all other clients connected.

Whiteboard on different clients

At a time when a user draws something on the canvas, it is visible to another user in real time.

Currently I am not storing this canvas in database so after a user disconnect, all progress lost. Also multiple users can draw at the same time so it becomes a little messy.

So this is it.

Here is the next post about 2nd screen about Messages and Groups

And here goes the 3rd screen about Group and User Management

)
Vipin Yadav

Written by

Full Stack Web-Developer. Love with Linux.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade