Forever Cards

The application’s routing layer is powered by TanStack Router (src/router.tsx), which creates a router instance with a shared QueryClient context. This enables declarative route definitions (src/routeTree.gen.ts) and automatic code‑splitting for each route file under src/routes/. The root route (src/routes/__root.tsx) includes robust error handling that logs errors, reports them via reportLovableError, and provides a user‑friendly fallback UI with retry and navigation options.

The carousel component (src/components/ui/carousel.tsx) demonstrates a reusable UI pattern. It wraps the embla-carousel-react hook, exposing navigation methods (scrollPrev, scrollNext) and state (canScrollPrev, canScrollNext) through a React context. Keyboard accessibility is baked in via an onKeyDownCapture handler that maps arrow keys to carousel actions, and the component forwards its ref for external control.

Server‑side rendering is managed in src/server.ts, which loads the server entry point, normalizes catastrophic SSR responses, and ensures a graceful fallback HTML page on failure. The SSR entry point also respects Cloudflare Workers’ h3 error conventions, parsing JSON error payloads to differentiate between handled and unhandled errors.

A dedicated Sitemap route (src/routes/sitemap[.]xml.ts) generates an XML sitemap on the fly, enumerating public paths with appropriate changefreq and priority attributes. This route is defined as a file‑based route using createFileRoute, illustrating the framework’s ability to serve both HTML and non‑HTML assets from the same router.

The overall build topology relies on Vite (implicit via the TanStack starter) for fast development HMR, TypeScript for static analysis, and ESLint for code quality. The project is structured to keep UI components, routing, and server logic isolated, facilitating incremental enhancements and easy testing.