Scribd
Upload
168 views

Frontend - Assignment - Real Time Collaborative Whiteboard

Uploaded by

Tejas Navale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
168 views

Frontend - Assignment - Real Time Collaborative Whiteboard

Uploaded by

Tejas Navale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Frontend Assignment - Real-Time Collaborative Whiteboard

Problem Statement:

Create a web application using React that allows users to upload images and receive real-time predictions from a pre-
trained machine learning model. The application should be able to classify the uploaded images into multiple
categories.

Minimum Requirements:
 Users can create a new whiteboard session or join an existing one.
 The whiteboard should support drawing using different colors and brush sizes.
 Implement the ability to undo/redo the last action on the whiteboard.
 Users should be able to see the cursors of other connected users moving in real-time, indicating their
drawing actions.
 Add an option to save the whiteboard content as an image or PDF file.
 Implement authentication (user signup and login) to ensure that only authorized users can access the
whiteboard.
 The application should be responsive and work on both desktop and mobile devices.

Must have:
 Use React for front-end development.
 The UX should look professional – see any white boarding tool from Microsoft for UX reference – bad
ux choices will have negative points
 For real-time functionality, consider using WebSocket or a real-time database like PostGres SQL via a
docker container.
 For drawing on the whiteboard, you can explore libraries like Fabric.js or Konva.js.
 Implement secure authentication using a backend service of keycloak only. Please use keycloak via a
docker. User should only be allowed on home screen after login
 Clean & fluidic layout – use bootstrap (5.0) only
 Code must be written in TypeScript only, no JS code will be accepted
 Error-free, Readable, Simple & Clean code
 Let me stress the previous point - Readable, Simple & Clean code
Bonus Points:

 Allow users to collaborate through live chat while drawing on the whiteboard.
 Implement an invitation system, where users can invite others to join their whiteboard session via
email.
 Add the ability to export the whiteboard content as a video with a playback of the drawing actions.

Quick Hint:
You can use local storage to save the user preferences.

Few links for reference:


1. Keycloak - https://www.keycloak.org/ & https://www.keycloak.org/getting-started/getting-started-docker
Note:
1. PLEASE NOTE THAT, WE HAVE A ZERO TOLERANCE POLICY FOR PLAGIARISM. IF YOU PLAGIARIZE THE TEST,
YOU WILL BE CAUGHT AND IMMEDIATELY TERMINATED.
2. Please do not submit the code if code is not up to a standard.
3. Please do not submit the assignment if UI doesn’t look clean and beautiful like image above.
4. Please do not send LinkedIn Request to Connect!
5. PLEASE MAKE SURE YOU SUBMIT EVERYTHING VIA A GITHUB LINK AND PLS UPLOAD ALL ASSETS AND
FILES. PLEASE MAKE SURE YOU UPLOAD THE SCREENSHOT OF THE FINAL APPLICATION YOU BUILD.

You might also like