Web Application Overview

The Jubiloop webapp is a React 19 single-page application built with Vite. This page maps the main frontend responsibilities and points to the pages that explain each one.

Architecture Map

main.tsx
├── next-themes ThemeProvider
├── TanStack Query Provider
└── TanStack Router
    └── generated route tree
        ├── public routes
        └── authenticated routes
            ├── onboarding routes
            └── workspace routes
                └── app layouts and domain components

Concern	Main implementation	Details
Routing	src/routes/, src/routeTree.gen.ts, src/main.tsx	Routing
Server and client state	TanStack Query, route search, React Hook Form, React state	State Management
Authentication and organizations	src/lib/api/setup.ts, app hooks, @jubiloop/auth-client	Authentication Frontend
App composition	src/components/, route components, @jubiloop/ui	Components
Shared styling	@jubiloop/ui/styles.css and the app CSS wrapper	UI Components Package

Runtime Composition

src/main.tsx creates the router with the generated route tree and places the TanStack Query client in router context. The same Query Client is available to route guards, route loaders, and React components. The root route in src/routes/__root.tsx supplies the global error and not-found UI, health checking, the resolved-theme toaster, and router development tools.

TanStack Router controls route selection, authentication boundaries, loaders, pending states, and route errors. TanStack Query controls cached server data. Components read both through configured hooks rather than creating clients themselves.

Data And Auth Clients

The webapp configures two client surfaces:

• auth from src/lib/api/setup.ts provides the Better Auth client plus shared authentication and organization hooks from @jubiloop/auth-client.
• api from src/lib/api/tuyau.ts provides generated TanStack Query options for other server routes, including health checks and events.

App hooks add webapp behavior around those clients. For example, src/hooks/auth/use-auth.ts adds navigation, remembered-email handling, and toast feedback, while src/hooks/event/use-event.ts adds the active organization ID and maps server errors for event creation.

Component Composition

Routes compose app layouts and domain components from src/components/. Those app components use domain-agnostic primitives from @jubiloop/ui. Route-only behavior stays in route modules; reusable webapp behavior stays in components and hooks. See Components for the ownership layers and current examples.

Styling And Theme Context

src/main.tsx imports src/globals.css, which imports the shared stylesheet and scans webapp source. It also imports local Fontsource assets. The webapp activates light and dark themes through next-themes; shared UI defines the tokens but does not manage application theme state.

The complete stylesheet, token, typography, contrast, and validation contract lives in UI Components Package.

Key Paths

Path	Responsibility
apps/webapp/src/routes/	File-based routes, guards, loaders, layouts, and route states
apps/webapp/src/components/	Reusable webapp layouts, forms, and domain compositions
apps/webapp/src/hooks/	App behavior and side effects around shared clients
apps/webapp/src/contexts/	Provider-scoped views of cached state, such as the active workspace
apps/webapp/src/lib/api/	Configured auth and Tuyau clients
apps/webapp/src/schemas/	Zod schemas used by forms and route search validation
apps/webapp/src/integrations/	TanStack Query provider setup

Development Commands

Run from apps/webapp/:

pnpm run dev
pnpm run test
pnpm run lint
pnpm run check-types
pnpm run build