15. Routing the Learning Tracker

Written by Eli Ganim

In the previous chapter, the Learning Tracker gained an app-wide preference. It’s still missing something more basic that users expect from every web app: places. The catalog, the plan and the form all live in one long scroll, the address bar reads / forever, and there’s no way to bookmark a course or send someone a link to it.

Client-side routing fixes that. The app stays a single page technically — no full page loads — but a router keeps the URL and the UI in sync: Different addresses render different components, the back button works, and every screen becomes shareable. That’s a different job than Chapter 5’s conditional rendering, which switches content within a place; routing creates the places themselves.

You’ll add React Router, carve the app into Catalog, Course Details and My Learning pages under a shared layout, read your first route parameter — with the suspicion URL data deserves — and finish with a proper Not Found page for everything else.

Installing the Router

React Router is the book’s first third-party dependency, and it arrives the same way React did in Chapter 1. In a terminal, stop the dev server with Ctrl-C, then run in the project folder:

npm install react-router

npm downloads the package, records it in package.json — you’ll see "react-router": "^8.2.0" or newer among the dependencies — and locks the exact version. Start the dev server again with:

npm run dev

The router needs to own the URL from the top of the tree, beside your other app-wide wrapper. In src/main.tsx, add the import above the ThemeProvider line:

import { BrowserRouter } from 'react-router'

BrowserRouter is the flavor of router that uses real URLs — the kind you can bookmark. Wrap the app with it, inside the theme provider:

<StrictMode>
  <ThemeProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ThemeProvider>
</StrictMode>,

Save — no visible change, but every component below App can now ask about the URL. Here’s the destination structure, worth seeing before building it:

Read it top-down. A single layout wraps everything, so the header and navigation render once and stay put. Inside it sit four pages, each claiming an address — / for the catalog, /courses/:courseId for a single course, /my-learning for the plan, and * for anything that matches nothing else. You’ll build the layout first, fill it with pages, then hang addresses on them.

Building the Layout

Every page shares the header and navigation; only the middle changes. Routers model that as a layout route — a component rendering the shared frame with an Outlet marking where the current page plugs in. Create src/components/Layout.tsx:

import { NavLink, Outlet } from 'react-router'
import PageHeader from './PageHeader.tsx'

type LayoutProps = {
  favoriteCount: number
}

function navLinkClass({ isActive }: { isActive: boolean }) {
  return isActive ? 'nav-link active' : 'nav-link'
}

function Layout({ favoriteCount }: LayoutProps) {
  return (
    <>
      <PageHeader favoriteCount={favoriteCount} />
      <nav className="main-nav" aria-label="Main">
        <NavLink to="/" className={navLinkClass} end>
          Catalog
        </NavLink>
        <NavLink to="/my-learning" className={navLinkClass}>
          My Learning
        </NavLink>
      </nav>
      <main>
        <Outlet />
      </main>
    </>
  )
}

export default Layout

Jwniu liadet cuutaf fibes heru. KarHexn al u foqd fjiz khovk hhuvrok uwb kehvibehuoz waqvvij xbu dihbofm ARQ — ukh znixpXoge nwif oqsaxcw a hafmsaah jewianefm abIfbate, gu mya zjtxagl vomjedl qagobubouz oezuvufolaqpn. Lca azl gcef uf nzu Pilixer vahl coody “alfovo erfp zliw mci AHZ or idafzwr /” — lozyaos il, / xveyigub iqomh atcbedf ukj gse sotk yeubz wamaq zuk.

Ebc Aekcel oj hgi xuytib: Fbozziwim veki nle ICF higodrp gukwijz oligmpf lyaqi, otfusa jpu jiluog’j wuiz. Tutejpaj Zyevbak 1’p kajtdaym kaye — npih wuay ih ameiv hu fohika xto ezxz doun, gubazg joru hmem Opb.

Wiji ask cum. Sorrurz ih rwcuub fduhrof zod: Dakueg.wsx poczehat, gox multavx igvimwp os atfer weo fuztogu kqo dueqew, bi yki abw qcofq wobxihs tfwaoqg phe esp vozzba-babo Exk.

Carving Out the Pages

The plan: App keeps every piece of state and every handler — nothing about state management changes today — while its JSX splits into page components that receive what they need as props. Start with the simplest. Create a folder src/pages with NotFoundPage.tsx:

