Project Management Tracker

What you’re building

Project management is the backbone of MIS work. Whether you are managing a software implementation, coordinating a database migration, or running a capstone project, you need to track tasks, deadlines, and team workload. Tools like Jira and Asana require accounts and come with a learning curve that eats into the time you should spend managing the project itself.

In this lesson you will build a full-featured project management tracker as a React application. It includes a Kanban board with drag-and-drop, a Gantt chart timeline view, team member assignment, milestone tracking, and a burndown chart. All data persists in localStorage — no server, no database, no login. Open it in a browser and start managing.

This is not a toy demo. By the end of this lesson you will have a tool that can serve as a strong personal or small-team tracker and a standout portfolio project.

The showcase

When finished, your app will have:

• Kanban board: columns for Backlog, To Do, In Progress, Review, and Done. Drag cards between columns. Each card shows task name, assignee avatar, priority badge, and due date.
• Gantt chart view: horizontal timeline showing all tasks as bars, colored by status. Dependencies shown as arrows between bars. Zoom to day/week/month granularity.
• Burndown chart: tracks completed story points over time against the ideal line. Shows whether the project is on track, ahead, or behind schedule.
• Task detail modal: click any task to see full details — description, assignee, priority (Low/Medium/High/Critical), story points, due date, subtasks checklist, and activity log.
• Team panel: list of team members with workload indicators (how many points assigned, how many tasks in progress).
• Milestone tracker: define milestones with target dates, see percentage completion based on linked tasks.
• Filters and search: filter the board by assignee, priority, or label. Search tasks by name.
• Data persistence: everything saves to localStorage automatically. Export/import as JSON for backup.

The prompt

Navigate to an empty folder, open your AI CLI tool (such as Claude Code, Gemini CLI, or your preferred tool), and paste this prompt:

Create a React + Vite application for project management. Use TypeScript and
Tailwind CSS. The app should be called project-tracker.

CORE FUNCTIONALITY:

1. KANBAN BOARD (default view)
   - 5 columns: Backlog, To Do, In Progress, Review, Done
   - Drag-and-drop cards between columns using @dnd-kit/core and @dnd-kit/sortable
   - Each card displays:
     - Task title (truncated to 2 lines)
     - Assignee initials in a colored circle
     - Priority badge: Critical (red), High (orange), Medium (yellow), Low (gray)
     - Due date (turns red if overdue)
     - Story points badge (small number in corner)
   - Column headers show task count and total story points
   - "Add Task" button at the bottom of each column
   - Optional WIP (Work In Progress) limit per column -- show a warning color
     when the limit is exceeded

2. GANTT CHART VIEW
   - Toggle between Kanban and Gantt views with a tab bar
   - Horizontal timeline with tasks as colored bars:
     - X-axis: dates (scrollable, zoomable: day/week/month toggle)
     - Y-axis: task names grouped by milestone
     - Bar color indicates status: gray=Backlog, blue=To Do,
       yellow=In Progress, purple=Review, green=Done
   - Bar width represents duration (start date to due date)
   - Dependency arrows: if Task B depends on Task A, draw an arrow
     from the end of A's bar to the start of B's bar
   - Today line: vertical red dashed line showing current date
   - Click a bar to open the task detail modal
   - Render using SVG (no external Gantt library needed)

3. BURNDOWN CHART
   - Accessible from a "Reports" tab
   - Line chart (Chart.js) showing:
     - X-axis: sprint/project days
     - Y-axis: remaining story points
     - Ideal burndown line (straight diagonal from total points to zero)
     - Actual burndown line (steps down when tasks move to Done)
   - Shows velocity: average points completed per day
   - Sprint selector if multiple sprints are defined
   - Trend line showing projected completion date

4. TASK DETAIL MODAL
   - Opens when clicking any task card or Gantt bar
   - Fields:
     - Title (editable)
     - Description (markdown-enabled textarea)
     - Status (dropdown matching Kanban columns)
     - Assignee (dropdown of team members)
     - Priority (Critical/High/Medium/Low)
     - Story Points (1, 2, 3, 5, 8, 13 -- Fibonacci)
     - Start Date and Due Date (date pickers)
     - Labels (colored tags, user-defined)
     - Dependencies (select other tasks this one depends on)
     - Subtasks (checklist with add/remove/toggle)
   - Activity log at the bottom showing all changes with timestamps
   - Delete task button with confirmation

