Goal
Build a focused productivity app that supports deep work through Pomodoro timing, keeps all tasks visible on a Kanban board, and uses AI to surface insights that help users improve their habits over time — not just track them.
Case Study
FocusFlow
A productivity system that combines Kanban task management, Pomodoro focus sessions, and an AI coaching layer — so users can plan, execute, and reflect all in one place.
My Role
Led full-stack development end-to-end: UX flow design, data modelling with Prisma, authentication, Kanban drag-and-drop, Pomodoro timer, analytics dashboard, Groq AI integration, Docker deployment, and a full Jest test suite.
Delivered Outcomes
- Kanban task board with drag-and-drop reordering via @dnd-kit — filter by status and priority.
- Pomodoro timer with Focus (25 min), Short Break (5 min), and Long Break (15 min) modes, linked to individual tasks.
- Analytics dashboard showing daily focus metrics, task distribution, and peak activity hours powered by Recharts.
- AI insights panel using Groq (Llama 3.1 8B) to generate 3–5 actionable productivity coaching recommendations.
- Floating AI chat widget that can create, update, and delete tasks through natural language.
- Secure credentials-based auth with NextAuth.js v5, bcrypt password hashing, and route-level middleware guards.
Architecture
- Next.js 15 App Router with a clear server/client component split — server components fetch data, client components handle interactivity.
- Prisma 7 ORM with typed schema for Users, Tasks, and FocusSessions — migrations managed per environment.
- PostgreSQL persistence for all user data, task state, session records, and analytics aggregation.
- NextAuth.js v5 (beta) for session management, with bcryptjs for secure password hashing.
- Groq API with Llama 3.1 8B Instant as the LLM layer — with rule-based fallback insights if the API is unavailable.
- Docker Compose for production deployment with separate app and postgres containers, plus backup/restore shell scripts.
- GitHub Actions CI/CD with automated unit test runs and Docker image publishing workflows.
System Architecture
User / Browser
Next.js 15 App Router
Client Components · Server Components · Middleware
API Routes · NextAuth.js v5
Credentials auth · bcrypt · Route guards
Prisma ORM
PostgreSQL · Migrations
Groq API
Llama 3.1 8B Instant
Infra / DevOps
Docker Compose
App + Postgres containers
GitHub Actions
CI/CD · Tests · Build
Key Features
Kanban Task Board
Three-column board (To Do, In Progress, Completed) with drag-and-drop via @dnd-kit. Optimistic UI updates before server sync. Filter by status or priority with task count badges per column.
Pomodoro Timer
SVG ring progress animation with Focus, Short Break, and Long Break modes. Web Audio API notification on completion. Links sessions to tasks and persists them to the database.
Analytics Dashboard
Server-rendered dashboard with Recharts visualizations — daily focus time trends, task distribution by status and priority, session completion rates, and peak activity hours.
AI Productivity Insights
Calls Groq's Llama 3.1 8B Instant model to analyze your session and task data, then returns 3–5 personalized coaching recommendations. Falls back to rule-based insights if the API is unavailable.
AI Chat Widget
A floating chat interface with full conversation history. Can create, update, and delete tasks through natural language. Dispatches task events in real time without full page reloads.
Auth & Security
Credentials-based sign-in with NextAuth.js v5 and bcrypt. Route-level middleware guards protect all authenticated pages. Zod validates all inputs at API boundaries.
Project Structure
A single Next.js monorepo — App Router handles both the UI and all API routes.
Frontend
Next.js 15 · TypeScript · Tailwind- App Router pages: Landing, Sign In, Sign Up, Dashboard, Tasks, Timer
- Kanban board with @dnd-kit drag-and-drop and optimistic state updates
- Pomodoro timer with SVG ring animation and Web Audio API alerts
- Recharts-powered analytics: bar charts, line charts, and stat cards
- Floating AI chat widget with conversation history and task event dispatch
- Middleware-based route protection for all authenticated pages
- Comprehensive Jest + Testing Library test suite mirroring all components
Backend & Infra
Next.js API Routes · Prisma · Docker- API routes: /api/auth, /api/analytics, /api/ai/insights, /api/chat
- Prisma 7 ORM with User, Task, and FocusSession models
- PostgreSQL with migration history tracked per environment
- NextAuth.js v5 with bcrypt password hashing and session management
- Groq API integration for Llama 3.1 8B Instant AI coaching
- Docker Compose for production with timestamped backup/restore scripts
- GitHub Actions CI/CD: automated unit tests + Docker image publishing
Tech Stack
@dnd-kitdate-fnsNext.js 15RechartsTailwind CSSTypeScriptZodGroq API (Llama 3.1 8B)NextAuth.js v5PostgreSQLPrisma 7DockerGitHub ActionsJest