Architecture

The dashboard is a Next.js 14 App Router application written in TypeScript. It runs as a server-rendered React 18 client with strict typing, Tailwind CSS for styling, and a small set of well-known UI primitives.

• UITailwind CSS, shadcn/ui primitives, Lucide icons, Sonner for toast notifications, next-themes for dark mode.
• DATATanStack React Table for advanced data tables (licenses, users, variables, logs), Recharts for the analytics charts on the dashboard.
• SECGoogle reCAPTCHA v3 on the login and register flows, TOTP-based two-factor authentication for accounts.
• PAYStripe Checkout for boost purchases, Stripe Connect for seller payouts, Stripe Customer Portal for invoices.

• app/Route handlers and page components. Public flows (login, register, password reset) sit at the root. The authenticated dashboard lives under /applications, /settings, and the dynamic /applications/[applicationName] segments.
• components/Reusable UI grouped by feature area: application, licenses, users, security, team, variables, discover, settings, and global pieces like the navbar, sidebar and command palette.
• lib/The API client (api.ts), the session/auth context (auth-context.tsx), keyboard shortcut handling (hotkeys.ts), the data-fetching hooks (use-data.ts) and small utilities.
• intercom/Backend integration glue and data adapters that the dashboard calls.
• public/Static assets (icons, logo, OG images).

A page renders, mounts the auth provider, and pulls session state from /api/auth/check-session. If the user is signed in, page-specific hooks fetch data through lib/api.ts (apiGet, apiPost, apiPut, apiDelete). All errors are normalized to an ApiError with a user-readable message and a toast is shown via Sonner.

Permission gates are evaluated on the client using the membership payload that ships with each application response. If the gate fails, the page shows an AccessLoader rather than the content.