Your First App

This is the extended version of the Quickstart. We’ll build a real app step by step, explaining what happens at each stage.

What we’re building

A team standup tracker — a simple web app where team members post daily standups and can see what everyone else is working on. It will have:

• A clean landing page
• A standup form (what I did, what I’m doing, blockers)
• A feed showing today’s standups
• Deployed to a live URL

Step 1: Describe the app

Open your AI editor (Claude Code, Cursor, etc.) and type:

Build me a team standup tracker called "StandupFlow". It should have a
landing page with a hero section, a form where team members can post
their standup (yesterday, today, blockers), and a feed showing today's
standups from all team members. Use a clean, modern design.

Tip

Be descriptive. The more detail you give, the better the result. Mention specific features, design preferences, and tech requirements.

Step 2: Watch the plan

Your AI will call plan-app. You’ll see a structured plan appear:

Planning StandupFlow...

Features:
  1. Hero landing page with CTA
  2. Standup submission form (3 fields + submit)
  3. Today's standup feed (grouped by person)
  4. Responsive design with dark mode support

Tech stack: React + Vite + TailwindCSS
Template: saas-starter
Estimated steps: 4

The AI reviews this plan with you. If something’s missing, just say so:

Also add a "streak" counter showing how many consecutive days
someone has posted.

The plan updates. When you’re happy, the AI proceeds.

Step 3: Watch it build

The AI calls init-project to scaffold the project, then implement-step for each feature. You’ll see the code being written in real time.

This is where the magic happens — the AI writes real React components, Tailwind styles, and application logic. Mistflow tracks each step and validates the build.

Step 4: Deploy

The AI calls deploy. Within seconds:

Deployed! https://standupflow.mistflow.app

Open the URL. Your app is live.

Step 5: Iterate

Don’t like something? Just tell the AI:

Make the form more compact — put all three fields in a single row
on desktop. And change the accent color to indigo.

The AI calls implement-step with the change, then deploy again. Your live URL updates within seconds.

What to try next

• Connect GitHub: Connect this project to my GitHub repo standupflow/app
• Add a custom domain: Set up standupflow.dev as the custom domain
• Check provenance: Open the dashboard and click on your project to see the full build history

Tips for great results

1. Be specific about design. “Clean and modern” works, but “Stripe-style with lots of whitespace and a blue accent” works better.
2. Iterate in small steps. Instead of describing 10 changes at once, make them one or two at a time.
3. Use templates. If your app fits a common pattern (SaaS, landing page, internal tool), mention it — Mistflow will use the matching template.
4. Check the dashboard. The Mistflow dashboard shows deployment logs, build errors, and feature provenance. It’s your debugging starting point.