Skip to content
GLOBAL SIM GROUPSIM — Documentation

Frontend Overview

The SIM Frontend is the web client of the GLOBAL SIM GROUP platform — a client-only TanStack Start application (React 19, TypeScript 6, Vite 8) that consumes the NestJS backend over HTTP + JWT. Production: global-sim-group.com.

What this documentation covers

Section titled “What this documentation covers”
  • The layered architecture (core/, features/, routes/, components/)
  • The “Concierge” design system (tokens, primitives, visual conventions)
  • The API layer (apiFetch, api:gen, OpenAPI) and state management
  • The JWT session, rotating refresh, and permission model
  • Development commands, testing, and conventions

Quick start (local)

Section titled “Quick start (local)”
Fenêtre de terminal
cd global-sim-group
npm install
npm run dev        # http://localhost:3000

Regenerate OpenAPI types with npm run api:gen; regenerate routes with npm run generate-routes.

Stack

Section titled “Stack”
Layer Choice
Framework TanStack Start (React 19, Vite 8, structural SSR)
Routing TanStack Router (file routes,beforeLoad guards)
Server state TanStack Query (singletoncore/query)
Forms TanStack Form
Styling Tailwind CSS v4 + CSS variable tokens
Components Radix UI / shadcn + custom primitives (components/ui)
Icons Lucide
Real-time notifications Socket.IO
Quality Biome (lint/format), Vitest + Testing Library,tsc --noEmit
PWA manifest + service worker

Repository layout

Section titled “Repository layout”
src/
├── routes/            # 123 route files — glue: guards, layouts
├── features/          # 19 business modules (residence, pressing, espace-client…)
├── components/
│   ├── ui/            # shared primitives (Button, Badge, Dialog, Table…)
│   └── layout/        # shells (AppShell, sidebar, navbars)
├── core/
│   ├── api/           # HTTP client + generated OpenAPI schema
│   ├── auth/          # JWT session, guards, hooks
│   ├── permissions/   # MODULE.ACTION codes and helpers
│   ├── query/         # queryClient + query keys
│   ├── forms/         # TanStack Form helpers
│   └── notifications/ # Socket.IO
├── integrations/      # framework adapters (tanstack-query)
└── styles.css         # design-system tokens (source of truth)

Three spaces

Section titled “Three spaces”
Space Routes Audience
Staff back-office /_authenticated/* (AppShell + sidebar) Employees by role/permissions
Resident portal /_authenticated/residence/portail/* (same AppShell, dedicated nav block) PORTAIL.VOIR / RESIDENT.VOIR, scoped to idClient
Client space /espace-client/* (ClientShell: lg+ sidebar, navbar + mobile tab bar) Self-registered clients

The public landing (/) is the marketing showcase — rich animations on purpose.

Generated files (never edited by hand)

Section titled “Generated files (never edited by hand)”
File Generated by
src/routeTree.gen.ts npm run generate-routes
src/core/api/generated/schema.ts npm run api:gen

Next steps

Section titled “Next steps”