Whirlwind tour: Build a full-stack app with InstantDB

In this tutorial we'll walk through creating a full-stack app with InstantDB. Within 5-10 minutes you'll have an app that runs on your computer, and if you like, can be deployed into the wild!

  1. Login to Instant in the terminal
  2. Scaffold a starter Instant app
  3. Prompt an LLM to build us an app (This is the fun part!)
  4. Deploy the app to Vercel

Step 1: Log in to Instant via instant-cli

As a first step let's make sure you're logged in. Run the following command in the terminal with your favorite package manager.

$ npx instant-cli login

This will open up a browser window where you can log in to your Instant account or sign up if you don't have one yet.

Step 2: Scaffold a starter instant app

Now that you're authenticated any app you make will persist unless you delete the data later — woohoo!

As a next step we'll use create-instant-app, our CLI tool, which makes it super easy to get started with a new Instant project. Run the following in your terminal.

$ npx create-instant-app

Go through the prompts to select your framework and llm. Once the app is generated change into the new directory and go on to step 3!

Step 3: Prompt the LLM to build us an app! (This is the fun part!)

Woohoo! Now that we've got everything set up, we're ready to build an app! Fire up your editor (cursor, windsurf, zed, etc.) or your CLI tool (claude, gemini, etc) and type up a prompt. Hit enter and watch the magic happen!

Here are some example prompts for inspiration:

  • Habit Tracker
  • Trivia Game
  • Job Board

Create a habit tracking app where users can create habits, mark daily completions, and visualize streaks. Include features for setting habit frequency (daily/weekly), viewing completion calendars, and tracking overall progress percentages.

Keep the code to < 1000 lines.

Seed with 5-6 sample habits like "Exercise", "Read", "Meditate" with 30 days of completion history.

Debugging Common Issues

Run into an issue? Here are solutions to common problems you might encounter:

  • General troubleshooting
  • Validation failed for query
  • Validation failed for tx-steps
  • Missing required attributes
  • Permission denied: not perms-pass?
  • Dev server not running

Step 4: Deploy the app to Vercel

Once you've got a working app we can get it live by deploying to Vercel! Before we deploy, let's verify there are no build errors. In the terminal run:

$ npm run build

If there are build errors, paste them into your agent to get them fixed up. Make sure your app still works as expected after your agent gets the build to pass:

$ npm run dev

If all looks well let's kick off a deploy!

$ npx vercel --prod

Your app should be live after vercel finishes deploying! If you see any error about a missing app-id it means we need to add it to the vercel environment. Run this command

$ npx vercel env add NEXT_PUBLIC_INSTANT_APP_ID production

and it will prompt you to paste your app id. You can find the value in your .env file. Redeploy and you should have a fully-working app.

Huzzah!

If you're curious, you can go to your Instant dashboard and see your data in the Explorer tab as you interact with your app. And tag us on @instant_db, we'd love to see what you built!