Build a production-shaped app

Build and review Field Notes

Complete a small App Router application and verify routes, mutations, server boundaries, errors, accessibility, and its production build.

8 minute lesson

~~~

Finish the project by connecting the pieces: a notes list, dynamic note pages, a new-note form, useful loading and error states, and a health endpoint.

Review it as a system, not a set of screenshots. Write a route map that names what runs at build time, on the request-time server, and in the browser. Confirm Client Component boundaries contain only the interaction that needs them and receive serializable props.

Test direct URL loads and client navigation because they exercise different paths. Request a valid note, an unknown note, invalid parameters, and a deliberately failing data source. Slow the data request and check that the loading boundary appears without replacing more of the page than necessary.

Exercise mutations separately. Submit valid and invalid forms, repeat a request, and confirm authorization and validation run on the server. Check that committed data becomes visible through the chosen invalidation strategy and that a failed write does not redirect or claim success. A disabled button improves feedback; idempotent server behavior protects data.

Finally, build with a missing environment value and inspect HTML and browser JavaScript. Check image candidates, font downloads, keyboard navigation, focus after errors, response statuses, and server logs. Development success is not production evidence: rendering, caching, and error output can differ.

npm run lint
npm run build
npm start

Complete the application and write a short README with its routes, runtime boundaries, configuration, cache decisions, and verification commands. Ask another person to create and open a note using only the interface, then record every place their path differed from yours. Deployment remains a separate concern covered by the Vercel course.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →