From website to app

Remember the contact form from the end of Chapter 3? You built it, it looked great — and when you hit submit, nothing happened. The data went nowhere. Your site can show things, but it can't save anything.

That's the difference between a website and an app. A website is a brochure. An app can receive, store, and share data between people.

What you'll build

A form builder. You'll create a form, share a link, and when someone fills it out, their response shows up on your screen. Two different people, two different URLs, one shared database.

That's the key insight here: your personal site was just for you. This app involves two people — the person who creates the form and the person who fills it out. They need to see different things. The creator needs a builder and a dashboard. The respondent needs a clean page to submit their answers. That's why you need a backend — a server and a database that both people connect to.

Your second app

Your portfolio site is done. That's your first shipped project — multi-page, styled, prerendered, live on the internet. Nice work.

This next app needs things your portfolio site doesn't have: a server that processes data and a database that stores it. So you'll start from a new template that has those built in.

Go to the Gista.js SSR template. Click Use this template, name it ssr, select Private, then click Create repository. Once it's ready, clone it to your computer — same steps as Chapter 2.

Clone

Open terminal, run pnpm install and pnpm dev to start the dev server.

Running

You'll notice this starter looks simpler — just a bare page. That's intentional. The SSR + database plumbing is already wired so you can focus on building features with your AI.

Why a new template?

In Chapter 3, you used prerendering to build HTML for each page at deploy time. That worked because your portfolio pages are fixed — the content is the same for every visitor.

But a form builder is different. /forms/5 shows a form that someone created after you deployed. You can't prerender a page for data that doesn't exist yet. You need the server to build the HTML on demand, every time someone visits. That's server-side rendering — SSR.

?What is SSR?

Here's the plan

  1. Install database tools — A migration tool and a database viewer
  2. Set up a database — Where your app stores data
  3. Build the form creator — Save forms with a title and fields
  4. Share and collect responses — A public link anyone can fill out
  5. Set up Turso — A production database for your live app
  6. Ship it — Deploy it live

By the end, you'll share a real link with someone and watch their response appear. Let's start by giving your app a place to store data.