Skip to content
stacks

react-app features

Generated from templates/react-app/template.json.

FeatureDefaultWhat it adds
ui
UI kit (src/shared/ui)
Always

shadcn-style Radix components, a Formik+Zod form helper, light/dark theming with a no-flash init script, and page-meta helpers.

api
Data layer (src/shared/api)
Always

One RTK Query baseApi that every feature extends via injectEndpoints, a configured store, and an upload-aware base query. Endpoint names and tagTypes live in one global namespace — collisions are silent, so keep them unique.

auth
Auth (src/shared/auth)
Always

better-auth browser client, session slice, and route guards. Single origin, so the guard navigates to /login rather than redirecting to another host.

layouts
Layouts (src/shared/layouts)
Always

App shell, auth layout, marketing layout, error boundary and the loading/empty/forbidden/not-found state screens.

auth-screens
Auth screens
On

Login, signup, forgot/reset password, email verification as routes. Drop this only if you are bringing your own /login — the guards and the 401 handler both send unauthenticated users there.

Files it owns (2)
  • src/routes/auth/**
  • src/features/auth/**
hooks
Shared hooks (src/shared/hooks)
On
Files it owns (1)
  • src/shared/hooks/**
types
Generated API types (src/shared/types)
On

OpenAPI-generated request/response types and Zod schemas, regenerated from the backend's /openapi-json by yarn gen.

Packages: @hey-api/client-fetch, @hey-api/openapi-ts, axios, dotenv, tiny-invariant

Files it owns (3)
  • src/shared/types/**
  • openapi-ts.config.ts
  • .bin/openapi.js
marketing
Marketing site
Opt-in

A public landing page at /, an SEO route table, and build-time robots.txt / sitemap.xml / security.txt. Including it moves the authenticated app to /app so the landing page can own the root — see src/lib/paths.ts.

Files it owns (2)
  • src/routes/marketing/**
  • src/features/seo/**
admin
Admin console
Opt-in

A role-gated /admin branch with its own nav, over the same data layer. The guard decides what renders; the API still has to enforce the role.

Files it owns (1)
  • src/routes/admin/**
realtime
Socket.IO client
Opt-in

socket.io-client wired to the backend's /realtime path, with room helpers and shared event-name constants. Pairs with the nest-api realtime feature.

Packages: socket.io-client

Files it owns (2)
  • src/shared/api/socket.ts
  • src/shared/api/realtime-events.ts
pwa
Installable PWA
Opt-in

vite-plugin-pwa: app-shell offline caching, and registerType 'prompt' so a new build waits for the user instead of swapping assets under a running app. The update prompt and install button are yours to build with the plugin's useRegisterSW.

Packages: vite-plugin-pwa

charts
Charts
Opt-in

ApexCharts and react-apexcharts, with a theme-aware chart palette (the --chart-* tokens in the UI kit). No chart components ship.

Packages: apexcharts, react-apexcharts

husky
Git hooks + lint-staged
On

Packages: husky, lint-staged

Files it owns (1)
  • .husky/**
docker
Docker image
On

Multi-stage build producing a static bundle, served by the nginx config in docker/ (cache rules, SPA fallback, security headers).

Files it owns (4)
  • Dockerfile
  • .dockerignore
  • build.sh
  • docker/**
ci
Forgejo Actions CI
On
Files it owns (1)
  • .forgejo/**
secrets
Infisical secret sync
On
Files it owns (1)
  • .bin/secrets.js
telemetry
Browser monitoring → OpenObserve
On

OpenObserve RUM and logs: page views, errors (including the error boundary's), slow resources, user actions, the signed-in user id, and traceparent headers on API calls so frontend and backend traces link up. Session replay is off unless a project turns it on. Off at runtime until VITE_OPENOBSERVE_* are set.

Packages: @openobserve/browser-logs, @openobserve/browser-rum

Files it owns (1)
  • src/shared/telemetry/**

Notes

Section titled “Notes”
  • marketing moves the signed-in app from / to /app, and adds build-time robots.txt, sitemap.xml and security.txt. Set PRODUCTION_ORIGIN in src/features/seo/routes.ts to your real origin: every other origin builds as noindex.
  • admin gates /admin in the UI only. The API must enforce the role.
  • pwa: the update prompt and install button are yours to build, with the plugin’s useRegisterSW.
  • charts adds ApexCharts and its theme-aware palette tokens; no chart components ship.
  • realtime adds a Socket.IO client for the API’s /realtime path. Call connectSocket(url) where your app needs it; nothing connects by default.
  • auth-screens off means you bring your own /login: the guards and the 401 handler still send users there.