Shipping your first feature

A practical path from a blank page to a feature your users can actually use.

Cover Image for Shipping your first feature

The fastest way to understand a codebase is to build something small in it. Here's a route that works well for a first change.

1. Add a page

Create a route under the app directory and render a placeholder. Seeing your page in the browser confirms the dev server, routing, and layout are all behaving before you add any logic.

2. Load some data

Wrap a server function around your data source and call it from the page. Because the data layer is typed end to end, mistakes surface while you type rather than in production.

3. Make it writable

Add a form and an action to persist a change. The template already handles the boring parts — validation, auth, and error states — so you can focus on the behaviour that's unique to your product.

4. Ship it

Open a pull request. The same checks that run locally run in CI, so a green build is a strong signal the change is safe to deploy.

That's the whole loop: page, read, write, ship. Repeat it a few times and the rest of the codebase stops feeling unfamiliar.

Get an AI summary of Template Four