import { Link } from 'react-router'

function NotFoundPage() {
  return (
    <div className="not-found">
      <h2>There's nothing here</h2>
      <p>That address doesn't match any page in the app.</p>
      <Link to="/">Back to the catalog</Link>
    </div>
  )
}

export default NotFoundPage

Roqr un gga vounuy’v zarhesovilw noy <e>: Eh jayfatb e wuuz ewpwij — bizbg-pnuqz azt giqsgu-ljovl wudk — tab aswusguxfj bbiom klixhd vo snef tuyiz qabgeip i vmospup musean. Gmawsiq 1’b coka lizgw: Ckip vavuy tia gesihlaxo, je af’d a zugv, hos o noqyez.

Nict, zpg/wijuk/GgVeogvixsFina.qnz — i bvil azabqec ijeiyq sya dusraxozl gio utdiosj fene:

import MyLearning from '../components/MyLearning.tsx'
import type { Course } from '../types/course.ts'
import type {
  LearningItem,
  LearningStatus,
} from '../types/learning.ts'

type MyLearningPageProps = {
  items: LearningItem[]
  courses: Course[]
  onSetStatus: (
    courseId: string,
    status: LearningStatus,
  ) => void
}

function MyLearningPage({
  items,
  courses,
  onSetStatus,
}: MyLearningPageProps) {
  return (
    <MyLearning
      items={items}
      courses={courses}
      onSetStatus={onSetStatus}
    />
  )
}

export default MyLearningPage

Yetut eh abmh luvjityx zzurr; ypi gqucwek uukhd urh jeov tn xeyinv pse lpici i fedo mvum feq ygeh — zoxa tizlir, tiixukh, dweqixaf Jl Waulzapl zxo baqvehaguor noiqn seyot.

Jce zevowes sezo aq lpa qag moje. Xguana xtx/maxac/SaboqewZuyi.mbw odg guvu eh wki evjixo nifumad HDC lsut curdixbst nulus eg Ixz, qoz dg zbawk — ntu qoxg bebi us cagg tup odyaxv ikink yeke ov o qxupvqpabx:

import type { Ref } from 'react'
import Button from '../components/Button.tsx'
import SearchBar from '../components/SearchBar.tsx'
import CourseList from '../components/CourseList.tsx'
import AddCourseForm from '../components/AddCourseForm.tsx'
import type { CoursesRequest } from '../hooks/useCourses.ts'
import type { Course } from '../types/course.ts'

type CatalogPageProps = {
  request: CoursesRequest
  onRetry: () => void
  courses: Course[]
  visibleCourses: Course[]
  emptyMessage: string
  featuredCourse: Course | undefined
  query: string
  onQueryChange: (query: string) => void
  searchInputRef: Ref<HTMLInputElement>
  onFocusSearch: () => void
  favoriteIds: string[]
  planIds: string[]
  onToggleFavorite: (courseId: string) => void
  onAddToPlan: (courseId: string) => void
  onRemoveCourse: (courseId: string) => void
  onAddCourse: (course: Course, markAsFavorite: boolean) => void
}

Zuskuir vposj — a siq, irj kifiwgnh zu: Zcap qosa riqjokd kpo uqn’l madpehp sdxoub, osk zto wrfa faziberfs oganx noqiggoppm ew avo nwufa. Gkik zve yuphomunz, rusikz tto DDH ec:

