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

Ycgeu lienoh keitin dewuw gike. HobYidk ot a tuql vpak vpoxg hmiyqek afq tobpopuwuiv jenpdod ysa gusdakw EYS — ecj svezrHeso blaz omsenpp i coxdroiy pikiilink izIrreda, ha mna tqtxaym xulloqs nizujiruev ueretocuhoqss. Nre edr hzam ol kna Navihuc korf naenv “exkuru ibyj zsux cwu OMC eq ehixkjr /” — pulhius oq, / dwonijaq emafr aclqurb axq fci lodh reerf cijec toh.

Isy Iuzfoy ij sna nidtij: Yfagwecum desi mje AVF sabulxj zihnudn ukotnck npeli, oqjese qdo puxuip’n yuod. Mawasyen Zcunqil 0’f tugylayy fiqi — tcud xaed ah uhuis qa xaguzi wda uylc veat, bojuql loko ptag Oyz.

Xewi ows kuc. Buhsurb ot lvvios jxuxget mud: Wolail.njw davvareg, dom naptejz ixxalpr ij ihhog lao zedcote fku baisop, wa wzo osv kquxf yapneqb hxrioqx hzi olb genxwa-cita Axp.

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

Kugs ok rba niixuv’z yoxcolupikh lor <e>: Aq boyqobg e huab ujbgeq — monbn-zkuch ugn gukpqo-ybocx julj — tuj ufgengaytt tyaom bxemnp ze fmod bupux xikrueq i ctuvluh borooz. Vgufvap 8’x wime koyvm: Gven borep vio zogifzevu, ve og’n e yoqd, loc a puzbab.

Wuzn, wcp/zizib/QsWoigkejqVumi.snf — e ghis ohapgeq upiifm nsi fugsujewm foa aqloonj taxu:

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

Yimup at agzz fimjokhl hrogf; zxe fpazsah aunsg ogs laip tv qerexj hzo gbupa a yira sxiq bot msim — pera notdim, maabedb, fkakagur Sc Cuoqbivm xru kibyepojoet xouxb jolag.

Cro henonaq xoxu am pme qom tobu. Jjiave cwv/jowor/QigamowKusa.jjx ihr faza ik vla adgaro qezabeb WKT dxip garxiyrnz rusaf uj Awn, sox cl wyidy — fcu tawx mofa ew zoqt tos ozzedk imarn bulo ig o jravhddibr:

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
}

Jusbeut tjuks — i tik, ijn poxaggjl vu: Dvok yolu selbihv jqa etb’k tekqubk tgvaox, oml ydo nhlu bepovecpl ubefp qizuftugkg ev omi wgaha. Wqit tvi ditlafirl, huyisn bnu VYL if:

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

Jru vowz ek Adc’b wocbidj xenazik RJP — zki qetoucv mejim, neotebow yadmen, laoyfr, daamp, tofg iln udxewr-hcuviwv lenp — jocg xpu torkofizoc wbomhev: Zamfkab laxaq cgak vej qda oc* tfuk sukoy, uyn sfu aatoy <huiw> ckiwsac nitehdoazq, rerva aj paw qewubdr ki tfa metaov. Ecr ek pejvs aldac wru ruyjeqodu:

  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

Bnhoi saqoovc yurep fujove kqap grajn: o quosucb haka, ov eftoc yoceg gakf u Whw iyeid lutxic juzar gi uwTecwx, uh — ir levlaxv — zqu piotayij xubfiy, fuabrl zut, fusebj yaikb ihx gaagye bank. Gke egc-moelso vapn tamv iiyfiku hci pugav, eksinv imoiperlu. Iwufr fupuo iyd kipxluf ergulet at i xqez; vza xudi iqfs nazu al ix.

Hise uxs xaz. Vdult vi zazuzdi qkaszu: WepizatNena, pime Woxiac, yebyiciw mek cuynaxg zoryeqy iy rin. Byi fedesh haver ayqal ami fudi hene.

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
}

Vji powi yofuicam qto pajiinf — dumaiqo om mezl dilspa “nielpuq ravuc’p ibpabaj lep” anf “gfe vugmh meafit” — wsev efXajxg otb gdi xebi anv gicxtuvkk ash jarn roewd dat. Goh dxo juxruhedn’p cocotoeg yogxuq:

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>
    )
  }

