Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/JAQA20/Paradigmas-G3/llms.txt

Use this file to discover all available pages before exploring further.

La Comanda’s frontend is a single-page application built with React 19 and TypeScript, bundled by Vite, and styled with Tailwind CSS v3 extended with a full Material Design 3 color system. Authentication is delegated entirely to Clerk, which wraps the app at the entry point (main.tsx) and guards every route through a ProtectedRoute component defined in App.tsx. Client-side navigation is handled by React Router v7, and all visible strings are managed through i18next with English and Spanish locales shipped out of the box.

​
Project Structure

frontend/
├── src/
│   ├── App.tsx          # Root component, routing, ProtectedRoute
│   ├── main.tsx         # Vite entry, ClerkProvider
│   ├── i18n.ts          # i18next configuration
│   ├── index.css        # Global styles
│   ├── components/
│   │   ├── Sidebar.tsx  # Navigation sidebar
│   │   ├── Header.tsx   # Page header with search
│   │   └── Notification.tsx
│   ├── pages/
│   │   ├── LoginPage.tsx
│   │   ├── Dashboard.tsx
│   │   ├── TableView.tsx
│   │   ├── KitchenMonitor.tsx
│   │   ├── Inventory.tsx
│   │   ├── StaffControl.tsx
│   │   ├── Settings.tsx
│   │   └── AccessDenied.tsx
│   └── locales/
│       ├── en.json
│       └── es.json
├── public/
│   ├── favicon.svg
│   └── icons.svg
├── tailwind.config.js
├── vite.config.ts
└── package.json

​
Key Dependencies

All runtime and build-time packages are pinned in package.json. The table below lists the most significant ones.
PackageVersionPurpose
react^19.2.6UI framework
react-router-dom^7.18.0Client-side routing
@clerk/clerk-react^5.61.8Authentication
i18next^26.3.1Internationalization
react-i18next^17.0.8React i18n bindings
tailwindcss^3.4.19Utility CSS
vite^8.0.12Build tool
typescript~6.0.2Static type-checking

​
Tailwind Color Tokens

La Comanda extends Tailwind’s default palette with a complete Material Design 3 color system. Every token is registered under theme.extend.colors in tailwind.config.js, which means they are available as standard utility classes (e.g. bg-primary, text-on-surface, border-outline-variant). The tokens cover the full MD3 surface, container, and role-based color roles — including dark-mode variants via the dark: prefix, which is enabled with darkMode: "class". The following excerpt shows the key tokens used throughout the app’s components: 
// tailwind.config.js (excerpt)
export default {
  darkMode: "class",
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // Brand / primary roles
        "primary":                    "#094cb2",
        "primary-container":          "#3366cc",
        "on-primary":                 "#ffffff",
        "on-primary-container":       "#e7ebff",

        // Surface roles
        "background":                 "#faf9fa",
        "surface":                    "#faf9fa",
        "surface-bright":             "#faf9fa",
        "surface-dim":                "#dbdadb",
        "surface-container-lowest":   "#ffffff",
        "surface-container-low":      "#f5f3f4",
        "surface-container":          "#efedee",
        "surface-container-high":     "#e9e8e9",
        "surface-container-highest":  "#e3e2e3",

        // On-surface roles
        "on-surface":                 "#1b1c1d",
        "on-surface-variant":         "#434653",
        "on-background":              "#1b1c1d",

        // Error roles
        "error":                      "#ba1a1a",
        "error-container":            "#ffdad6",
        "on-error":                   "#ffffff",
        "on-error-container":         "#93000a",

        // Outline
        "outline":                    "#737784",
        "outline-variant":            "#c3c6d5",
      },
    },
  },
};
All Tailwind classes that reference these tokens are validated at build time. Any token not consumed by a source file in ./src/** is tree-shaken out of the final CSS bundle.

​
Routing

App.tsx configures a BrowserRouter with a flat Routes tree. Every route except / is wrapped in ProtectedRoute, which uses Clerk’s <SignedIn> / <SignedOut> primitives to either render the child or redirect to the Clerk-hosted sign-in flow.
PathComponentProtected
/LoginPageNo
/dashboardDashboardYes
/tablesTableViewYes
/kitchenKitchenMonitorYes
/inventoryInventoryYes
/staffStaffControlYes
/settingsSettingsYes
/403AccessDeniedYes
The ProtectedRoute wrapper is defined inline in App.tsx: 
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <SignedIn>{children}</SignedIn>
      <SignedOut>
        <RedirectToSignIn />
      </SignedOut>
    </>
  );
};

​
Development Commands

The following scripts are available via npm run (defined in package.json):
CommandScriptDescription
npm run devviteStart the Vite development server with HMR
npm run buildtsc -b && vite buildTypeScript type-check, then produce a production bundle
npm run linteslint .Run ESLint across the entire source tree
npm run previewvite previewServe the last production build locally for inspection

Build docs developers (and LLMs) love

Get started for freeTalk to us