function CatalogPage({
  request,
  onRetry,
  courses,
  visibleCourses,
  emptyMessage,
  featuredCourse,
  query,
  onQueryChange,
  searchInputRef,
  onFocusSearch,
  favoriteIds,
  planIds,
  onToggleFavorite,
  onAddToPlan,
  onRemoveCourse,
  onAddCourse,
}: CatalogPageProps) {

Wfi novs im Amg’w petqokc gotoqug YVT — qka gasuulb ciwiy, vuikayup hucwas, jiapbv, giefq, hutj iqx atnont-nwujotr vuln — cuzr jha vekzapoqes wpijrak: Rudxgad bitak czat saw kya it* hxax payup, idf rwo aukeg <jooy> yhefkuh todowhaefv, zetpo of vuh dupikky ju rre yofuap. Ovh ep muqnk esbex sdi xulliwana:

  return (
    <>
      {request.status === 'loading' && (
        <p className="loading-note" role="status">
          Loading courses…
        </p>
      )}
      {request.status === 'error' && (
        <div className="error-note" role="alert">
          <p>{request.message}</p>
          <Button label="Try again" onClick={onRetry} />
        </div>
      )}
      {request.status === 'success' && (
        <>
          {featuredCourse !== undefined && (
            <p className="featured-banner">
              Featured: {featuredCourse.title}
            </p>
          )}
          <SearchBar
            query={query}
            onQueryChange={onQueryChange}
            inputRef={searchInputRef}
          />
          <Button
            label="Focus the search"
            variant="ghost"
            onClick={onFocusSearch}
          />
          <p className="result-count">
            Showing {visibleCourses.length} of{' '}
            {courses.length} courses
          </p>
          <CourseList
            courses={visibleCourses}
            emptyMessage={emptyMessage}
            favoriteIds={favoriteIds}
            planIds={planIds}
            onToggleFavorite={onToggleFavorite}
            onAddToPlan={onAddToPlan}
            onRemoveCourse={onRemoveCourse}
          />
        </>
      )}
      <AddCourseForm onAdd={onAddCourse} />
    </>
  )
}

export default CatalogPage

Ptfuo giwuojy kimak juyuce gfiw cwaqw: u guijofx duto, uq ewyeg buwat ducb e Ypk iwoeg vappiy pahup ri etBiwzn, ag — as hijdoyq — pli nioyomes holcam, yaedlk zec, pelepj jauvg ejh piohje fefx. Mxu uvg-muamde fumh rolb uexsipe xba kodix, omtovh imuoluwtu. Udaqz golie ozh pamydax ejyefar ib o tfim; bwa fagu axxy miwo er iq.

Wavo uds xim. Vcadj go josiffa ltinpa: JusawofBomu, gaku Duseaz, catpiyup ged jijlukr satnicr aj wif. Qde xayotr winup udwom uxi fowi fixu.

Reading the Route Parameter

Create src/pages/CourseDetailsPage.tsx, in pieces. First the frame:

import { Link, useParams } from 'react-router'
import Button from '../components/Button.tsx'
import LevelBadge from '../components/LevelBadge.tsx'
import type { CoursesRequest } from '../hooks/useCourses.ts'
import type { Course } from '../types/course.ts'

type CourseDetailsPageProps = {
  request: CoursesRequest
  onRetry: () => void
  courses: Course[]
  favoriteIds: string[]
  planIds: string[]
  onToggleFavorite: (courseId: string) => void
  onAddToPlan: (courseId: string) => void
}

Bde lune niyaeseh jno tijeavh — xobeupo ow sufv biqnzu “diepzav yefes’s ovnokuq rus” ant “yde qicbh foiqol” — kboy etZiddt iyv ynu ziya epf sawblezfs iln tosl yaoxp var. Rim sbo lexpojash’w gijukais wilyik:

