Get Instant Access
Enter your details to unlock the complete guide and start building your first app this weekend.
THE WEEKEND
BUILDER
Curated steps to build your first real app. From zero experience to a live product on the internet—all in one weekend using AI tools.
Kanban Board App
Claude Code
Next.js
THE WALL HAS FALLEN
Four years ago, my brother Dare and I raised half a million dollars to build Trueflutter, a dating app.
We hired developers. We built a team. It took us three years to grow it into Africa's highest-rated dating app with over 300 million matches.
This year, I built software that's far more sophisticated than that.
Solo. In three months. Without any external funding.
What changed?
Not me. I didn't suddenly become a genius programmer. I'm still the same guy who struggled through Python tutorials.
What changed is that the tools finally caught up to my ideas.
The technical barrier has fallen.
I built an algorithm for my second dating app, Prime, that was more sophisticated than the one we paid a Ukrainian Data Science company $50,000 for. The matching accuracy was better. The system was cleaner. And I built it myself because I understood exactly what I wanted.
That moment broke a limiting belief I'd carried for years: that you need a technical background to build real software.
You don't. Not anymore.
Natural language is the new programming language. If you can think clearly and articulate what you want, you can build it.
This weekend, you're going to prove this to yourself.
WHAT YOU'RE BUILDING
By Sunday evening, you'll have built and deployed a real project management tool—a Kanban board that you can actually use at work.
Not a toy. Not a tutorial project that sits on your computer.
A live app. On the internet. With a URL you can share with anyone.
Here's what it will do:
- Three columns: To Do, In Progress, and Done
- Add new task cards with a title and description
- Drag and drop cards between columns
- Color-coded labels to categorize tasks
- Delete cards you no longer need
- Clean, professional UI that looks like a real product
Why a Kanban board?
Because it's useful from the moment you deploy it. You'll actually use this at work. Send the link to your team. Manage a side project with it. Show your boss what you built over the weekend.
But more importantly, it teaches you the foundations: How to structure a real application. How components talk to each other. How user interactions work. How to make something look professional.
Once you understand these foundations, you can build anything. A booking system? Same structure. A dashboard? Same principles. A client portal? You'll know how.
This isn't about building a Kanban board. It's about proving to yourself that you can build.
What you need:
- A laptop (Mac or Windows)
- A Claude Pro subscription ($20/month) — Get it here
- 6-8 hours this weekend
- Curiosity
Think of the $20 as hiring a developer for the weekend for the price of lunch.
Let's start.
Module 1
YOUR WORKSHOP
You need three tools. That's it. Each one has a specific job.
| Tool | What It Does | Cost |
|---|---|---|
| Claude Desktop | Your AI builder - writes code, creates files, runs your app | $20/month (Pro) |
| GitHub | Stores your code safely in the cloud | Free |
| Vercel | Puts your app live on the internet | Free |
Workflow: You build with Claude → Save to GitHub → Vercel deploys it live
Step 1: Create Your Accounts
You need accounts on these three platforms. Click each link, sign up, and come back.
GitHub
Your code vault. Sign up at github.com →
Vercel
Sign up with GitHub. Sign up at vercel.com →
Claude Pro
You need Pro for Claude Code. Subscribe at claude.ai →
Step 2: Install Your Tools
Install Claude Desktop
Download from claude.ai/download. Install and sign in.
See three tabs at the top? Chat, Cowork, and Code. Click Code.
Install Node.js
Download the LTS version from nodejs.org. Verify:
node -vInstall Git
- Mac: Type
git --versionin Terminal - Windows: Download Git for Windows
Step 3: Connect Claude to a Folder
- Open Claude Desktop
- Click the Code tab
- Click "Select folder" at the top left
- Select your Desktop
Step 4: Create Your Project
Type this into Claude Code:
Create a new Next.js project called "my-kanban-board" in this folder using npx create-next-app. Use these settings: TypeScript yes, ESLint yes, Tailwind CSS yes, src directory no, App Router yes, Turbopack yes, import alias no.↑ Click anywhere on the block to copy this prompt
Once done, re-select your folder to point to the new my-kanban-board folder.
Step 5: See Your App Running
Start the dev server with npm run dev↑ Click anywhere on the block to copy this prompt
Open your browser:
http://localhost:3000First Milestone: Your Workshop Is Ready
- ✅ Claude Desktop connected to your project
- ✅ Next.js project created and running
- ✅ Dev server live at localhost:3000
That was the hardest part!
Module 2
THE BLUEPRINT
Here's what separates people who build real apps from people who generate throwaway demos:
A blueprint.
Step 1: Give Claude Its Instruction Manual
Tell Claude:
Create a CLAUDE.md file in the root of this project with exactly this content:
# Kanban Board Project
## Project Overview
A drag-and-drop Kanban board built with Next.js 15 and Tailwind CSS. Clean, modern, professional UI.
## Tech Stack
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
- React DnD or similar for drag-and-drop
## Code Standards
- Use functional components with TypeScript
- Use Tailwind CSS for all styling - no separate CSS files
- Keep components small and focused - one job per component
- Use descriptive variable names, not abbreviations
## Workflow Rules
- ALWAYS create a plan before writing code
- Present the plan and wait for my approval before building
- After building, explain what you did in plain English
- If something is unclear, ask me before guessing
## Design Principles
- Clean, minimal UI with plenty of whitespace
- Subtle shadows and rounded corners
- Smooth animations for drag-and-drop
- Professional color palette↑ Click anywhere on the block to copy this prompt
Step 2: Give Claude the Blueprint
Tell Claude:
Create a file at docs/PRD.md with exactly this content:
# Kanban Board - Product Requirements Document
## Overview
A personal project management tool using a Kanban board layout.
## Core Features
### 1. Board Layout
- Three columns: "To Do", "In Progress", "Done"
- Each column has a header with name and card count
### 2. Task Cards
- Each card displays: title, description (optional), colored label
- Cards show a delete button on hover
### 3. Add New Cards
- "Add card" button at the bottom of each column
- Inline form: title, description, label color
### 4. Drag and Drop
- Cards can be dragged between columns
- Visual feedback during drag
- Smooth animation when cards move
### 5. Labels
- 5 preset colors: Red, Orange, Yellow, Green, Blue
- Labels display as a colored bar at top of card
## Design Requirements
- Background: Light gray (#F5F5F5)
- Cards: White with subtle shadow, rounded corners (8px)
- Responsive: Works on desktop and tablet
## Data Storage
- All data stored in browser localStorage
- Board state persists between page refreshes↑ Click anywhere on the block to copy this prompt
Step 3: Create the Build Plan
Read the CLAUDE.md and docs/PRD.md files. Create a step-by-step implementation plan. Break it into small phases.
Save the plan to docs/plan.md.
Don't start building yet. Show me the plan and wait for my approval.↑ Click anywhere on the block to copy this prompt
If the plan looks good:
This plan looks good. Let's start with Phase 1.↑ Click anywhere on the block to copy this prompt
Second Milestone: Blueprint Ready
- ✅ CLAUDE.md: Claude's instruction manual
- ✅ docs/PRD.md: Your app's blueprint
- ✅ docs/plan.md: Step-by-step build plan
Now we build.
Module 3
BUILD THE BOARD
Claude plans → You approve → Claude builds → You check → Move on
Phase 1: The Board Layout
Build Phase 1 from the plan: the basic board layout with three columns. Show me your approach first and wait for my approval.↑ Click anywhere on the block to copy this prompt
Phase 2: Task Cards
Build Phase 2: the task card component. Cards should have a title, optional description, and a colored label bar at the top. Add 2-3 sample cards to each column.
Show me your plan first.↑ Click anywhere on the block to copy this prompt
Phase 3: Add New Cards
Build Phase 3: the ability to add new cards. "Add card" button at the bottom of each column that shows an inline form.
Show me your plan first.↑ Click anywhere on the block to copy this prompt
Phase 4: Drag and Drop
Build Phase 4: drag and drop. Cards should be draggable between columns with smooth visual feedback.
Show me your plan first.↑ Click anywhere on the block to copy this prompt
Phase 5: Delete & Persist Data
Build Phase 5: Add a delete button on hover. Save board state to localStorage so data persists on refresh.
Show me your plan first.↑ Click anywhere on the block to copy this prompt
Save to GitHub
- Go to github.com/new
- Name it
my-kanban-board - Click Create repository, copy the URL
Initialize git, add all files, commit with message "feat: complete kanban board with drag and drop", and push to: https://github.com/YOUR-USERNAME/my-kanban-board.git↑ Click anywhere on the block to copy this prompt
Third Milestone: Your App Works!
You built a working project management tool. Using plain English.
Module 4
MAKE IT YOURS
This is where most people stop. Don't.
Rename Your Board
Change the board title from "My Board" to "[YOUR BOARD NAME]". Also update the browser tab title to match.↑ Click anywhere on the block to copy this prompt
Customize Colors
Update the color palette to feel more professional. I want the vibe to be [clean and minimal / dark and focused / warm and inviting / bold and energetic].↑ Click anywhere on the block to copy this prompt
Add a Feature
Pick one:
Option A: Search
Add a search bar that filters cards in real-time.↑ Click anywhere on the block to copy this prompt
Option B: Progress bar
Add a progress bar showing percentage of cards in Done column.↑ Click anywhere on the block to copy this prompt
Option C: Custom columns
Let me rename columns by clicking the header and add new columns with a + button.↑ Click anywhere on the block to copy this prompt
Polish the UI
Do a final UI polish pass. Focus on spacing, hover effects, transitions, and empty states. Don't change functionality.↑ Click anywhere on the block to copy this prompt
Commit all changes with message "feat: customize board with personal styling" and push to GitHub.↑ Click anywhere on the block to copy this prompt
Fourth Milestone: It's Yours
Your name, your colors, your feature. You built it.
Module 5
GO LIVE
Deploy to Vercel
- Go to vercel.com/new
- Find
my-kanban-boardand click Import - Click Deploy
- Wait 1-2 minutes
You'll get a URL like:
https://my-kanban-board.vercel.appYour App Is Live!
Open your phone. Type that URL. Share it with friends. Post it on LinkedIn.
You built a real web app. This weekend. With no coding background.
What's Next? Idea LaunchPad
You proved you can build. Now build something professional—with real databases, user accounts, and security.
Learn More About Idea LaunchPad →You Can Build.
The barrier has fallen. And you just stepped through it.
— Ayo
HELP: WHEN THINGS GO WRONG
The 15-Minute Rule
Try to solve it yourself
Read the error message. Check what you changed.
Ask Claude
I'm getting this error: [PASTE ERROR]. Can you fix it?↑ Click anywhere on the block to copy this prompt
Start fresh
Something has gone wrong. Read the PRD and identify what's broken. Fix it or start this component from scratch.↑ Click anywhere on the block to copy this prompt
Common Issues
"Command not found: node"
Restart your computer and try again.
Claude says "Select folder"
Click "Select folder" and navigate to my-kanban-board.
Page is blank or error
My app shows a blank page / error. Check for errors and fix it.↑ Click anywhere on the block to copy this prompt
Drag and drop broken
Drag and drop isn't working. The issue is: [DESCRIBE]. Debug and fix it.↑ Click anywhere on the block to copy this prompt
Claude keeps breaking things
Stop. Read CLAUDE.md and docs/PRD.md to re-orient. What should we focus on next?↑ Click anywhere on the block to copy this prompt
Nuclear Option
The [FEATURE] implementation is messy. Start it over cleanly. Revert changes, re-read the PRD, and implement fresh. Show me the plan first.↑ Click anywhere on the block to copy this prompt