7.
Completing the Static Catalog
Written by Eli Ganim
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
In the previous chapter, the Learning Tracker got its face: a responsive card grid, color-coded badges, styled buttons with honest focus states — all sitting on semantic, accessible markup. Between the data model, the component set and the styling, you’ve now touched every layer of a static React feature.
This chapter finishes the job. Not with a pile of new concepts, but with the professional pass that separates “works on my machine” from “ready to hand to a teammate.” You’ll reorganize the src folder so every file has an obvious home, extract the last two components the catalog deserves, add course categories, sweep out the remains of the Vite template and run a final quality audit.
Consolidation chapters are where knowledge settles. Everything you do here uses skills from Chapters 2 through 6 — so if any step feels foggy, that’s a signal worth following back to its chapter. By the end, Part I is complete: a static catalog you could genuinely ship, structured so that Part II can build on it without a demolition phase.
Surveying the Target
Professionals start a refactor by fixing the destination, so here’s yours — the completed static catalog:
Squint, and it looks like your current app, with one visible addition: a small category label above each course title. The bigger changes are the ones a screenshot can’t show. Here’s the component tree you’re heading for:
Two new components appear. CourseList takes over the job App has been doing inline — rendering the card grid — and also owns the decision of what to show when the list is empty, delegating that to a small EmptyState. App shrinks to what it should be: the page’s composition root.
And here’s where every file will live:
Note: Every file in this structure is a module — it declares what it depends on with imports, and what it offers with exports. Folders add no behavior; they’re purely for humans, so the bar for creating one is “does this make things easier to find?” Some codebases add index.ts files that re-export a folder’s contents to shorten import paths. That’s a real pattern you’ll meet in the wild, but it’s extra plumbing this project doesn’t need — so it stays out, and every import names its file directly.
Resist the urge to go further — a hooks folder with nothing in it, a utils folder “for later.” Structure should trail the code, not lead it. Three folders is what this app needs today.
Carving Out the Folders
Time to move house, in small steps that keep the app compiling. First, the types. Create a folder src/types, and in it a file course.ts. Move both type declarations — CourseLevel and Course — out of src/courses.ts and into the new file, so it contains exactly:
export type CourseLevel =
| 'Beginner'
| 'Intermediate'
| 'Advanced'
export type Course = {
id: string
title: string
description: string
level: CourseLevel
durationHours?: number
isFavorite: boolean
}
import type { Course } from './types/course.ts'
import type { Course } from '../types/course.ts'
import { courses } from './data/courses.ts'
import type { CourseLevel } from './types/course.ts'
import logo from '../assets/logo.svg'
import PageHeader from './components/PageHeader.tsx'
import CourseCard from './components/CourseCard.tsx'
Finishing the Component Set
App still hand-rolls the card grid and the empty-state message. That’s list-presentation logic, and it deserves a component of its own. Start with the smaller piece. Create src/components/EmptyState.tsx:
type EmptyStateProps = {
message: string
}
function EmptyState({ message }: EmptyStateProps) {
return <p className="empty-note">{message}</p>
}
export default EmptyState
import CourseCard from './CourseCard.tsx'
import EmptyState from './EmptyState.tsx'
import type { Course } from '../types/course.ts'
type CourseListProps = {
courses: Course[]
}
function CourseList({ courses }: CourseListProps) {
if (courses.length === 0) {
return (
<EmptyState message="No courses match this level yet." />
)
}
return (
<section className="catalog" aria-label="Course catalog">
{courses.map((course) => (
<CourseCard key={course.id} course={course} />
))}
</section>
)
}
export default CourseList
import CourseList from './components/CourseList.tsx'
<CourseList courses={visibleCourses} />
Adding Course Categories
The catalog’s last missing feature: Courses belong to subject areas, and the card should say so. By now this is a drill you know — extend the type, satisfy the data, render the field, style it.
export type CourseCategory = 'Frontend' | 'Languages' | 'Design'
category: CourseCategory
category: 'Frontend',
<p className="category">{course.category}</p>
.category {
margin: 0;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6a7381;
}
Testing the Three States
A feature pass touched the list pipeline, so re-run the manual test from Chapter 5 — full, filtered, empty. The full state is on your screen. For filtered, set levelFilter in src/App.tsx to 'Beginner' and save:
Sweeping Out the Template
Every generated project carries scaffolding that shipped for the sake of the demo page you deleted in Chapter 1. Time to clear it — but never delete blind. The habit to build: Search for references first. Press Cmd-Shift-F (Ctrl-Shift-F on Windows/Linux) to search the whole project for each file’s name; if nothing imports or links it, it can go. Four files fail that test:
<title>Learning Tracker</title>
Running the Final Audit
Close Part I the way you’d close a real feature — with the quality pass from Chapter 6, compressed into a minute.
Challenge: Launch the Career Track
The catalog’s owners return with expansion plans: a career-skills category. Ship it end to end:
Key Points
- Organize by role: Components render, data holds content, types define shape — and structure should trail the code, never outrun it.
- Every file is a module; imports are its declared dependencies, and
../climbs one folder before descending. - Consolidate shared types into one source — like types/course.ts — instead of scattering or duplicating shapes.
- Skip re-export index files until import paths actually hurt; every layer of plumbing must earn its place.
- An early return cleanly splits a component that renders two entirely different trees — the grown-up sibling of
&&. - Give empty states a named component; “nothing to show” is a feature, and features deserve a home.
- Extending a domain type makes TypeScript enumerate every place the data must catch up — the compiler as project manager.
- Never delete a file without searching for references first, and clean template leftovers from generated projects.
- Close features with an audit pass: keyboard, landmarks, headings, data states and a clean build.
Where to Go From Here?
Take a second to appreciate the distance. Seven chapters ago, this was npm create vite and a blinking cursor. Now it’s a typed, componentized, accessible, organized catalog — static by design, and complete on those terms. That’s Part I of this book, and Part I of every React app: Get the rendering story right before anything moves.