KEMBAR78
Frontend Developer Intern Tasks | PDF | User (Computing) | Computing
Scribd
Upload
13 views3 pages

Frontend Developer Intern Tasks

The document outlines two tasks: creating a real-time collaborative text editor and developing a component library SDK. The editor must allow multiple users to edit simultaneously, display changes instantly, and identify users, while the component library should focus on reusability and clean code without external libraries. Deliverables include a GitHub repository, live demo, README files, and a video explanation for both tasks.

Uploaded by

Dhruv Takkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views3 pages

Frontend Developer Intern Tasks

The document outlines two tasks: creating a real-time collaborative text editor and developing a component library SDK. The editor must allow multiple users to edit simultaneously, display changes instantly, and identify users, while the component library should focus on reusability and clean code without external libraries. Deliverables include a GitHub repository, live demo, README files, and a video explanation for both tasks.

Uploaded by

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

Task 1 : Real-Time Collaborative Editor

Create a basic real-time text editor where multiple users can edit the content and see
each other's changes live.

Requirements:

1. Editor Interface:
○ Create a text editor interface (can use a library like Quill, ProseMirror, or
TipTap Editor)
○ Or build a very simple custom contenteditable-based editor
2. Real-Time Collaboration:
○ When multiple users open the editor, they should see the same content.
You can run locally or use some structure without a backend.
○ Changes made by one user should appear instantly for all others ○
Show which user made which change (e.g. live status and edited line using file
systems)
3. User Identification:
○ Each user should have a unique name/identifier visible to others ○
Simple login/prompt for username is sufficient or direct username and
password
4. Tech Stack:
○ ReactJS/NextJS, TypeScript, TailwindCSS

Deliverables:

1. Github repo and live link that demonstrates :


○ Multiple browser windows/tabs can edit simultaneously
○ Changes appear in other sessions
○ Basic user distinction (colors/names)
2. Proper README File explaining:
○ How to run the project
○ A short explanation of the project

3. A short video of yourself explaining your approach and the project


TASK 2 : Component Library SDK
Create a simple component library/SDK and use it to build the below pages. Focus
on reusability, clean code, and minimal redundancy.

Component Requirements:

● Each component must be self-contained


● No direct styling in implementation (use CSS classes)
● Follow DRY (Don't Repeat Yourself) principles
● Try to match the above UI.
Constraints
● Max 200 lines per component (excluding tests/stories)
● No external UI libraries (build from scratch)
● Use TypeScript (preferred) or PropTypes

Deliverables

1. Component library code (in /lib or /components


folder) 2. Two demo pages (in /pages or /demos folder) 3.
README.md with:
○ How to use the components
○ How to run the demo

Evaluation Focus:

1. Real-Time Synchronization Reliability and Performance


2. User Attribution and Collaborative User Experience (UX)
3. Can you identify which user made which change ?

4. Folder Structure Organization and Scalability Readiness


5. Component and Logic Reusability Across the Codebase
6. Code Redundancy Minimization and Clean Architecture

You might also like