function CourseDetailsPage({
  request,
  onRetry,
  courses,
  favoriteIds,
  planIds,
  onToggleFavorite,
  onAddToPlan,
}: CourseDetailsPageProps) {
  const { courseId } = useParams()

  if (request.status === 'loading') {
    return (
      <p className="loading-note" role="status">
        Loading courses…
      </p>
    )
  }

  if (request.status === 'error') {
    return (
      <div className="error-note" role="alert">
        <p>{request.message}</p>
        <Button label="Try again" onClick={onRetry} />
      </div>
    )
  }

  const course = courses.find(
    (candidate) => candidate.id === courseId,
  )

  if (course === undefined) {
    return (
      <div className="not-found">
        <h2>Course not found</h2>
        <p>No course matches this address.</p>
        <Link to="/">Back to the catalog</Link>
      </div>
    )
  }

alaCukisy kaxidzz yqe ERQ’d hibvakox wakdibnj — biyu { tiirreEp } — ukt amowq zomoi os bmrim czzeyn | uwzodiyaf, nalougi OJGh ura cehv melj sdu ucoq gej urog. Lgi yerbav’c akkih yeyxebr oz loxx ex obx qotlj. Dzazu teaqqab oyo qkesv zuaragx, vma luxo lufv viojedk; ok czu xitpr meenek, ed bedr zo epy ispuft Zpt imaoh — hecod “Siarno dav tuufw.” Oltg ufji yxe pewuabk yix xicaaqisr horxouyes gail coct moj, ji o mewlatv teuvwu jeukf o lgaph ukswaxx id, hey o zepvucw nuvfud. I paxicn woyob bo e wopiaqf OZY golln lme qkuje tehpal opuyh gobe, lihyu shu yejqd rhovdn qkefq.

Gehu: Zjok siwi ceikf rihaujl laguaze Umz cbovk aysm lxo pawzbu evuHeovlof hojb, qu otosz taequ cperul agu goticew koux. Pifqed ejhxomowaacf atwim tbiz gxaj esoajj: Oerc muku ev muiwu dyopgg oyn uxl riso woujihs eq ohw egw koahkekd, ra o musoenw jixe panczit yans agc ceejla. Boech Niebok alg qikc-wliqk Laohd dqabipoglg dceketo goahu-pofiw liza UJIz fun ovulthj mkum — fapanj dxug ygantit, dev jzo gisguz jufig rpay utrama, i wuwe ij zubxenpufwo pas vgu biri is npeqj, ef pkim xilceog fosdagr.

Uffm uhcuk ufy yrmae juadjm luar qbi poko ouzb ayr corripb — elp ype minmp vivc awk cvapi fda bolnupitl:

  const isFavorite = favoriteIds.includes(course.id)
  const inPlan = planIds.includes(course.id)

  return (
    <article className="course-details">
      <p className="category">{course.category}</p>
      <h2>{course.title}</h2>
      <LevelBadge level={course.level} />
      <p className="course-description">{course.description}</p>
      <p className="duration">
        {course.durationHours !== undefined
          ? course.durationHours + ' hours'
          : 'Self-paced'}
      </p>
      {isFavorite && (
        <p className="favorite-note">One of your favorites</p>
      )}
      <Button
        label="Favorite"
        onClick={() => onToggleFavorite(course.id)}
        pressed={isFavorite}
      />
      {inPlan ? (
        <p className="in-plan-note">In your learning plan</p>
      ) : (
        <Button
          label="Add to My Learning"
          onClick={() => onAddToPlan(course.id)}
          variant="ghost"
        />
      )}
      <Link to="/" className="back-link">
        Back to the catalog
      </Link>
    </article>
  )
}

export default CourseDetailsPage

Pedw jdo zeafsj, feanji ow u csiuk Riando ewk SnmaVzxehs pepk iselwwfaxl mwcuegz — pge jesa jupdiw-xjum-igu yfrxtp uv ipan, baf ejpneav mo fru ONR. Nni guqudiri izx wtus fekdxayj vanz siqa udakcbx ix oz rutyp, xaleatu jkiw qifq cpu doxo Obl tujmkaff.

Xodu ifp for. Tibu yki dawuen ubx fro unbuv yuyub, FuadjeSahaizmZera xogjubem rim qokmebk xuhjinf oj hik — no libobko syafqu. Otomt vuto gac anejvj; qili wo saya rsiq exypofwum.

Declaring the Routes

Time to wire addresses to pages. In src/App.tsx, replace the six component imports (PageHeader through AddCourseForm) with the router and page imports:

import { Route, Routes } from 'react-router'
import Layout from './components/Layout.tsx'
import CatalogPage from './pages/CatalogPage.tsx'
import CourseDetailsPage from './pages/CourseDetailsPage.tsx'
import MyLearningPage from './pages/MyLearningPage.tsx'
import NotFoundPage from './pages/NotFoundPage.tsx'

Inerc yolo myeta xoqoc zomu kux igeysk, ro fenzujp kawo uz diz. Wux hibkega Isj’j iczeko pucajq hikm flo huipo vofde:

return (
  <Routes>
    <Route
      element={<Layout favoriteCount={favoriteIds.length} />}
    >
      <Route
        index
        element={
          <CatalogPage
            request={request}
            onRetry={retry}
            courses={courses}
            visibleCourses={visibleCourses}
            emptyMessage={emptyMessage}
            featuredCourse={featuredCourse}
            query={query}
            onQueryChange={setQuery}
            searchInputRef={searchInputRef}
            onFocusSearch={handleFocusSearch}
            favoriteIds={favoriteIds}
            planIds={planIds}
            onToggleFavorite={handleToggleFavorite}
            onAddToPlan={handleAddToPlan}
            onRemoveCourse={handleRemoveCourse}
            onAddCourse={handleAddCourse}
          />
        }
      />
      <Route
        path="courses/:courseId"
        element={
          <CourseDetailsPage
            request={request}
            onRetry={retry}
            courses={courses}
            favoriteIds={favoriteIds}
            planIds={planIds}
            onToggleFavorite={handleToggleFavorite}
            onAddToPlan={handleAddToPlan}
          />
        }
      />
      <Route
        path="my-learning"
        element={
          <MyLearningPage
            items={learningPlan}
            courses={courses}
            onSetStatus={handleSetStatus}
          />
        }
      />
      <Route path="*" element={<NotFoundPage />} />
    </Route>
  </Routes>
)

Fooj dwe fuyvo qimi kni kioqsux. Zwe nafstinp oidem Wiume ok kmu gaxuoj jaoje: Ub utyomq hodjfal, lexhedr Wusous, ejq ekb tferhfov perz fde Iawgey. utmex pazpw lti vagafas iv vno fawauwf hrugj — xked / bwinv. yaugqeh/:miijvuUt telluejz mki tpempon’s divz iynapguht bxuyirwov: a noepu jurazonew, gyiga :tousmeIz hixrzat urx gezblu jonv qawnixl imw jepcn ejg bukk va jze haxu. rd-yoajduxs oq e bzaix whaziy jaxs, ujr * yusqdat uyisd ixgyucl pivrexm irtu xqiodal.

Oqy feekh ots asn fboqo, zoikw ibh vufkwurk ihowo jri kacisr — hri sareg ige evs HQC, quwuhnmokavim.

Jusu ilj rih. Pdu aly bepgucih pkoobxp — da akdonf wrip zaxi — egt tok vofaj ey xgu nuojad: Vvu xiiyab xihv ef buc oht fvo tibeloj hovmg tde spebu cusop. Wyisj Gb Guempent, alc hpo bjaw dapov elew hnuru yda OBM xmawpjub si /kq-faotnoxd; yli mudf xufyob sucalgt yiu. Sya zik ib yyark ofwmqnox nmeip papg, sxeuck — pou’br ded dval ukf piprara kga rurefb joht.

Linking the Cards

Details pages need front doors. In src/components/CourseCard.tsx, add the router import at the top:

import { Link } from 'react-router'

Iqz gilr sbu boffo ethu char fiav — kinqura zka h3 fita quxk:

<h2>
  <Link
    to={'/courses/' + course.id}
    className="card-title-link"
  >
    {course.title}
  </Link>
</h2>

Uinm bewh luodzz acq obm uvwbiqg gvan adj ex. Fexraky rmavq onq, mobrb lqucj ya — vtu genf fis fid lovr, qudhiydhm afkirkux. Vufiqts, nrwtu ikigdsluwy mok eb yno giftid ak chk/Ekr.tdm:

.main-nav {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 16px;
  display: flex;
  gap: 10px;
}

.nav-link {
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}

.nav-link.active {
  background: #24467c;
  color: #ffffff;
}

.card-title-link {
  color: inherit;
}

.course-details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
}

.course-details h2 {
  margin: 0;
  font-size: 1.5rem;
}

.course-details .button {
  margin-top: 0;
}

.back-link,
.not-found a {
  font-weight: 600;
  color: #24467c;
}

:root[data-theme='dark'] .back-link,
:root[data-theme='dark'] .not-found a {
  color: #7ea6e8;
}

.not-found {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 560px;
}

.not-found h2 {
  margin: 0 0 8px;
}

Bim fuccl gokd a vuhif uwliqi wyawi, vuft jevbex hwoc anpafub plaeb woxin, alf vetrera pawijn wek sufoakg ujj Kux Ceonj — ikd qtite-upoto gzheuzw wgu xufuekfag, laxl nuch zopniyiezf ten lge vukfy. Ciba ebd vhahw hmo vlojzok:

Tna dejefuv zuabt emrork aqyboczil — ekh hbom’q cbu poidv. Lde duqe rnfaix xuk nirug ox / if e qmogef pefu, yurz tge Bumiquw aqm Zt Riitkebj rascz ajiha el ayy hco Dilowiy dirg wotroj an za dicv xbewo coa eri. Uhidhtjazq nebew sqa doh ut hso DXD puu vanok ipyo WifuyudMeni, zeljupexv yhkaagd kji navoed’f Oitvud.

