> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/getting-started/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](/integrations/resend).
* A custom domain and SSL.

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

<Note>
  This walkthrough assumes you've read the [Quickstart](/getting-started/quickstart). If you haven't started a project yet, start there.
</Note>

## 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.

<div className="vly-prompt">
  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.
</div>

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:

<div className="vly-prompt">
  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.
</div>

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.

<Steps>
  <Step title="Sign up">
    Use a real email or click Google. You'll land on the onboarding page.
  </Step>

  <Step title="Create a team">
    Pick a team name. You'll get an invite code — copy it.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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](/convex/queries) — no polling, no refresh.
  </Step>
</Steps>

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

## 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

<div className="vly-prompt">
  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.
</div>

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

<div className="vly-prompt">
  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.
</div>

vly will ask you to provide a [Resend API key](/integrations/resend). Generate one at resend.com, paste it into the integration setup dialog, and confirm. The agent then writes a [Convex action](/convex/actions) (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.

<Tip>
  Resend has a generous free tier (3,000 emails/month). For testing, use Resend's test API key and the `delivered@resend.dev` address — emails are accepted but not actually delivered, perfect for development.
</Tip>

## Step 5 — Polish the design

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

<CodeGroup>
  ```text Brand color theme={null}
  Change the primary brand color to a warm orange (#F97316). Use it on
  the primary buttons, the active sidebar item, and the assignment chip.
  ```

  ```text Typography theme={null}
  Use the 'Geist' font from Google Fonts for headings. Body stays default.
  ```

  ```text Layout theme={null}
  Move the notifications bell to the top-right next to the avatar.
  Add a subtle separator between the bell and avatar.
  ```
</CodeGroup>

Each prompt produces a new revision. Use [version history](/building/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](/deployment/custom-domains).

## What you've learned

<CardGroup cols={2}>
  <Card title="The prompt → plan → code → deploy loop" icon="workflow">
    The same loop powers every change you make. Tiny edits or major rewrites — same flow.
  </Card>

  <Card title="When to use Plan vs Code mode" icon="git-branch">
    Plan for new features and schema changes. Code for tiny tweaks.
  </Card>

  <Card title="Multi-tenant patterns" icon="building">
    Teams, invite codes, scoped queries. The pattern repeats across every B2B SaaS.
  </Card>

  <Card title="Adding integrations by prompt" icon="puzzle">
    Resend was three sentences. Stripe, Twilio, OpenAI — all the same shape.
  </Card>
</CardGroup>

## Next

<CardGroup cols={3}>
  <Card title="Read recipes for similar apps" icon="utensils-crossed" href="/recipes/overview">
    The cookbook has end-to-end builds for marketplaces, chatbots, dashboards, and more.
  </Card>

  <Card title="Master the prompting craft" icon="message-square-code" href="/prompting/the-five-layer-method">
    The five-layer method. The most important 20 minutes you can spend on vly.
  </Card>

  <Card title="Convex deep dive" icon="database-zap" href="/convex/overview">
    Schema patterns, queries, mutations, actions. The backend your app runs on.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.