Project Estimation & Gantt Chart Web App (C#)

An ASP.NET Core web application demonstrating project task management, three-point estimation, and automated Mermaid Gantt chart generation.

Technology Stack: .NET 8, Entity Framework, SQLite, Mermaid.js
Estimated Effort: 80 hours (2 weeks)
Complexity: Medium

Table of contents
  1. Project Overview
    1. Key Features
  2. Estimation Breakdown
    1. Functional Requirements Analysis
    2. Application Architecture
    3. Key Technologies Used
  3. Application Features
    1. Task Management
    2. Three-Point Estimation
    3. Task Dependencies
    4. Mermaid Chart Generation
  4. Setup Instructions
    1. Prerequisites
    2. Installation Steps
    3. Development in VS Code
  5. Estimation Analysis
    1. Original Estimates vs. Actual
    2. Key Insights for Web Applications
  6. Learning Objectives Demonstrated
    1. Three-Point Estimation
    2. Task Dependencies
    3. Mermaid Integration
    4. Web Development Best Practices
  7. Extension Exercises
    1. Beginner Level
    2. Intermediate Level
    3. Advanced Level
  8. Demo Application Structure
    1. Key Files
    2. Sample Data

Project Overview

This demo web application showcases practical implementation of project estimation and task management concepts covered in the course. It includes:

  • CRUD operations for project tasks
  • Three-point estimation (optimistic, pessimistic, most likely) with PERT calculations
  • Task dependency management
  • Automated Mermaid Gantt chart generation and visualization
  • Critical path identification
  • Project timeline visualization

Key Features

  • Task Management: Create, edit, update, and delete project tasks
  • Estimation Tools: Built-in three-point estimation with confidence intervals
  • Dependency Tracking: Define task relationships and prerequisites
  • Mermaid Integration: Auto-generate Mermaid Gantt charts from task data
  • Visual Timeline: Interactive web-based Gantt chart viewer
  • Responsive Design: Works on desktop and mobile devices

Estimation Breakdown

Functional Requirements Analysis

Feature Area Function Points Complexity Estimated Hours
Task CRUD Operations 6 Medium 16
Three-Point Estimation 3 Low 8
Task Dependencies 4 Medium 12
Mermaid Chart Generation 5 Medium 16
Web UI (Razor Pages) 8 Medium 20
Data Persistence (EF Core) 3 Low 8
Total 29   80

Application Architecture 

ProjectEstimator/
├── Controllers/
│   ├── HomeController.cs
│   ├── TasksController.cs
│   └── ProjectsController.cs
├── Models/
│   ├── Project.cs
│   ├── ProjectTask.cs
│   └── ViewModels/
├── Views/
│   ├── Tasks/
│   ├── Projects/
│   └── Shared/
├── Services/
│   ├── EstimationService.cs
│   └── MermaidService.cs
├── Data/
│   └── ApplicationDbContext.cs
└── wwwroot/
    ├── css/
    └── js/

Key Technologies Used

  • ASP.NET Core 8: Web framework
  • Entity Framework Core: Data access with SQLite
  • Mermaid.js: Gantt chart generation and visualization
  • Bootstrap 5: Responsive UI framework
  • Chart.js: Additional data visualization

Application Features

Task Management

  • Create Tasks: Add new tasks with name, description, and estimates
  • Edit Tasks: Update task details, estimates, and dependencies
  • Delete Tasks: Remove tasks and automatically update dependencies
  • List View: Display all tasks with their key information

Three-Point Estimation

  • PERT Calculation: Automatic calculation of expected duration using (O + 4M + P) / 6
  • Standard Deviation: Calculate uncertainty using (P - O) / 6
  • Confidence Intervals: Display 68% and 95% confidence ranges
  • Estimation Summary: Project-level aggregation of estimates

Task Dependencies

  • Prerequisite Tasks: Define which tasks must complete before others can start
  • Dependency Validation: Prevent circular dependencies
  • Critical Path: Identify tasks that directly impact project completion date
  • Visual Dependencies: Show task relationships in Mermaid charts

Mermaid Chart Generation

  • Auto-Generation: Create Mermaid Gantt chart syntax from task data
  • Live Preview: Real-time chart rendering using Mermaid.js
  • Export Options: Copy Mermaid syntax for use in documentation
  • Responsive Viewer: Charts scale appropriately on different screen sizes

Setup Instructions

Prerequisites

  • Visual Studio Code
  • .NET 8.0 SDK
  • C# Extension for VS Code

Installation Steps

  1. Navigate to Demo Directory 
    cd demos/gantt-chart-csharp
  2. Restore NuGet Packages 
    dotnet restore
  3. Create Database 
    dotnet ef database update
  4. Run Application 
    dotnet run
  5. Open in Browser Navigate to https://localhost:5001 or http://localhost:5000

Development in VS Code

  1. Open the demos/gantt-chart-csharp folder in VS Code
  2. Press F5 to start debugging
  3. The application will open in your default browser
  4. Use breakpoints for debugging the C# code

Estimation Analysis

Original Estimates vs. Actual

Phase Estimated Hours Notes
Project Setup & Configuration 4 ASP.NET Core project template, NuGet packages
Data Models & Entity Framework 8 ProjectTask, Project models with EF Core setup
CRUD Controllers & Views 20 Tasks and Projects controllers with Razor views
Three-Point Estimation Service 8 PERT calculations and confidence intervals
Mermaid Chart Generation 16 Service to generate Mermaid syntax from tasks
UI/UX with Bootstrap 16 Responsive design and user interface
Testing & Debugging 8 Unit tests and integration testing
Total 80 Focused scope for educational demo

Key Insights for Web Applications

Advantages of Web vs Desktop:

  • Cross-platform compatibility (Windows, Mac, Linux)
  • No installation required - runs in browser
  • Easy sharing and collaboration
  • Simpler deployment and updates
  • Better integration with online tools (Mermaid, etc.)

Estimation Considerations:

  • Web UI development often faster with modern frameworks
  • Database integration straightforward with EF Core
  • Client-side JavaScript adds complexity but provides better UX
  • Testing across browsers requires additional effort

Learning Objectives Demonstrated

Three-Point Estimation

  • PERT Formula: Implementation of (O + 4M + P) / 6 calculation
  • Confidence Intervals: 68% and 95% probability ranges
  • Project Aggregation: Sum of individual task estimates with combined uncertainty

Task Dependencies

  • Prerequisite Management: Tasks that must complete before others can start
  • Dependency Validation: Prevention of circular dependencies in the system
  • Critical Path Identification: Automated detection of tasks that impact project completion

Mermaid Integration

  • Chart Generation: Automatic creation of Mermaid Gantt chart syntax
  • Live Visualization: Real-time rendering of charts as tasks are modified
  • Export Capability: Copy generated Mermaid code for use in documentation

Web Development Best Practices

  • MVC Pattern: Clean separation of concerns in ASP.NET Core
  • Entity Framework: Modern data access with code-first approach
  • Responsive Design: Mobile-friendly interface using Bootstrap
  • RESTful APIs: Clean controller design for CRUD operations

Extension Exercises

Beginner Level

  1. Add task status tracking (Not Started, In Progress, Completed, Blocked)
  2. Implement task filtering by status, priority, or assignee
  3. Add basic validation for task dates and estimates

Intermediate Level

  1. Resource assignment - assign team members to tasks
  2. Workload visualization - show resource utilization over time
  3. API endpoints - create REST API for external integration

Advanced Level

  1. Monte Carlo simulation for project completion probability
  2. Real-time updates using SignalR for collaborative editing
  3. Export functionality - generate PDF reports or Excel files

Demo Application Structure

The application is located in the demos/gantt-chart-csharp/ directory within this repository and includes:

Key Files

  • Program.cs - Application entry point and configuration
  • Models/ProjectTask.cs - Task entity with three-point estimation
  • Models/Project.cs - Project entity with task collections
  • Controllers/TasksController.cs - CRUD operations for tasks
  • Services/EstimationService.cs - Three-point estimation calculations
  • Services/MermaidService.cs - Mermaid chart generation logic
  • Views/Tasks/ - Razor views for task management
  • wwwroot/js/mermaid-viewer.js - Client-side Mermaid rendering

Sample Data

The application includes sample project data to demonstrate:

  • Tasks with dependencies (Requirements → Design → Development → Testing)
  • Three-point estimates for each task
  • Generated Mermaid Gantt chart showing timeline and dependencies
  • Critical path highlighting

This demo application illustrates practical application of estimation techniques in a real software project, providing hands-on experience with three-point estimation, critical path analysis, and project scheduling.