Build your first app

An end-to-end walkthrough — from prompt to deployed product. We build a real, simple SaaS together: a team task tracker.

The Quickstart gets you a deployed app in five minutes. This guide is longer and more deliberate: you’ll build a small but genuinely useful SaaS — a team task tracker — and learn the moves you’ll repeat on every future project.

By the end you’ll have:

• A Convex schema with two tables and indexes.
• Built-in auth with email + Google.
• A multi-tenant data model where each user only sees their team’s tasks.
• A working assignment notification flow using Resend.
• A custom domain and SSL.

Total time: ~30 minutes if you don’t get distracted.

This walkthrough assumes you’ve read the Quickstart. If you haven’t started a project yet, start there.

What we’re building

A task tracker for small teams. Each team has a name and members. Each task has a title, due date, priority, and is assigned to a team member. When a task is assigned, the assignee gets a notification (in-app and email).

The feature checklist:

• Auth: sign up with email or Google
• Onboarding: create or join a team
• Task list, filtered to my team’s tasks
• Create / edit / delete tasks
• Assign tasks to teammates
• In-app notifications when assigned
• Email notification on assignment via Resend
• Custom domain tasks.yourdomain.com

Step 1 — The first prompt

Don’t try to describe everything at once. Start with the core loop: auth → team → tasks. We’ll add notifications and styling later.

A team task tracker. Each user signs in (email or Google), then creates or joins a team using a short invite code. Once on a team, they see a list of tasks assigned to anyone on the team.

Tasks have: title, optional due date, priority (low / medium / high), and an assignee (one of the team members). Anyone on the team can create, edit, or delete tasks.

The home page shows my team’s tasks grouped by status (open vs done). I can mark tasks done with a checkbox.

Paste this in. Leave the agent on Claude Code. Submit.

Step 2 — Read the plan

Plan mode runs first. You’ll see something like:

Read it carefully. Look for:

• Schema — should have teams, users, tasks tables (and maybe a teamMembers join table).
• Indexes — tasks should have at least by_team so we can list a team’s tasks fast.
• Auth provider — built-in auth, with email + Google enabled.
• Pages — sign-in, onboarding (create/join team), home (task list).

If anything’s off, edit the plan or reply to clarify. For example:

The teamMembers table should have a role field — either ‘admin’ or ‘member’. Admins can invite new members and delete tasks; members can only edit their own tasks.

When the plan looks right, click Approve and build. Code generation runs for 60–90 seconds.

Step 3 — Try it

When the build completes, click the preview URL.

1. Sign up

   Use a real email or click Google. You’ll land on the onboarding page.

2. Create a team

   Pick a team name. You’ll get an invite code — copy it.

3. Open a second browser

   Incognito window. Go to the same preview URL. Sign up with a different email. Use the invite code to join the team.

4. Create some tasks

   From either browser, create tasks and assign them to either user. Watch them appear in real time on the other browser. That’s Convex’s reactive sync — no polling, no refresh.

You have a working multi-tenant SaaS with real-time data, built-in auth, and a team-based permission model. In about 90 seconds.

Step 4 — Add notifications

Tasks work, but assignees don’t know they were assigned anything. Let’s fix that with two prompts.

In-app notifications

Add an in-app notifications feature. When a task is assigned to someone, create a notification row for them with the task title, who assigned it, and a link. Show a bell icon in the header with the unread count. Clicking the bell opens a dropdown with the recent 10 notifications. Clicking a notification marks it read and navigates to the task.

This produces a new schema table (notifications) with an index on userId and read, a Convex mutation that creates a notification on task assignment, and a <NotificationBell /> component in the header.

Test it: have one browser assign a task to the other user; watch the bell update in real time.

Email via Resend

When a task is assigned, also send the assignee an email via Resend. Subject: “[Team Name] You’ve been assigned a task”. Body: the task title, due date if any, who assigned it, and a button linking to the task.

vly will ask you to provide a Resend API key. Generate one at resend.com, paste it into the integration setup dialog, and confirm. The agent then writes a Convex action (because actions can call third-party APIs) that fires from the assignment mutation.

Test it: assign a task to your second account. Check that account’s inbox.

Resend has a generous free tier (3,000 emails/month). For testing, use Resend’s test API key and the [e-mail] address — emails are accepted but not actually delivered, perfect for development.

Step 5 — Polish the design

vly’s default output uses Tailwind + shadcn/ui — already polished. But you’ll likely want personal touches:

Brand color

Change the primary brand color to a warm orange (#F97316). Use it on
the primary buttons, the active sidebar item, and the assignment chip.

Each prompt produces a new revision. Use version history to compare or roll back.

Step 6 — Deploy to a custom domain

Your app is live at something.vly.app. To use your own:

1. Open Settings → Domains.
2. Enter tasks.yourdomain.com.
3. Add the CNAME record vly shows you at your DNS provider:
   • Name: tasks
   • Value: cname.vly.app
4. Wait ~5 minutes. SSL provisions automatically via Let’s Encrypt.

For an apex domain (example.com instead of tasks.example.com), use the ALIAS / ANAME flow described in Custom domains.

What you’ve learned

The prompt → plan → code → deploy loop

The same loop powers every change you make. Tiny edits or major rewrites — same flow.

When to use Plan vs Code mode

Plan for new features and schema changes. Code for tiny tweaks.

Multi-tenant patterns

Teams, invite codes, scoped queries. The pattern repeats across every B2B SaaS.

Adding integrations by prompt

Resend was three sentences. Stripe, Twilio, OpenAI — all the same shape.

Next

Read recipes for similar apps

The cookbook has end-to-end builds for marketplaces, chatbots, dashboards, and more.

Master the prompting craft

The five-layer method. The most important 20 minutes you can spend on vly.

Convex deep dive

Schema patterns, queries, mutations, actions. The backend your app runs on.