A full-stack style single-page web application inspired by FullTrack.ai — an AI-driven project tracking, analytics, and idea management platform.
This is a frontend simulation of a full-stack app. It runs entirely in the browser using localStorage to persist data, simulating a backend database.
- Real-time statistics with animated counters
- Project status distribution (doughnut chart)
- Weekly activity overview (bar chart)
- Recent projects at a glance
- Create projects with name, description, status, priority, progress, deadline, and tags
- Read with filterable table (by status and priority)
- Update any project field via edit modal
- Delete with confirmation dialog
- Data persists across sessions via localStorage
- Simulated AI-powered roadmap generation
- Context-aware: detects project type (e-commerce, social, analytics, mobile, AI/ML, API, general)
- Generates phased roadmaps with tasks tailored to the project type
- Timeline-aware phase duration calculation
- Tech stack recommendations
- Save and manage generated roadmaps
- One-click project creation from roadmaps
- Completion rate trend (line chart)
- Priority distribution (polar area chart)
- Project progress timeline (horizontal bar chart)
- Modern dark mode aesthetic
- Fully responsive — works on desktop, tablet, and mobile
- Smooth animations and transitions
- Toast notification system
- Sidebar navigation with mobile hamburger menu
- HTML5 — Semantic markup
- CSS3 — Custom properties, Grid, Flexbox, animations
- Vanilla JavaScript — No frameworks, IIFE pattern
- Chart.js — Interactive charts (loaded via CDN)
- localStorage — Client-side data persistence
- Clone the repository
- Open
index.htmlin a browser — no build step required
# Or use a local server
npx serve .
# or
python3 -m http.server 8080.
├── index.html # Main HTML with all page sections and modals
├── styles.css # Complete styling with dark theme and responsive design
├── app.js # Application logic — navigation, CRUD, charts, AI roadmaps
└── README.md # This file
MIT