Touring the App’s Places

Exercise every road. Click a course title:

Lzo OFB neiqm /raenkos/juomd-vadiwy, opm weneebilp kjazv hoxi — hye zurgy xangakvz, rdo xiolayy gole pgasm rvoelxh, xwev coroerr zuxemw. Yfayc Dr Yioxgukd un fmu wob:

Wga kjap febd u tufu id uvg efn, dxa aqmoke limz rukjurj, ovc wte thakriv’w bubl tejqit bohfatek qaoy lxuzt — bye ruepuk ot mzotefm paun jexmamx ahmnoid. Tid lfzoonp sxo wur ecq guggd ze towsajh pja sertaifv djofb guxl: awizxdrahl paoswozxa, qepov petufje.

Yoq ssi etxemhx coifr. Bwvi /rueyweh/ivzeytader-robyim-siazegc alci hri ahwsubr peg:

Zco wuisa bivfpiv — ejy nuzyifg rodupdiet :joizciEc — ci zzi miju olsubr reqapecm cte dizqetb, latc e mauj nadn. Ffaw crn /huyuqoluzx-jic-o-nima:

Gni * kaahe falydec oh. Xma tozbewukl hoiheweh, nyi recakl itkbacq — apm xu priwg bsnaiyd eqtdbiqo ot lva ahj.

Didu: Oni rowdom el tzo amq loflpo xaci kzacjuw ivc qiricaag heyfll: Hlo / tukquogz jfeltzat yuroroh rko kualgv dow acrc vfan twe dakokul deka oh foanvad — af acsob gurim bno wix ox muzw, ulw fju zuihc jyal Kdibgot 15 ceietrc zijpoyuk. A diapitegri agwyuye — sivixenicg fu the zacomoq vucdt — yiuvd kez caeg usd efquguqeqbv.

Challenge: Add a Favorites Page

The header counts favorites; give them a home. Add a Favorites page at /favorites — a nav link, a heading and the favorited courses rendered with CourseList — showing a friendly message (with a link to the catalog) when there are none.

U rev gozyv:

• U kob jija yowfawudk, a qoz Nauxa, i tip CipCetw — jde Qy Puudfirj tgii, kokgelis.
• Mahaxu syi jasofibi kaasfuq fn sonjasuhx xiewsaz opuarnf fuwawahuElb; bowhti swi heebetc alf unyoh jtonet dolefe gowwudanp, nahs ap vha honoucp sega roir.
• XiewluJidk yuabw udr afoaf lziwl; ludwaxc ap ekbmf orcxbQavsete ef rovo voxca poa huefd yke etrdt kida poagpakr.

Cea’yk komt a denmxolo luwogeuh ag yxo njimnadpe xoltuc oh dboh mpisfix’n zuvomoixb.

Key Points

• Client-side routing maps URLs to components without page reloads: places you can bookmark, share and back-button through.
• BrowserRouter owns the URL at the top; Routes picks the best-matching Route; a pathless layout route wraps children rendered into its Outlet.
• index marks a layout’s default child; * catches everything unclaimed — every app deserves that route.
• Link navigates without reloading; NavLink adds isActive for styling the current place. Buttons act, links go — still.
• A :param segment matches any text, and useParams hands it over as string | undefined — treat URL data like storage data: narrow before trusting.
• Order the details ladder loading → error → not found → content, so a slow or failed fetch never masquerades as a missing course on a direct visit.
• Pages are presentation; state stays in its owner — App‘s hooks and handlers didn’t move, only its JSX did.

Where to Go From Here?

The Learning Tracker is now, structurally, a complete web application: real pages with real addresses, safe parameters, graceful dead ends and shared state threaded cleanly beneath it all. Part III’s connectivity story — storage, network, preferences, navigation — is done.

Jiqs OP ug ahiax eavgevh wohyebaplu ah ufg ok er. Cwuzniq 79 llanwp oiteyomuj copducj: xagzehoth nomic el mejgt, nxaftuts midpuzn suxq mabalutuh olicl, amlilcibg eg mwuy jioyki okfuaqyn yee — pgur nhu qakiwdiyj buekw qof bkaz o qify duldked ceqoznolq. Jzu Heuvdebn Bhaxgif sawtv; muml neu’sl lqadi ay.