Web-based App using React.js

Project Title

React Project Management Dashboard

Description

A web-based React Project & Task Management Dashboard where users can create projects, manage tasks, track their progress, and visualize completion using a piechart.

This web page demonstrates component‑based design using React hooks, state management and Material‑UI (MUI)

Features

• Project Management: Create, edit, delete projects

• Task Management: Manage tasks inside each project (status: Pending, In Progress, Completed)

• Search & Filter: Search projects/tasks by keyword, filter tasks by status

• Progress Visualization: Piechart showing task completion progress

• Persistence: Uses localStorage to retain data

Installation Steps:

1. git clone https://github.com/taeolis/project-dashboard.git
2. cd project-dashboard
3. npm install
4. npm start

Dependencies Used

@mui/icons-material : "^7.3.4"

@mui/material : "^7.3.4"

react : "^19.2.0"

react-dom : "^19.2.0"

recharts : "^3.3.0"

web-vitals : "^2.1.4"

Installations:

npm install react-router-dom
npm install @mui/material
npm install recharts

Usage Instruction

1. Launch the app (npm start)
2. Click New Project → fill in Title(required), Deadline(required) and Description
3. Select the project in the left panel to view/edit it
4. Inside Project Details: add tasks, assign to, update status
5. Observe progress via piechart and summary badge
6. Use search bar to find projects/tasks
7. Refresh browser → your data remains (localStorage)

Demo

Demo video : https://drive.google.com/file/d/1O3LJOb8q2-YTQobst80RO7S4CwHeZDwa/view?usp=sharing