Configuration

Environment Variables

All frontend configuration is done via environment variables with the NUXT_PUBLIC_ prefix:

Variable	Description	Required
`NUXT_PUBLIC_API_BASE_URL`	Backend API base URL	Yes
`NUXT_PUBLIC_FIREBASE_API_KEY`	Firebase API key	No*
`NUXT_PUBLIC_FIREBASE_AUTH_DOMAIN`	Firebase auth domain	No*
`NUXT_PUBLIC_FIREBASE_PROJECT_ID`	Firebase project ID	No*
`NUXT_PUBLIC_UMAMI_HOST`	Umami analytics host	No
`NUXT_PUBLIC_UMAMI_ID`	Umami site ID	No

*Firebase variables are only required if you use social login (Google, Apple). The app works with email/password auth only.

Nuxt Config (`nuxt.config.ts`)

Key configuration:

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    '@nuxt/fonts',
    '@nuxtjs/sitemap',
    '@nuxt/content'
  ],

  components: [
    { path: '~/components', pathPrefix: false }
  ],

  runtimeConfig: {
    public: {
      apiBaseUrl: '',
      umamiHost: '',
      umamiId: '',
      firebaseApiKey: '',
      firebaseAuthDomain: '',
      firebaseProjectId: ''
    }
  }
})

Notable Settings

pathPrefix: false — Components are auto-imported without directory prefixes
CSP headers — Content Security Policy is configured in routeRules for API, Firebase, and Umami domains
Sitemap — Auth, payment, and profile routes are excluded from the sitemap
Fonts — Geist (sans) and JetBrains Mono (mono) loaded via @nuxt/fonts

Tailwind Config (`tailwind.config.ts`)

The dark theme is defined as custom colors:

colors: {
  background: '#0a0a0b',
  foreground: '#fafafa',
  muted: { DEFAULT: '#1a1a1c', foreground: '#a1a1aa' },
  accent: { DEFAULT: '#10b981', foreground: '#ffffff' },
  card: '#111113',
  border: '#27272a'
}

Using Theme Colors

<!-- Background and text -->
<div class="bg-background text-foreground">

<!-- Cards -->
<div class="bg-card border border-border rounded-lg">

<!-- Accent (green) for CTAs -->
<button class="bg-accent text-accent-foreground">

<!-- Muted text -->
<p class="text-muted-foreground">

Cross-Project Configuration {#cross-project-configuration}

Several backend variables must align with the frontend for the full stack to work. If any of these are mismatched, you'll see CORS errors, broken redirects, or failed social logins.

Concern	Backend Variable	Frontend Variable
API URL	(the backend's own URL)	`NUXT_PUBLIC_API_BASE_URL`
CORS	`CORS_ALLOW_ORIGIN`	(the frontend's own URL)
Firebase Project	`FIREBASE_PROJECT_ID`	`NUXT_PUBLIC_FIREBASE_PROJECT_ID`
Stripe Success	`STRIPE_SUCCESS_URL`	Must point to frontend `/payment/success`
Stripe Cancel	`STRIPE_CANCEL_URL`	Must point to frontend `/payment/cancel`
Email Validation	`EMAIL_VALIDATION_REDIRECT_URL`	Must point to frontend `/auth/email-verified`
Password Reset	`FRONTEND_RESET_PASSWORD_URL`	Must point to frontend `/auth/reset-password`

Key rule: all redirect URLs in the backend must point to valid frontend routes.

CSS (`assets/css/main.css`)

Custom utilities and base styles:

Smooth scrolling with prefers-reduced-motion respect
Custom scrollbar styling (thin, dark)
Green selection color (::selection)
Animation delay utilities (delay-100 through delay-500)
Focus ring utility for accessibility (.focus-ring)
Glow effect for decorative elements