Real Time Collaborative Whiteboard Web App Overview

ABSTRACT “Real Time Collaborative Whiteboard” is generally a collaborative whiteboard which works on web, so the users of the web app will mostly be Students, Teachers, or any Professionals that love to brainstorm ideas. Once the user lands on the Homepage, he/she will see a simple structure like “MS Paint” app and they can just play around with the pen and eraser tool. I have named this whiteboard project as “CollaBoard” as it is a Whiteboard which is Collaborative means many users can all together discuss on some ideas or just play around. The web application has various features like the user can “Change the Background Colour of the Canvas or we can say the Whiteboard”. Apart from this the user can also change the “Colour of the Pen or we can say Pointer that helps to draw things on canvas”. Most importantly, the user can also change the Pointer Size from thinner one to the thickest one and also Eraser tool can be used to clear the canvas and that is also available in different sizes. Generally all the whiteboards out there on the internet has one button known as “Clear All” that clears the whole canvas at once, so this is also included into this web application. The unique feature that has been implemented is that the users can Download their Board (means the sketching that they have done) on the whiteboard. Sounds cool right :) CHAPTER 1: INTRODUCTION TO PROJECT “Real Time Collaborative Whiteboard” is a simple web application that simply helps people to collaborate on various ideas and sketch it out. The users may be Students discussing any study topic, Teachers explaining students through whiteboarding and Professionals sharing their ideas while brainstorming. This whiteboard helps each and every user. 1.1: WHAT IS MY PROJECT IDEA The idea behind my project is very nice and. I thought that I should make something that is “useful” for everyone in some way and also “easy to use”, so the idea for this collaborative whiteboard came up. So far I have implemented some of the useful features that will be handy to use for users. 1.2: WHY I CHOSE THIS TOPIC I chose this whiteboard web application as my topic because I wanted to make a product that is “unique” and “helpful” for the people. Also the other reason is that I am excited and motivated about making this web app and I like this kind of products and so this helped me to complete the project so far. 1.3: PURPOSE OF THIS PROJECT The Main purpose of this web application is to provide ease to users while they are discussing any important or casual topic. And also to provide easy access to users by directly providing the service through web, means there are various whiteboard websites out there but they require account but in our case, the user can directly send the website link to the people that want to collaborate, discuss anything or sketch together. 1.4: NEED OF THIS PROJECT 1) If the user is in hurry and don’t want to create a new account on web for using whiteboard type of services then my web application fulfils this need. 2) The web application has the download option as well so that the user can save his/her work or sketch or any brainstorming idea on their Local computer. 3) Other websites don’t allow you to download the board until you login, but in my case, the user can easily download without any login required. CHAPTER 2: INTRODUCTION TO TECH STACK This section describes that what technologies I have used to make the web application for Frontend (UI design) and Backend that is going on behind the scenes (Functionality). 2.1: WHAT TECHNOLOGIES I USED For my project, I have used various technologies as follows: ❖ Frontend Technologies – HTML, CSS, Bootstrap ❖ Backend Technologies – JavaScript, NodeJS, ExpressJS, Socket IO 2.2: WHAT IS NODEJS, EXPRESSJS, SOCKET IO NodeJS is a JavaScript runtime built on Chrome's V8 JavaScript engine. As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications. In the following "hello world" example, many connections can be handled concurrently. Upon each connection, the call-back is fired, but if there is no work to be done, Node.js will sleep. ExpressJS is Fast, unopinionated, minimalist and flexible web framework or application for Node.js. It provides a robust set of features for web and mobile applications. Creating API’s is also very easy using expressjs. Many popular frameworks like GraphQL are built on Express. Socket IO is Bidirectional and low-latency communication for every platform. It is Performant - In most cases, the connection will be established with WebSocket, providing a low-overhead communication channel between the server and the client. It is Reliable - In case the WebSocket connection is not possible, it will fall back to HTTP long-polling. And if the connection is lost, the client will automatically try to reconnect. And it is Scalable - as it Scales to multiple servers and send events to all connected clients with ease. CHAPTER 3: INTRODUCTION TO COLLABORATIVE WHITEBOARD This section describes what are the minimum system requirements in terms of Hardware and Software. 3.1: MINIMUM SYSTEM (Browser) REQUIREMENTS ❖ ❖ ❖ ❖ Compatible with RAM = 1 GB (recommended > 1 GB) Windows Version = Windows 7 or greater (recommended) Google Chrome Version = (recommended > 62.0.3) Mozilla Firefox Version = (recommended > 48.0), etc. & other browsers. 3.2: DATA FLOW DIAGRAM (DFD) 3.3: FLOWCHART 3.4: Decision Tree 3.5: Pseudocodes CHAPTER 4: PROJECT STRUCTURE AND SCREENSHOTS 4.1: PROJECT FOLDER STRUCTURE ❖ “index.html” file is the main frontend that user will see when the website loads up. ❖ “style.css” file is the file that contains various CSS stylings to HTML elements. ❖ “functionality.js” file is the file which contains all the functionalities like Changing the Background, Colour, Pointer Size, Eraser Size, Clearing the Canvas and Downloading the Canvas Image. ❖ “script.js” file contains the functionality to collaborate multiple users on the whiteboard. ❖ “board.html” file is the basic HTML file that displays the Canvas. ❖ “server.js” file is used to Import various libraries and create our server. ❖ “package.json” file is one of the most important file. It contains all the information about our node project like modules installed, etc. 4.2: SCREENSHOTS Figure 1: The Main Page of the Whiteboard. Figure 2: The user Drawing on the Whiteboard. DY Patil International University, Akurdi, Pune || Page- 16 Figure 3: The User selecting the Pointer Colour from the Colour Picker. Figure 4: When user clicks "Clear All" button then the alert box comes up with 2 options. If user clicks OK then the canvas will be cleared and if user clicks Cancel then canvas will remain as it is. DY Patil International University, Akurdi, Pune || Page- 17 Figure 5: When user clicks "Download Board" button then the canvas will be saved to users local computer. Figure 6: When the User clicks the "Real Time CollaBoard" button present on the RHS of the page, then this page gets loaded. 2 users collaborating with each other. Figure 7: Every user has Unique User Id or we can say Connection Id. Figure 8: 3 users collaborating on different browsers. Figure 9: 4 users collaborating on different browsers. Google Chrome, Mozilla Firefox, Microsoft Edge, and Brave Browser. ❖ FUTURE SCOPE • Can add Account feature like a particular user can create an account and save his/her progress. • Can add more options to Customise the Pointer properties like opacity, smoothness, etc. • Other than this, can allow user to Customise the Backgrounds according to their needs. • Can add Chat feature like users can parallelly chat with other users while they are sketching/ whiteboarding. ❖ CONCLUSION I would like to conclude that it was amazing experience while making this project. Though some of the things were tough to achieve and implement but finally it has been a great learning. I was able to make the web app look pretty good and decent as possible by keeping in mind various things like Colour Combinations, Fonts, etc. The main objective of making this project easy to use and useful is achieved so far. Reliability was also one of the objectives that I was trying to provide to users. At the end, I can say that my web application is “Useful for People”.