Interactive web application for Critical Path Method (CPM) analysis with network diagrams, path calculations, float/slack analysis, and Gantt chart visualization.
This tool provides a complete project management analysis suite for educational and professional use. It helps visualize project dependencies, identify critical paths, calculate task flexibility (float/slack), and display timeline schedules through interactive Gantt charts.
Perfect for:
- Project Management courses and assignments
- Operations Research demonstrations
- CPM/PERT analysis teaching
- Professional project scheduling
- Network analysis visualization
- Visual Activity-on-Node representation
- Color-coded critical vs non-critical tasks
- Shows ES, EF, LS, LF times for each task
- Interactive arrow flow between activities
- Complete enumeration of all possible paths
- Duration calculation for each path
- Critical path identification
- Visual highlighting of critical route
- Comprehensive table with ES, EF, LS, LF values
- Automatic float calculation (LS - ES)
- Critical task identification (zero float)
- Task flexibility indicators
- Timeline visualization with week markers
- Color-coded critical path (red) vs non-critical (blue)
- Visual float indicators (yellow overlay)
- Responsive and scrollable design
- Quick answers to key questions
- Total project duration
- Critical path route display
- Task statistics dashboard
| Task | Predecessors | Duration (weeks) | ES | EF | LS | LF | Float |
|---|---|---|---|---|---|---|---|
| A | Start | 4 | 0 | 4 | 0 | 4 | 0 |
| B | Start | 6 | 0 | 6 | 4 | 10 | 4 |
| C | A | 3 | 4 | 7 | 4 | 7 | 0 |
| D | A, B | 5 | 6 | 11 | 6 | 11 | 0 |
| E | C | 8 | 7 | 15 | 7 | 15 | 0 |
| F | D | 2 | 11 | 13 | 13 | 15 | 2 |
| G | E, F | 7 | 15 | 22 | 15 | 22 | 0 |
- Critical Path: Start → A → C → E → G → End
- Project Duration: 22 weeks
- Critical Tasks: A, C, D, E, G (5 tasks with 0 float)
- Float of Task B: 4 weeks
- Float of Task C: 0 weeks (Critical)
- Slack of Task F: 2 weeks
- React 18 - UI framework
- Tailwind CSS - Styling and responsive design
- Babel Standalone - JSX transformation
- SVG - Network diagram rendering
- Vanilla JavaScript - Core calculations
- HTML5 - Single-file architecture
project-network-analysis/
│
├── index.html # Complete self-contained application
├── package.json # Project metadata and dependencies
├── README.md # This file
└── LICENSE # MIT License
# Simply open index.html in any modern web browser
# Chrome, Firefox, Safari, Edge all supported# Python 3
python -m http.server 8000
# Node.js (with npx)
npx serve .
# Then open: http://localhost:8000