Build a Project Management App with Claude Code in 15 Minutes

Build a Project Management App with Claude Code in 15 Minutes

A step-by-step guide to building Flowstate — a Kanban board with tasks and notes — using Claude Code, Next.js, and Supabase. No prior AI coding experience required.

TL;DR: Key Takeaways

• 15-Minute Build: Complete project management app from idea to deployment
• Claude Code: Best AI coding assistant for context understanding and rapid development
• Tech Stack: Next.js 15, TypeScript, Supabase, Tailwind CSS, dnd-kit
• UI Design: Use /frontend-design skill for professional, distinctive interfaces
• Cross-Device Sync: Supabase integration for real-time data synchronization
• No Sign-up Required: Fully functional app with automatic data persistence

I think Claude Code is the best AI coding assistant available today. It understands context better than anything else I've tried, and it can build entire applications from a single prompt.

In this tutorial, I'll show you how I built Flowstate — a minimal project management app with a Kanban board, task list, and notes area — in about 15 minutes using Claude Code.

By the end, you'll have a fully functional app deployed to Netlify with cross-device sync powered by Supabase. Let's dive in.

Jump to Section

• 00:00 - Introduction & Setup
• 02:30 - Building the Kanban Board
• 06:00 - Adding Priority Levels
• 09:00 - UI Design with /frontend-design
• 12:00 - Supabase Integration
• 14:30 - Deploy to Netlify

1. Install Claude Code & Create Project

First, make sure you have Claude Code installed. If you haven't already, open your terminal and run:

npm install -g @anthropic-ai/claude-code

Create a new directory for your project and start Claude Code:

mkdir flowstate && cd flowstate && claude

💡 Tip: Claude Code works best when you give it context about what you're building. Start with a clear, detailed prompt.

Now give Claude your initial prompt. Here's what I used:

Claude will ask you a few clarifying questions about layout preferences and features. Answer them, and it will scaffold the entire Next.js project with TypeScript and Tailwind CSS.

2. Building the Kanban Board

Claude sets up the project structure and creates all the components. The Kanban board uses dnd-kit for smooth drag-and-drop:

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

The key components Claude creates:

• KanbanBoard.tsx — Main container with DnD context
• KanbanColumn.tsx — Individual columns (To Do, In Progress, Done)
• KanbanCard.tsx — Draggable task cards
• useLocalStorage.ts — Custom hook for persistence

At this point, you can run npm run dev and see a working Kanban board. Cards can be dragged between columns and the state persists in localStorage.

3. Adding Priority Levels

I wanted cards to have priority levels with visual indicators. Simple prompt:

Claude updated the types, added a priority selector when creating cards, and added color-coded badges:

• ● Low — Emerald green
• ● Medium — Sky blue
• ● High — Amber orange
• ● Urgent — Rose red

Each card now shows a priority badge and a colored indicator line on the left edge. The visual hierarchy makes it easy to spot urgent items.

4. UI Transformation with /frontend-design

The default UI was functional but generic. I used Claude's /frontend-design skill to transform it:

/frontend-design — redesign my UI

This skill applies design thinking to create distinctive interfaces. The result was an "Editorial Brutalism" aesthetic:

✨ Pro tip: The /frontend-design skill is a game-changer. It transforms generic UIs into something that looks professionally designed, not AI-generated.

5. Adding Supabase for Cross-Device Sync

localStorage is great, but I wanted my data to sync across devices. Enter Supabase — a Firebase alternative with a generous free tier.

npm install @supabase/supabase-js

I told Claude to migrate from localStorage to Supabase:

Claude created:

• supabase-schema.sql — Database tables for cards, todos, notes
• src/lib/supabase.ts — Client with CRUD operations
• New hooks: useKanban, useTodos, useNotes

To set it up yourself:

1. Create a project at supabase.com
2. Run the SQL schema in the SQL Editor
3. Add your Supabase URL and anon key to environment variables

6. Deploy to Netlify

Final step — deploy to the world. I asked Claude to set up Netlify:

Claude configured Next.js for static export and created the netlify.toml configuration. After connecting the GitHub repo to Netlify and adding environment variables, the app was live.

🚀 Result: A fully functional project management app, deployed and syncing across devices, built in ~15 minutes.

What I Learned

Building with Claude Code is a different experience from traditional coding. You're more of a product manager than a developer — describing what you want and iterating on the results.

Key takeaways:

• Be specific in prompts — The more context you give, the better the output
• Iterate quickly — Don't try to get everything perfect in one prompt
• Use skills — /frontend-design and other skills add specialized capabilities
• Review the code — Claude is good, but always review what it generates

The entire codebase is open source. Feel free to fork it, learn from it, or use it as a starting point for your own projects.

Try Flowstate

See the finished product in action. No sign-up required.

🔗 Open App — Try the live demo
📦 View Source — Explore the complete codebase

---

Written by Suneet Malhotra | Sr. Manager, Test Engineering at Motorola Solutions | Exploring the future of AI-driven development

Connect: GitHub | Portfolio | LinkedIn