Frontend Developer Assessment

A comprehensive React + TypeScript project implementing two interactive components: a Tree View and a Kanban Board.

🔗 Links

Live Demo: [Add your deployed URL here]
Repository: [Add your GitHub repository URL here]

📋 Table of Contents

Overview
Features
Tech Stack
Project Structure
Installation
Usage
Components
Screenshots
Development
Deployment
License

🎯 Overview

This project is a solution to a Frontend Developer Assessment containing two practical questions:

Tree View Component - A fully functional hierarchical tree structure with drag & drop, lazy loading, and CRUD operations
Kanban Board Component - A task management board with three columns and drag & drop functionality

✨ Features

Question 1: Tree View Component

✅ Expand/Collapse Nodes - Toggle node visibility with animated arrows
✅ Add Child Nodes - Create new nodes with inline input form
✅ Delete Nodes - Remove nodes with confirmation dialog (including subtrees)
✅ Drag & Drop - Reorder and move nodes across the hierarchy
✅ Lazy Loading - Simulate async API calls when expanding nodes
✅ Inline Editing - Double-click or click edit button to rename nodes
✅ Keyboard Shortcuts - Enter to save, Escape to cancel
✅ Visual Feedback - Loading indicators and hover states

Question 2: Kanban Board Component

✅ Three Columns - To Do, In Progress, and Done
✅ Add Cards - Create new task cards in any column
✅ Delete Cards - Remove cards with confirmation
✅ Drag & Drop - Move cards between columns seamlessly
✅ Inline Editing - Edit card titles on the fly
✅ Responsive Design - Mobile-friendly layout that stacks vertically
✅ Card Ordering - Maintains order within each column
✅ Visual Indicators - Card counts, empty states, and drag feedback
✅ Modern UI - Gradient backgrounds and smooth animations

🛠️ Tech Stack

React 18+ - UI library
TypeScript - Type safety and better developer experience
Vite - Fast build tool and dev server
CSS3 - Modern styling with gradients and animations
HTML5 Drag & Drop API - Native drag and drop functionality
React Hooks - useState, useRef, useEffect for state management

📁 Project Structure

frontend-assessment/
├── public/
├── src/
│   ├── components/
│   │   ├── TreeView/
│   │   │   ├── TreeView.tsx       # Main tree component
│   │   │   ├── TreeNode.tsx       # Individual node component
│   │   │   └── TreeView.css       # Tree styling
│   │   └── Kanban/
│   │       ├── KanbanBoard.tsx    # Main board component
│   │       ├── Column.tsx         # Column component
│   │       ├── Card.tsx           # Card component
│   │       └── Kanban.css         # Kanban styling
│   ├── types/
│   │   ├── tree.ts                # Tree type definitions
│   │   └── kanban.ts              # Kanban type definitions
│   ├── utils/
│   │   ├── treeHelpers.ts         # Tree utility functions
│   │   └── kanbanHelpers.ts       # Kanban utility functions
│   ├── App.tsx                    # Main app with navigation
│   ├── App.css                    # Global styles
│   └── main.tsx                   # Entry point
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

🚀 Installation

Prerequisites

Node.js (v16 or higher)
npm or yarn

Steps

Clone the repository

git clone [your-repo-url]
cd frontend-assessment

Install dependencies
```
npm install
```
Start development server
```
npm run dev
```
Open in browser
```
http://localhost:5173
```

💻 Usage

Tree View

Expand/Collapse: Click the arrow icon (▶/▼) next to any node
Add Child: Click the ➕ button, enter a name, and press Enter or click "Add"
Edit Node: Double-click on node name or click the ✏️ button
Delete Node: Click the 🗑️ button and confirm deletion
Drag & Drop: Drag any node and drop it onto another node to move it
Lazy Load: Click on "Second Root" to see lazy loading in action

Kanban Board

Add Card: Click "+ Add Card" button at the bottom of any column
Edit Card: Double-click on a card or click the ✏️ button
Delete Card: Click the 🗑️ button on a card
Move Card: Drag a card from one column and drop it in another
Switch Views: Use the navigation buttons at the top to switch between Tree View and Kanban Board

🧩 Components

Tree View Architecture

TreeView (Main Component)
  └── TreeNode (Recursive Component)
      ├── Expand/Collapse Button
      ├── Node Name (Editable)
      ├── Action Buttons (Edit, Add, Delete)
      ├── Add Node Form (Conditional)
      └── Children Nodes (Recursive)

Kanban Board Architecture

KanbanBoard (Main Component)
  └── Column (3 instances)
      ├── Column Header
      ├── Card List
      │   └── Card (Multiple instances)
      │       ├── Card Content
      │       └── Action Buttons
      └── Add Card Button

📸 Screenshots

Tree View Component

Hierarchical tree structure with expand/collapse functionality

Kanban Board Component

Task management board with drag & drop

Responsive Mobile View

Responsive design adapts to mobile screens

Note: Add actual screenshots to a /screenshots folder in your project

🔧 Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint

# Type check
npm run type-check

Code Quality

TypeScript - Full type coverage with strict mode enabled
Component Structure - Clean separation of concerns
Reusability - Modular, reusable components
Performance - Optimized renders and state updates
Accessibility - Semantic HTML and ARIA labels

Key Design Decisions

No External Libraries - Minimal dependencies except React and TypeScript
Native Drag & Drop - Using HTML5 Drag & Drop API for better performance
Component Decomposition - Separated logic into reusable components
Helper Classes - Utility functions for tree and kanban operations
CSS Modules - Scoped styling to prevent conflicts

🌐 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

Netlify

# Build the project
npm run build

# Drag and drop the 'dist' folder to Netlify dashboard
# Or use Netlify CLI
npm install -g netlify-cli
netlify deploy --prod

GitHub Pages

# Install gh-pages
npm install gh-pages --save-dev

# Add to package.json scripts:
# "predeploy": "npm run build",
# "deploy": "gh-pages -d dist"

# Deploy
npm run deploy

📝 Assessment Requirements

Question 1 - Tree View ✅

Question 2 - Kanban Board ✅

🤝 Contributing

This is an assessment project, but feedback is welcome!

Fork the repository
Create a feature branch (git checkout -b feature/improvement)
Commit your changes (git commit -am 'Add new feature')
Push to the branch (git push origin feature/improvement)
Create a Pull Request

📄 License

This project is created for assessment purposes. Feel free to use it as a reference.

👨‍💻 Author

[Your Name]

🙏 Acknowledgments

Assessment provided by [Company Name]
Built with React and TypeScript
Icons: Unicode emoji characters
Gradient inspiration from modern web design trends

Last Updated: January 2026

Status: ✅ Complete and Ready for Review

Note: This project demonstrates proficiency in React, TypeScript, component architecture, state management, and modern web development practices.

Name		Name	Last commit message	Last commit date
tree-view-app		tree-view-app
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation