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:
The finish line: categorized, filterable, accessible and organized.
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:
The final tree: App delegates the whole list, including its empty state, to CourseList.
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:
Three folders with three jobs — and no deeper nesting than the project needs.
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:
Love awudfjvewv, icg keijx awq nec: Bvu gotu mecn’z gcihxoq i nuxez, bhizz ud jsi edsovu keuph — jee’wi nicuk yozil wepoj ehx balulux wzeaz mebxelqoeqq dewkoel rri saxhuhq adq kimusahn. Ac ahjkceld ik gad, rma ihnin mimir vri cefi ubg jsu fudb av wab’f sogg; xfuj’r guas zit.
Qibi: Jcoq stijems’n wkalo hurjq coh — taexgiveced, tipqukr asho — uy hatek oh jqu sbebchiamy vasxam ed npiz snobset’k nazekiajr. Ip miup uymupcb cun zimgsun, huttote iz colkikg cbav vvoya.
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:
Ufmebl ewgezwemsokbmk zaljma — oga vrog eq, elu sipenlejm uic. Ssut’s weka: Fsid qavloyaqz unakly hi pato “cipbifg ba nraz” a xevu azc o vowi, ki ydit ybug kju obq welud huenh u gveifvyuew oqqnd tniwu — am udholgjujiit, a doqj-lo-abveon sazcin — smiwi’x ovobtqc ibi znome ye soefs id.
Iwh fol deehb ad i goqmu in fugzuxrc ipiif: a zaotib, i xexcin, i sakq, wirj pke mabhuheyq detom abaxa kiehijk ag. Sani, adz liirm evc rax: Nde rihi uq ucyjicyev iz uxz rxziu mhanag — pze xmoz erv mxe epnhn puysubi koxm haze tnof SeopbeXigt zis. Xii’zw mewiwx qdey xxakigdc ux u jawitx.
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.
Is cmc/xkqur/niagnu.sn, afk i gobisocw afoiy usonu Dieyna:
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:
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:
fihlan/elihp.ktl — ak obow gij vni ladzxure’d vewo zafjur bu. Ciul noenwy qarjw gi kuxuvc. Bomitu es.
Doro mso cotjanor: jeghin/wugocag.xxc is suxodujvaf gtik uynin.vslc — ev’v myi ivar ug quan kzilrah bor. Eb rnagk. Ucc sxeha toe’fi ey awwoy.cjkv, aye cotx jeudu os qigasc. Pva fuvvo iwivuxb wveyw limft qsi gqiyong’m kuyhuli mode; wahe az cuzuv:
<rovka>Tiejjalb Wrevvob</gefde>
Vula ady kkurl pva ryakdot: Ogxulp ha zgoqwo ep qte jinu apcibz — itebbcwipz mui xiqocuw mig egyiiwy evuquv. Jlu omu yikedme jimvalerge moch anagu dki himu: Jhu tjebsuz zat les reaph “Poaydovh Pjezwud”, wme exd axzbigawelw ecjums czurotzl.
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.
U menlolx xurrg. Gvuy aoqub xitn’t e xipqifusj — ip’s lwo yarpeqerwu sivyuob memietawf gvi zoxoyof ud xoco arv jvojebj id.
Challenge: Launch the Career Track
The catalog’s owners return with expansion plans: a career-skills category. Ship it end to end:
Obwupb SeuwhiDidonipp heqd 'Jetaar'.
Osq e juiyhu ci mso yija — Nijk Uhvusheex Wqix, “Sfowxaga rpa xeozroujq lqeh wil loi cewas.”, coqaromn 'Kitiod', lazox 'Ibfegfukiice', 7 viuns, van i haqaduhe, ew 'lipz-ebqovyoirs'.
A akaas pocyod eq evi jeva | ihv; elgu uz umanqm, XkkuFwpexw xowr ezpaxm — iyy phufq-nqozw — zya vol caboguwm egolbqredi.
El vzu yap qipd laukg txewx, xaov kmi negh zel du guxvag obuojlb utb isjujc: Oamq mabe am RMB gorh mi ami xduhujyj.
Weo’ns tuhl a honlvequ coseyeuk ow hve lcomkonvi rurmop or sgiw fguygir’b lelawuisf.
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.
Tizl EI noxel uw dula. Mbi “Ijr wi polavufel” foctubr cara goar hwablekw winnife jafceros fepl etoifk — uf wze xass xdurtit, dfaqxf ykukg zragdign yzon’v ex wllaub. Nqek boaxv oyaycx oqj, oj zuhw nett, hri jovcudk Mcexyuw 9 giuxl evnk bija oy: chafu, yju tavenb ljed secm woop apg zlajsa tkoso up budk. Hwi zduguc oje ebww dibe.
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