5. TEAM PANEL
   - Sidebar or dedicated section showing team members
   - "Add Team Member" with name and color picker for avatar
   - Per-member stats:
     - Tasks assigned (total and by status)
     - Story points assigned vs completed
     - Workload bar (visual indicator: green < 20 pts, yellow 20-35,
       red > 35)
   - Click a team member to filter the board to only their tasks

6. MILESTONE TRACKER
   - Create milestones with a name, target date, and linked tasks
   - Progress bar showing % of linked tasks in Done status
   - Milestones appear as diamond markers on the Gantt chart
   - Overdue milestones highlighted in red

7. DATA MANAGEMENT
   - Auto-save all data to localStorage on every change
   - "Export Project" button: download all data as a JSON file
   - "Import Project" button: upload a JSON file to restore
   - "Load Demo Project" button that populates with a sample project:
     "Website Redesign" with 4 milestones, 20 tasks across all statuses,
     3 team members, and realistic dependencies
   - "New Project" button that clears everything with confirmation

8. DESIGN
   - Dark theme: bg-slate-950, surface bg-slate-900, cards bg-slate-800,
     text-slate-200, accent indigo-400
   - Kanban columns have subtle colored top borders
   - Smooth drag animations (200ms ease)
   - Responsive but optimized for desktop (1200px+ viewport)
   - Tab bar at the top: Board | Gantt | Reports | Team

Generate the complete application with all components and functionality.
Include a README with setup instructions (npm install && npm run dev).

What you get

The LLM will generate a project structure like this:

project-tracker/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.js
├── postcss.config.js
├── src/
│   ├── main.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── types.ts
│   ├── store/
│   │   ├── projectStore.ts     # state management (Zustand or Context)
│   │   └── localStorage.ts     # persistence layer
│   ├── utils/
│   │   ├── burndown.ts         # burndown calculations
│   │   ├── gantt.ts            # Gantt layout calculations
│   │   └── demoData.ts         # sample project data
│   └── components/
│       ├── KanbanBoard.tsx
│       ├── KanbanColumn.tsx
│       ├── TaskCard.tsx
│       ├── TaskModal.tsx
│       ├── GanttChart.tsx
│       ├── BurndownChart.tsx
│       ├── TeamPanel.tsx
│       ├── MilestoneTracker.tsx
│       ├── FilterBar.tsx
│       └── Header.tsx

To run it:

cd project-tracker
npm install
npm run dev

Open http://localhost:5173 in your browser. Click Load Demo Project to see the Website Redesign project.

Expected behavior with the demo project

• The Kanban board shows 20 tasks distributed across all five columns. Some cards show red due dates (overdue tasks) and critical priority badges.
• Drag a card from “In Progress” to “Review” — it snaps into place with a smooth animation.
• Switch to the Gantt chart tab. You see task bars laid out on a timeline. Dependency arrows connect related tasks. The red “today” line shows where you are.
• Open the Reports tab. The burndown chart shows the ideal line sloping down and the actual line stepping down unevenly — a realistic pattern for any project.
• Click a team member in the Team panel. The board filters to show only their tasks.

Common issues and fixes

When things go wrong

Project management tools have complex state interactions — a status change on the Kanban board should update the Gantt chart, burndown, and team workload simultaneously. Here are the most common issues and how to diagnose them.

Understanding the architecture

Here is how the key pieces work:

State management: The app uses a centralized store (likely Zustand or React Context + useReducer) that holds all tasks, team members, milestones, and project settings. Every component reads from and writes to this store. Changes trigger re-renders across the board, Gantt, and reports simultaneously.

Drag-and-drop: The @dnd-kit library handles the interaction layer. When you pick up a card, it creates a drag overlay. When you drop it over a new column, the library fires an onDragEnd event with the source and destination. The handler updates the task’s status in the store.

Gantt chart: Pure SVG rendering. Each task becomes a <rect> element positioned by its start date on the x-axis and its row index on the y-axis. Dependency arrows are <path> elements calculated from the end of one rect to the start of another. The zoom controls adjust the time scale (pixels per day).

