Scribd
Upload
36 views2 pages

Frontend Dev Intern Assignment May 2025

The document outlines the assignment to build a project-based Kanban task board using React, TypeScript, and Zustand. Key features include project management, task creation and editing, drag-and-drop functionality, and data persistence via localStorage. The project also emphasizes UI/UX consistency and responsiveness, with optional features like a light/dark mode toggle and due date indicators.

Uploaded by

bhootpisach418
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
36 views2 pages

Frontend Dev Intern Assignment May 2025

The document outlines the assignment to build a project-based Kanban task board using React, TypeScript, and Zustand. Key features include project management, task creation and editing, drag-and-drop functionality, and data persistence via localStorage. The project also emphasizes UI/UX consistency and responsiveness, with optional features like a light/dark mode toggle and due date indicators.

Uploaded by

bhootpisach418
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

Kanban Task Board Assignment (Project-Based)

Objective
Build a Project-based Kanban Task Board using React, TypeScript, and
Zustand.
This board should allow users to: - Create multiple projects - Add, edit, and
delete tasks within each project - Move tasks across columns via drag-and-drop
- Persist all data using localStorage

This task will assess your skills in:


• Component structuring and reusability
• Zustand for global state management
• Working with drag-and-drop libraries
• TypeScript typing practices
• UI/UX consistency and responsiveness

Tech Stack
• React
• TypeScript (no plain JavaScript)
• TailwindCSS or plain CSS (your choice)
• Zustand for state management
• react-beautiful-dnd or @dnd-kit/core for drag-and-drop

Features
Must-Haves
1. Project Sidebar
• Left sidebar listing all projects
• Ability to create, rename, and delete projects
• Select a project to view its board
2. Board Layout
• 3 fixed columns per project: To Do, In Progress, Done
• Responsive layout
3. Task Card
• Title (required)
• Optional description
• Created date
• Edit and Delete options
4. Add/Edit Task
• Modal or form-based interface
• Title validation required
• Select initial column when creating
5. Drag and Drop
• Move tasks across columns
• Use either react-beautiful-dnd or @dnd-kit/core
6. Persistence
• All data (projects + tasks) must be saved in localStorage

1
Bonus (Optional)
• Light/dark mode toggle
• Due date field with visual status indicator for overdue tasks

Submission
Push the code to github, provide the repository link, host the project, and share
the live link.

You might also like