CoSketch Web Application

An Real Time browser collaborative whiteboard application.

Table of Contents

1. About The Project
   • Technologies
2. Getting Started
3. Features
4. Database Design
5. Application Screenshots
6. Future Enhancements

About The Project

Developed a collaborative web application utilizing the MERN stack (MongoDB, Express.js, React, and Node.js). The platform allows multiple users to sketch various objects on a shared whiteboard, including squares, circles, lines, and text. It supports real-time collaboration and includes role-based access controls to manage user permissions effectively. This project demonstrates proficiency in full-stack development, real-time communication technologies, and secure access management.

(back to top)

Technolgy Used

The following technologies and tools have been equipped to develop this project -

• MERN: MongoDB, Express, ReactJS, Node JS
• SocketIO
• Rough JS

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

• Node JS should be installed as prerequisites
• npm

  npm install npm@latest -g

• MongoDB Setup
• Run front end Application with

  cd frontend
  npm install
  npm start
  

• Run backend application with

  cd server
  npm install
  npm start
  

(back to top)

Features

• Authentication & Authorization: Registration and login are required with proper validation to access the boards and features.
• Multiple Whiteboards: Users can create and manage more than one whiteboard, and share them with other users.
• Role-Based Access: Access to each board is role-based, enabling specific features for users based on their roles.
• Multiple Drawing Tools: The whiteboard supports various shapes and tools, including rectangles, circles, text, and pencils.
• Real-Time Collaboration: All activity on the whiteboard canvas is updated in real-time for all members viewing the board, using Socket.IO events.
• Export Options: Users can export the whiteboard content as an image or PDF.

(back to top)

Database Design

database for CoSketch having below 3 documents and its respective structure mentioned below,

• Users

{
	"_id": {
		"$oid": "661be3fab29b01e73b199d14"
	},
	"email": "veet2@gmail.com",
	"username": "veet2124",
	"password": "$2b$12$lNXnUpFuIyR42ZyxlQj9NOHqAGVMjlAE3gNjcqTQGwGLEdZYTVUk.",
	"firstName": "Veet",
	"role": "ADMIN",
	"lastName": "Moradiya",
	"createdAt": {
		"$date": {
			"$numberLong": "1713103843726"
		}
	},
}

• boards

{
	"_id": {
		"$oid": "663763bf42ff898ab7b92989"
	},
	"boardTitle": "Test Board Members API",
	"boardDescription": "Test Board created via API with members",
	"members": [ // array of members with role
		{
			"memberId": {
				"$oid": "661bf4e5d6b91517e3136997"
			},
			"memberRole": "OWNER",
			"lastAccessedAt": null,
			"_id": {
				"$oid": "663763bf42ff898ab7b9298a"
			}
		},
	],
	"createdAt": {
		"$date": {
			"$numberLong": "1714906047611"
		}
	},
	"updatedAt": {
		"$date": {
			"$numberLong": "1714906047611"
		}
	}
}

• boardcontents

{
	"_id": {
		"$oid": "663a551d81b106ac6e38ea45"
	},
	"boardId": {
		"$oid": "6626a1062377ee6823c8a12d"
	},
	"boardElements": [] // array of board elements
}

(back to top)

Application Screenshots

Home Page

(back to top)

Login Registration

Login

Registration

(back to top)

Whiteboards

list of whiteboard

Open board confirmation

Delete board confirmation

Create New Board Default

Create New Board Filled

(back to top)

Profile

(back to top)

Navbar

Whiteboard UIs

Whiteboard Open UI

Whiteboard Info Modal

Whiteboard Active Members Info

(back to top)

Logout

Logout Confirm Dialog

(back to top)

Swagger UI

(back to top)

Future Enhancements

• More options for board menu
• logging in backend application with log file.
• Dockerize front end and backend application with DockerFile and simulate deployment using docker based deployment

(back to top)

Video

Watch demo on youtube