Portfolio case study

AI drafts the plan.You own the schedule.

A full-stack project planner that turns brain dumps into editable tasks, Gantt timelines, and exportable deliverables — built to showcase mid-level product engineering.

Next.js 16FastAPIGroq LLMTypeScript

Launch live demo Explore the stack

AI draft

Groq generates a structured starting point from raw ideas.

Editable Gantt

Drag tasks, resize durations, and tune every field manually.

Session-first

No database or auth — fast, portable, deployable anywhere.

Tech stack

Built with modern full-stack tooling

A deliberately scoped architecture: AI on the backend, rich interactivity on the frontend, and zero persistence complexity for the demo.

Next.js 16

App Router frontend

React 19App RouterTurbopack

TypeScript

End-to-end type safety

Strict typesShared schemas

Tailwind CSS

Design system foundation

ResponsiveDark mode

shadcn/ui

Accessible UI primitives

Radix/Base UIComposable

FastAPI

Python API layer

PydanticOpenAPI

Groq

LLM inference

JSON modeStructured output

Session storage

Client-side persistence

No databaseNo auth

Monorepo

Frontend + backend split

VercelRender/Fly.io

Features

Product thinking, not just AI output

The differentiator is control: AI proposes, the user refines. That mirrors real planning workflows in production teams.

AI-first draft

Paste a brain dump and target deadline. Groq returns tasks, hours, milestones, and risks as JSON.

Fully editable fields

Inline editing for project metadata, tasks, milestones, and risks — no re-prompting required.

Drag-and-drop tasks

Reorder tasks in the board and reposition them on a Gantt chart with resize handles.

Hour-aware planning

Each task tracks calendar days and estimated work hours, aligned to your chosen deadline.

Export anywhere

Download JSON, CSV, or XLSX snapshots and re-import them into the live demo.

Portfolio-ready UX

Case-study layout with stack highlights, feature narrative, and a polished interactive demo.