What screens do most data apps share?
A handful of screen patterns show up in nearly every data app. Once you see them as reusable shapes, you stop rebuilding each page from scratch.
Five patterns, not five pages
Open any task tracker, inbox, or admin panel and the same shapes hide under the branding: a list that drills into a detail, a multi-step form, a record whose label changes through a workflow, a file upload, an in-app notification. Name the shape first, then pick the implementation.
How do I structure list-to-detail navigation in the Next.js App Router using dynamic route segments and nested layouts?
State that survives the back button
A multi-step form comes down to where the answers live and how you decide a step is done. If someone hits back, they should find what they already typed still sitting there.
What state do I track for a multi-step form, and how do I keep it across steps without losing data when the user goes back?
Status is a rendering problem
Map a status to a label, a color, and a set of allowed actions, then pull that map out of the component so conditionals do not scatter across the tree.
I have a record with statuses [list your statuses]. How do I drive its label, color, and allowed actions from one map instead of scattering conditionals across the component tree?
These screens are known shapes, not one-off designs. Recognise the pattern first, then build it the same way every time.
Additional Resources
Explore these carefully curated resources to deepen your understanding and practice the concepts covered in this lesson.