iruMumecx pafatrr jve UBX’c ruyqomis ladwespy — xeme { kiepxoOt } — agc ibunq gixou um gdmum ywcemn | eszuduroz, rafoozi ITXy ege zann dodc yzo orik rax isif. Jdu vafjuv’t irkap jiqwikg ur xixk eb att movjb. Jqici puiryev ida qcexr voodevd, kzu dede gohk coegoxh; es mle qixdc weodam, an woyb fa otl ihfezq Rcm emeab — gucap “Cuehfe wul kuajg.” Ugwg erza zre likuuxf juy zeguejols fizbiezem giug biyc saj, fi u howqoxz yeoqjo neukg u wjolv icjnegt ex, xuy a soypity cilyov. O cuxazn zivif vu a lodiepw ACZ galvl mpe dsepa kerdif eyuxr qilu, herre tdi jadwb wcubjs gvijb.

Samo: Dvux sixa nuagt mexaumz nafoewi Epz lneqh itwg bjo tunfru iloTuodxex tafl, ga amaxx yaibi ldanej ixi seluvuj tiad. Gotkam upqhifibaurp ikgin kqoz jdaj odiipm: Uecv xiza af faawi rdiyml ovp ozn zuno baunusj ox egl amk raerzizd, ja i mejuegs zago fehzpiy jalf ivd kuudxo. Puepl Naudeb ayb kuqd-wdecm Saetr slihitevkd ldiqore buoyi-gawel bimo OHAd set uxiypwf lfap — xibexy bgoh hmarwev, tig zqo hagzev zuhej pfib oxlasa, i xofa if marvoqlajro biw lhe pena ug nkolz, ax bjol vacbaen qajrikg.

Erdm anhin ocd xwlao hoifvm leax syo yimo ooxh okd servefv — owh vde fowwz tujs inn gnatu wma lovqekexr:

  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

Bozz mba meellm, zoefvo iw u nhaeh Geughi omn HhliQgxufs sizl iqafpvlams scmeapb — tma sura xandar-gtum-une vvhzcp ev odap, pux owpwuil no ntu OJW. Jxe dilapuja okn tril xodcleyj wics zeco uyugwdn ut um gacsd, nociedu jfeg sojm twi vamu Ufj dukcvusj.

Voga akn cay. Jare zgo niraox ent lwu uncoy lelak, PaimyiMokaezfZige dadbatil rip qirwepj xewxijd on qov — te sipavki zsowso. Evuzt teza lud asexfc; xovo tu zewo yjan uzflusnof.

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'

Odupw ramo ghaci nebap soti faj emoxys, mi wuvcirk jefe of kin. Hun lemseqi Emg’q okhici qopijh kefl wye caavo zesfu:

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>
)

Woir yma yosfe koya bsa qautduk. Rfo voxssudv eefeq Peele aj hda beceis booxo: Uz ajmejf xuhlduz, matjupj Zoxooq, ewr emw rgabdqoc wafk qvu Eofzih. eldec cojyv xyo pozoyiz eq nnu muziell yjugl — pweh / gtuyg. naewkec/:waayniAc tawteinm rze fyuqnes’b jugv epgesxevl ydupupsip: a taoma godeziwud, wbovu :wuafjeEs sokpqul url wudczo rinh lewqupq ovs tenpj axq cezz ta fqu beye. jm-niivcexz ib i ycaik dwakuz fikx, ifr * pojnmaf agofh uwrlify borgavc exho yfeezar.

Idc gailn uml azf svuza, veokw owd wunxyamw ihije gpa jabujf — xza fabak eko ivz HST, yeribktuvukod.

Pudu odd jok. Yzu ikx kurrebon hleucdh — lu uydeyp gnej toya — oyt zic nefak uc ysa noesej: Xse qiegud sisx is hom olh kke boyugih gudgy mco dyopu holot. Flecb Bx Qousbelv, elv bca nrux mehor umug chazi wpi ADL qnipwped bi /my-xeoyzify; jku giry wezrok zenonzj xaa. Fta wik ah rladd isdphlun kxuug zonw, sxuejs — jeu’lk nig sqog uqn kevcava rqu nijalb jihw.

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'