Burndown calculation: On each render, the burndown utility counts total story points, then walks through the timeline day by day, subtracting points for tasks completed on each day. The ideal line is simply totalPoints - (totalPoints / totalDays) * dayIndex.

Customize it

Add time tracking

Add time tracking to each task. In the task detail modal, add a "Log Time" section
where users can add time entries (date, hours, description). Show total logged hours
vs estimated hours (add an "Estimate" field in hours to each task). In the Reports
tab, add a Time Report chart showing logged hours per team member per week as a
stacked bar chart. Highlight tasks where logged time exceeds the estimate in red.

Add sprint planning

Add sprint management. Let users create sprints with a name, start date, and end
date (typically 2 weeks). Tasks can be assigned to a sprint. Add a "Sprint Planning"
view that shows the sprint backlog with total story points and a capacity indicator
per team member. The burndown chart should filter by sprint. Add sprint velocity
tracking: after each sprint is closed, record the points completed and show a
velocity trend chart across sprints.

Add calendar view

Add a Calendar view tab. Show a monthly calendar grid where each day cell shows
the tasks due on that date. Color-code by priority. Clicking a day shows all tasks
due that day in a list. Allow dragging tasks between days to change due dates.
Show milestone diamonds on their target dates. Use CSS Grid for the calendar layout.

Add notifications and reminders

Add a notification system. Show a bell icon in the header with a badge count.
Generate notifications for: tasks due tomorrow, tasks overdue, tasks moved to
Review (notify the assignee), milestones approaching within 3 days. Store
notifications in the project store. Clicking a notification navigates to the
relevant task. Add a "Mark all read" button.

Try it yourself

1. Build the app using the prompt above.
2. Click Load Demo Project and explore all four tabs.
3. Drag a task to Done on the Kanban board, then open the Reports tab to verify the burndown chart recalculates.
4. Open the Gantt view and examine the dependency arrows. Do they make logical sense?
5. Add a new team member and assign them some tasks. Check the workload indicator.
6. Create a new milestone and link tasks to it. Watch the progress bar fill as you complete tasks.
7. Export the project as JSON, then clear everything and re-import it. All data should restore perfectly.
8. Pick one customization from the list above and add it with a follow-up prompt.

Key Takeaways

• Multiple views of the same data is the core pattern of enterprise software. The Kanban board, Gantt chart, burndown, and team panel all render from the same task store. Change a task in one view and it updates everywhere. This is how SAP, Salesforce, and every ERP system works.
• State management is the hardest part of interactive applications. The drag-and-drop interaction, task editing, filtering, and persistence all modify shared state. Getting this right is more important than making the UI look good.
• Agile is a framework, not just a buzzword. Story points, velocity, WIP limits, and burndown tracking are specific, measurable concepts. Building a tool that implements them gives you practical understanding that a textbook cannot.
• localStorage is surprisingly powerful for client-side tools. You get 5-10 MB of persistent storage per domain with zero server infrastructure. For personal and small team tools, this is often all you need.
• Complex tools are built from simple components. A Kanban board is just a list of lists. A Gantt chart is just rectangles on a timeline. A burndown is just a line chart. The complexity comes from connecting them, not from any single piece.

Portfolio Suggestion

A project management tracker is a standout portfolio piece because every hiring manager understands what it does — you do not need to explain the domain. To maximize impact:

• Deploy to Vercel or Netlify and include the live URL prominently on your resume.
• Load the demo project and take 3-4 screenshots showing the Kanban board, Gantt chart, burndown chart, and task detail modal. Use these in your portfolio site.
• Record a 60-second screen recording: load the demo, drag a task, switch to Gantt, show the burndown update. Post this to LinkedIn.
• If you are applying for project management roles, use this tool to actually track your capstone project. Export the JSON at the end and include it as an appendix in your capstone report, showing: “I built my own PM tool and used it to manage this project.”
• In interviews, frame it as: “I wanted to understand how Kanban boards actually work, so I built one. In the process, I learned about state management, drag-and-drop interactions, and Agile metrics like velocity and cycle time.”

What’s next

In the final lesson of this module, you will build a Business Report Generator — a Python CLI tool that takes a CSV file and outputs a polished executive report with auto-generated charts, summary statistics, and professional formatting. It automates the most repetitive deliverable in MIS coursework.