Vibe Coding: Store Data¶

🎬 Video

Right now your app is a beautiful empty shell. The decisions you enter will only be visible to you because they are stored in your browser's database. In this chapter you will fix that by adding a backend, a shared database, and a proper Decision entity with full create, read, update, and delete support.

When you are done, your decisions will be saved to a real database in Azure and will still be there when you come back tomorrow, on a different device, or after sharing the link with a colleague.

What you are adding¶

Three things get added in sequence, each building on the last:

You will trigger each one with a single message to Copilot.

Cost¶

The remote store uses Azure Cosmos DB. As covered in the prerequisites, the shared AFRY subscription does not have a free tier available, so your database will run on serverless billing. For a small personal app, this typically costs well under €1 per month.

Step 1. Ask Copilot to add a store¶

Tell Copilot:

"I want to add a shared store so my data persists."

Copilot will detect that a backend does not exist yet, scaffold one automatically, then provision the Cosmos DB account and wire the connection into the backend. It reads your docs/resources.md to find the resource group - you do not need to answer any questions.

This takes about 2-3 minutes in total. You will see progress in the chat. You do not need to do anything.

Step 2. Add the Decision entity¶

With the store in place, you can now add the actual data type your app needs.

Ask Copilot to add the Decision entity¶

Tell Copilot what you want to store. Be descriptive - the more context you give, the better the generated type will be:

"I need to store decisions. Each decision has a title, a description of what was decided, the reason for the decision, and a date. Decisions should be editable and deletable."

Confirm the inferred interface¶

Before writing any code, the vibe-add-entity skill will show you the TypeScript interface it has inferred from your description. It will look something like this:

interface Decision {
  id: string;
  userId: string;
  title: string;
  description: string;
  reason: string;
  date: string;
  createdAt: string;
  updatedAt: string;
  _v: number;
  _type: string;
}

Read through it and make sure the fields match what you had in mind. If something is missing or named wrong, say so and it will revise. When you are happy with it, confirm and the skill will generate all the code.

Watch it generate¶

Copilot will now create:

• The TypeScript type definition
• A repository with create, read, update, and delete operations
• An Azure Functions endpoint your app can call
• The UI components to list, add, edit, and delete decisions

When it is done, the app is fully functional end-to-end.

Step 3. Push to GitHub¶

The new code is on your machine but not yet live. Push to GitHub to trigger the deployment:

"The entity looks good - can you push to GitHub so the changes go live?"

Copilot will commit any uncommitted changes and push to main. The GitHub Actions workflow will run and deploy the updated app. When the workflow finishes, your live app will have full Decision Log functionality.

Running locally¶

Now that the app has a backend, running it locally requires two terminals:

The Vite dev server is configured to proxy any /api/* requests to the Functions host, so everything works together automatically.

What just happened¶

Your app now has a complete data layer. Decisions are stored in Cosmos DB in Azure and are tied to the signed-in user - each person sees only their own decisions.

You are ready to continue with 16.7 - Talk to an LLM.