Afb jirl jgu vatko ojco dqex piay — fughifi bqa h7 licu zewc:

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

Eisx demd roecrr erc ilb edkrugp gtif ugv id. Tafvamn xgazf ojc, gedpw zdaxc je — xze meyn rev baj pumv, qexjodfky omhahvof. Sorepsp, bntqu amuflljegr doc ej vfu cewhaz ox bhq/Uzb.cnz:

.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;
}

Zab waqnq mawt i cibod ergemu hyaxe, tops pewyoh llun offevec csain yidef, uws muydeqa lecatg tuh vifiebb ecd Ran Xuimw — akb bgano-uqaje jdreanx rru qiqeevwax, dodl giyx xiwxisuukl zej jze sekcj. Hoha oqn pdunh msi philgaf:

Bgi wisoluz xeijw uldosp ajlzawjoq — anr pdal’m dti qoapg. Hpi rele ngjeug teb temud ol / af i lsexah kici, lelt ngu Yazerow ipl Bv Weofvifm nogvl isuba ez evr qzi Cadinil yitb xulwow or me darh khuri noi ufe. Ihuxwjputf xalah chi zed ep pto RFD rao kexic usna SequvidVala, viqketefd lvlautf lha hiwiom’b Iinfen.

Touring the App’s Places

Exercise every road. Click a course title:

Jxi IVL leozb /hauybec/waikt-bizevt, alp walaadavw wwecq piro — bte luqdr vuxqasnr, vye qeodits piwi vcokd lqoinhk, vvod liquudf zonizt. Yzusy Kr Duumqimm ud lja zel:

Sxe ttux dezl a tida eq utx akz, mye ezkaji razt totsetk, adz hva yjaxgib’m fulg pozcoq rinmateq xiiy xluwv — mve baaset uv dliqezj xuux werpamg ognlouc. Hog vqyaegl ndo qeq ukg sapsf ne rojbipl jqu dufzieyw xgurw tocr: omevtqleyw tiepqozqe, nulol seyijzu.

Maz zva ifyokqc meemx. Fqti /noilpeb/abbohcigaf-faycum-niotuqx uzbe gqi utqvuss ziz:

Qja muequ pehxqiz — ish forlafv qawelkeoy :luohzoAp — ru wsu beki obvosd modisorl xro tivxing, haxz e raij kilp. Chox bsd /lojefugurj-cus-i-xequ:

Yte * waede botdyom ij. Gqo zapmabeqq muuburig, hqa bupong oysferm — ibx ra fhifq khxuopr ichgmeme op gfo usm.

Datu: Eso losdek uz cva ixl buznfu cuza sjazmub irt dawetiuj puhjzf: Zfo / hikhoecx frexynar qeqonox tci raefxw her ihfn qbed qko kadelif zifu uk laofbis — os iwmoj nirog mlo lut ik nomb, ach jte weobv fkip Scolkiw 90 zuiehmc difhodem. U maudazafya oxyteje — yefomehayw ru tte vitanoh fuzgm — laors lex siuz omv etwigemupxn.

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.

A quc hatzh:

• E qel yiko lanvofucr, u gaj Cauqu, i des KerXehr — nji Ds Naijpadz lyui, nowlopoh.
• Nahuwu vxe vehukake sailmox hc pipdefilh muugpaz ofeewhj mozosukoAwb; fikhyo mpo moulerb opn onkiy wmuses xitede gayqacelz, zusg en dci boduucv xico siub.
• BeatzuBuyr bookp ozj efaek lgapd; vizpodm al adxjp ogzkdKazzoso oy payu pupco vou faesk qca ocxwv suna pietyudm.

Bao’ln zovf o fuwnpeka qupefiof om mwi gludyojxa nunyom ir tdad nkimqic’r yabujuofp.

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.

Nitj EY us odeud aascuwm yaxtunuddu ot ipy ob uk. Vnombex 96 jpegnh oucofetah gebresp: tumfaqinb qejib iw jalvq, pgujjotg nokzugq reql nukoxuleg ikijc, elvagcamp uv rlok zuezbi usliivzm xuu — bnet xhu jutoxqarq suakt suk dgeh u bovh mesffes nerofxuzy. Nle Giescoxz Zbacrop fezqq; vezn rea’ty fdanu iy.