Capstone project for React for the Web

Build the store manager's morning stock screen

Ama, a Mangrove store manager, starts each day by checking low stock and fixing counts before the first delivery arrives. Build the screen she uses: a searchable list of low-stock items with the search in the URL, an adjustment form with reasons that validates on the server and updates the row optimistically, and a summary of today's app orders that refreshes every 30 seconds, all working on a slow store connection and a cheap phone. Use Next.js with the App Router and a small fake API or database of about 2,000 items. Plan for 6 to 10 hours.

What you hand in

A Next.js app with the three parts of the screen, in a public repository
Component tests with Testing Library and one Playwright end-to-end test of the morning flow
A short note on what runs on the server and why, with Lighthouse or Web Vitals numbers before and after one fix

Check your work

Tick each item when your project meets it. Be strict: this is the rubric the reviewer uses.

Components have clear responsibilities and typed props; derived values are computed during render and no effect is used where an event handler or derived value would do
The list loads on the server with the search and filter in the URL, and loading, empty and error states are handled everywhere data loads
The adjustment form validates on the server, shows field errors linked to their inputs, prevents double submits and rolls back an optimistic update when the server rejects it
The page is usable with a keyboard and a screen reader: real buttons and labels, managed focus, and live regions for saved messages and order counts
The list stays responsive with 2,000 items on a throttled CPU, with one measured fix such as deferral or virtualization
Tests query by role and label, use user-event and a network mock at the boundary, and the end-to-end test covers search, adjust and the saved result

0 of 6 checked

Model answer

The model answer opens once your capstone passes the review, so you can compare your work with an outline of a strong submission.

Hand in your capstone

Your links are checked automatically, then the work is scored against the rubric above, item by item, with comments. A pass counts toward the course certificate and shows on your profile.

Loading…