Skip to main content

Real Examples: From Idea to Launch

This section shows how real people (just like you) use the spec-driven approach to build apps with AI. Each example follows the same process: plan first, build second, check before launching.

Example 1: Building a Booking System for a Hair Salon​

Who: Maria, a salon owner who wants customers to book appointments online.

Step 1: Write Down What She Wants​

Maria opens a document and writes:

💡 New to Markdown? The examples on this page use Markdown — a simple way to format text with symbols like # for headings and - for bullet lists. If any of this looks unfamiliar, check out our Markdown Crash Course — it covers everything you need in 2 minutes.

## Booking System Requirements

### What It Should Do
- Customers can see available time slots for each stylist
- Customers can book an appointment by picking a date, time, and stylist
- Customers get a confirmation email after booking
- Customers can cancel their appointment up to 4 hours before
- Maria (the owner) can see all upcoming appointments
- Maria can block off time (lunch breaks, days off)

### Rules
- Each appointment is 1 hour by default
- Stylists can only have one appointment at a time
- Customers need to provide: name, phone number, email
- No bookings outside business hours (9 AM - 6 PM, Mon-Sat)

### What Should Happen When Something Goes Wrong
- If someone tries to book a time that's already taken → show "This time is no longer available"
- If the email fails to send → still save the booking, try again later
- If someone tries to cancel too late → show "Cancellations must be made at least 4 hours before your appointment"

Step 2: Plan the Screens​

Maria sketches what pages she needs:

1. Homepage → shows the salon name and a "Book Now" button
2. Booking page → calendar view, pick stylist, pick time
3. Confirmation page → "Your appointment is confirmed!"
4. Owner dashboard → see all appointments, cancel or reschedule
5. Owner settings → set business hours, block off time

Step 3: Break Into Small Tasks​

Task 1: Create the homepage with salon info and "Book Now" button
Task 2: Create the booking page with calendar and time slots
Task 3: Save bookings to the database
Task 4: Send confirmation emails
Task 5: Create the owner dashboard
Task 6: Add cancellation feature
Task 7: Add business hours settings

Step 4: Build Each Piece with AI​

Maria feeds each task to her AI tool, one at a time. For Task 1:

Build a homepage for a hair salon booking app.

The page should show:
- Salon name: "Maria's Cuts"
- A short description: "Book your next appointment online"
- A big "Book Now" button that goes to the booking page
- Business hours: Mon-Sat 9AM-6PM
- Phone number and address

Design: Clean, warm colors (think salon vibes), mobile-friendly

Step 5: Test Everything​

Maria tests each piece:

  • She books an appointment → gets a confirmation email
  • She tries to book the same time slot → gets an error
  • She tries to book outside business hours → gets an error
  • She cancels an appointment → it works
  • She checks the owner dashboard → sees all appointments

Step 6: Security Check​

Maria goes through the Security Checklist:

  • Passwords are hashed
  • Login has rate limiting
  • Customers can only see their own bookings
  • HTTPS is enabled

Step 7: Launch​

Maria launches her booking system. Her customers can now book online without calling.

Example 2: Building a Simple SaaS Dashboard​

Who: Alex, a freelancer who wants to offer a project management tool to his clients.

Step 1: Write Down What He Wants​

## Project Dashboard Requirements

### What It Should Do
- Clients can log in and see their project's progress
- Each project shows: status (not started, in progress, completed), key milestones, and recent updates
- Alex can create new projects and assign them to clients
- Alex can post updates that clients can see
- Clients can leave comments on updates

### Rules
- Clients can only see their own projects
- Alex can see all projects
- No payment processing (for now)

Step 2: Plan the Screens​

1. Login page
2. Client dashboard → shows list of their projects
3. Project detail page → shows milestones, updates, comments
4. Admin dashboard → Alex's view of all projects
5. Admin create/edit project page

Step 3: Break Into Tasks​

Task 1: User registration and login
Task 2: Client dashboard (list of projects)
Task 3: Project detail page with milestones
Task 4: Admin dashboard (all projects)
Task 5: Admin can create and edit projects
Task 6: Comments on updates

Step 4: Build with AI​

Alex feeds each task to his AI tool. For the login system, he uses a detailed prompt:

Build a login and registration system for my project management app.

Requirements:
- Users can sign up with name, email, and password
- Users can log in with email and password
- Users can reset their password via email
- After login, users go to their dashboard
- After 5 failed login attempts, lock out for 1 minute
- Passwords must be at least 8 characters
- Show friendly error messages (not technical ones)

Step 5: Test​

Alex creates two test client accounts and checks:

  • Each client can only see their own projects
  • Alex can see all projects
  • Comments work correctly
  • Login errors show friendly messages

Step 6: Production Readiness​

Alex goes through the Production Readiness checklist:

  • Automated backups
  • Error tracking set up
  • Privacy policy added
  • Terms of service added
  • HTTPS enabled

Step 7: Launch​

Alex launches his project management tool and onboards his first clients.

Example 3: Building an API for a Mobile App​

Who: Priya, a startup founder who needs a backend for her mobile app.

Step 1: Write Down What She Wants​

## Task Management API Requirements

### What It Should Do
- The mobile app can create, read, update, and delete tasks
- Each task has: title, description, due date, status (pending/in progress/completed)
- Users can only see and modify their own tasks
- The app can list tasks with pagination (load more as user scrolls)
- The app can filter tasks by status

### Security
- Every request must be authenticated
- Rate limit: 100 requests per minute per user

Step 2: Plan​

Priya plans the data structure:

Each task needs:
- A unique ID
- Title (text)
- Description (text)
- Due date
- Status (pending, in progress, completed)
- Which user it belongs to
- When it was created
- When it was last updated

Step 3: Build with AI​

Priya asks the AI to build each endpoint one at a time:

Build an API endpoint that creates a new task.

Requirements:
- POST request to /api/tasks
- Accepts: title, description, due_date, status
- Only authenticated users can create tasks
- The task is automatically assigned to the authenticated user
- Returns the created task with its ID
- Validates that title is required and at least 1 character
- Returns proper error messages for invalid data

Step 4: Test​

Priya tests each endpoint:

  • Create a task → works
  • Read tasks → works
  • Try to read another user's tasks → blocked
  • Try to create without authentication → blocked
  • Send invalid data → gets error message

Step 5: Security Check​

  • Authentication on every endpoint
  • Users can only access their own data
  • Rate limiting configured
  • Input validation on all mutations
  • HTTPS enforced

Step 6: Launch​

Priya connects her mobile app to the API and launches her beta.

Key Takeaways From These Examples​

  1. Always start with a plan — even a simple bullet list improves your AI results dramatically
  2. Build in small pieces — one feature at a time, not everything at once
  3. Test each piece — before moving to the next feature
  4. Check security — before launching to real users
  5. Use the checklists — Security Basics and Production Readiness are your friends

The difference between a hobby project and a professional product isn't the code. It's the process.

Follow the Same Process as These Examples​

Download the AI Project Template — the same fill-in-the-blanks format used in these examples, ready for your next project.

Download the Starter Template →
Last updated on