Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Jason-AML/MonzaSport-Nextjs/llms.txt

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

Monza Motors follows Next.js App Router conventions with a src/ directory. Routes, layouts, API handlers, components, services, hooks, and i18n translations are all clearly separated — making it straightforward to locate any piece of functionality, whether you’re adding a new route, wiring a new component, or extending the service layer.

​
Annotated Directory Tree

src/
├── app/
│   ├── (auth)/              # Route group — login and register pages
│   │   ├── login/           # LoginForm.jsx + page.js
│   │   └── register/        # RegisterForm.jsx + page.js
│   ├── (checkout)/          # Route group — payment result pages
│   │   ├── cancel/          # Cancel page
│   │   ├── error/           # Error page (auth error)
│   │   └── success/         # Success page with its own layout
│   ├── api/
│   │   ├── chat/            # POST /api/chat — Groq AI assistant handler
│   │   └── checkout/        # POST /api/checkout — Stripe session handler
│   ├── chat/                # /chat — full-page AI chat interface
│   │   ├── layout.js
│   │   └── page.js
│   ├── collection/
│   │   ├── [carId]/         # /collection/:carId — vehicle detail page
│   │   │   ├── Detail.jsx
│   │   │   ├── loading.js
│   │   │   └── page.js
│   │   ├── layout.js
│   │   └── page.js          # /collection — vehicle listing page
│   ├── globals.css
│   ├── layout.js            # Root layout — providers + nav + footer
│   └── page.js              # / — home page
├── components/
│   ├── chat/                # ChatAssistent.jsx
│   ├── collection/          # Card.jsx, Collection-View.jsx
│   ├── home/                # HomeView, HeroVideo, CategorySplit, LatestNews, Testimonials
│   ├── layout/              # Navbar, Footer, FloatingBar, Modal
│   └── lenguage/            # LenguageSwitch.jsx
├── hooks/
│   └── useChat.js           # Chat state + Supabase Realtime subscription
├── i18n/
│   ├── index.js             # i18next initialization
│   └── translations/
│       ├── en.js            # English strings
│       └── es.js            # Spanish strings (default language)
├── lib/
│   ├── client.ts            # createBrowserClient — browser Supabase client
│   └── server.ts            # createServerClient — server + cookie Supabase client
├── providers/
│   ├── AuthProvider.jsx     # Supabase auth context
│   ├── I18nProvider.jsx     # i18next context
│   └── QueryProvider.jsx    # TanStack React Query context
└── services/
    ├── auth/
    │   ├── auth.client.js   # signIn, signOut, registerService
    │   └── auth.server.js   # getUser (server-side)
    ├── collectionClient.js  # Client-side Supabase queries (vehiculos, fabricas)
    └── collections.js       # Server-side Supabase queries (vehiculos)

​
Route Groups

Next.js route groups let you organize routes into folders without changing the resulting URL. Monza Motors uses two:
  • (auth) — contains /login and /register. The (auth) folder name never appears in the URL; the routes resolve to /login and /register directly.
  • (checkout) — contains /cancel, /error, and /success. These pages are shown after a Stripe payment flow and benefit from shared layout isolation without polluting the top-level URL namespace.
Route groups are also useful for applying a shared layout to a subset of pages. The (checkout)/success/layout.js file, for instance, wraps only the success page with its own layout without affecting any other route.

​
Path Aliases

The jsconfig.json at the project root maps @/ to src/:
jsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
This means every import across the codebase uses @/ instead of brittle relative paths. For example: 
import { signIn } from '@/services/auth/auth.client'
import { useAuth } from '@/providers/AuthProvider'
import { createClient } from '@/lib/client'
Next.js 15 respects jsconfig.json path aliases automatically — no additional Webpack or Babel configuration is required.

​
API Routes

The src/app/api/ directory contains Next.js Route Handlers — not Express or any external server framework. Each file exports async functions named after HTTP verbs.
RouteFilePurpose
POST /api/chatsrc/app/api/chat/route.jsReceives a user message, calls the Groq AI API, and writes the assistant reply to the messages table
POST /api/checkoutsrc/app/api/checkout/route.jsCreates a Stripe Checkout session and returns the redirect URL
// Example Route Handler shape
export async function POST(request) {
  const { user_id, content } = await request.json()
  // ...handler logic
}
Route Handlers run on the server (Node.js runtime by default). Never import browser-only code or the @/lib/client Supabase client inside src/app/api/. Use @/lib/server instead.

​
Components

Components are co-located by feature rather than by type, keeping related JSX, styles, and logic together:

layout/

Persistent shell components rendered by the root layout on every page: Navbar, Footer, FloatingBar, and Modal.

home/

All sections of the home page (HeroVideo, CategorySplit, LatestNews, Testimonials) imported by HomeView.jsx.

collection/

Vehicle listing card (Card.jsx) and the collection grid wrapper (Collection-View.jsx).

chat/

ChatAssistent.jsx — the full chat UI powered by the useChat hook and Supabase Realtime.

​
Hooks

src/hooks/useChat.js is the only custom hook in the project. It manages the full chat lifecycle:
  • Loads message history from the messages table on mount.
  • Subscribes to INSERT events via Supabase Realtime, filtered to the authenticated user’s channel.
  • Exposes sendMessage, messages, loading, and user to consuming components.

​
Services

The service layer isolates all data-fetching logic from components:
FileClientExports
services/auth/auth.client.jsBrowsersignIn, signOut, registerService
services/auth/auth.server.jsServergetUser
services/collectionClient.jsBrowsergetCollections, getCollectionByYear, getFabricas, getCollectionById
services/collections.jsServergetCollections
getCollectionById in collectionClient.js is wrapped with React’s cache() function, which deduplicates identical calls within a single render pass — useful when multiple components on the same page request the same vehicle record.

Build docs developers (and LLMs) love

Get started for freeTalk to us