Board Verse Demo Video

Github Link: github.com/olifarhaan/board-verse
Board Verse | A Real-Time Collaborative Whiteboard Application
The Whiteboard Application is a collaborative drawing tool that allows users to create and join real-time whiteboard sessions. With a focus on simplicity and user experience, this application enables users to draw using various colours and brush sizes, undo/redo actions, and save the whiteboard content as images or PDFs. The implementation includes secure user authentication using Keycloak, ensuring that only authorized users can access and contribute to whiteboard sessions.

Key Features
Create and join whiteboard sessions. Drawing functionality with colour and brush size options. Undo/redo actions for a seamless user experience. Real-time cursor movements for connected users. Save whiteboard content as images or PDFs. Responsive design for both desktop and mobile devices.

Technologies Used
React for front-end development.

WebSocket, Node Express for back-end development.

Keycloak for authentication.

Native canvas for drawing capabilities. Keycloak via Docker for secure user authentication.

Bootstrap 5.0 for a clean and fluid layout. For detailed setup instructions, feature documentation, and screenshots, please refer to the respective sections below.

Setting up the Project
Keycloak setup
Run this Docker command to set up Keycloak on your local system
docker run -p 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:24.0.0 start-dev
Set up the account with the following configuration
Keycloak({
url: "http://localhost:8080",
realm: "whiteboard-realm-react",
clientId: "whiteboard-client-react",
});

Change the Keycloak public key to the .env file from your dashboard.

Go to http:localhost:8080 to check whether it is correctly setup or not.

Refer to this Keycloak document for setup incase of any error.

Frontend & Backend setup
Run this command in your local computer to clone the repo.
git clone github.com/olifarhaan/board-verse.git

Open the folder with an IDE (VSCode preferred)

Open the terminal and run cd client and then npm i to install the dependency of the front end

Then, open another terminal and run cd api and then npm i to install the dependency of the backend end

Run npm run dev on both the terminal

Go to http://localhost:5173