Overview
Frontend tech stack, key decisions, and architectural patterns
Frontend Overview
The frontend is a Nuxt 3 application providing a marketing landing page, authentication flows, Stripe checkout, and a user dashboard — all styled with a dark theme using Tailwind CSS.
Key Decisions
Nuxt 3
Nuxt 3 provides server-side rendering (SSR) for SEO, auto-imports for composables and components, file-based routing, and a mature plugin ecosystem. The app uses SSR for the public landing page and client-side rendering for authenticated views.
Vue 3 Composition API
All components use the <script setup> syntax with TypeScript. This provides type safety, better IDE support, and cleaner composable patterns.
Tailwind CSS
Utility-first CSS with a custom dark theme. No component library — all UI components are built from scratch to keep the bundle small and the design fully customizable.
Pinia
Lightweight state management for auth state (token, user profile). Only one store (useAuthStore) since most state is managed by composables.
TypeScript
Full TypeScript coverage with interfaces for all API request/response shapes. Types are defined in types/ and auto-imported.
Design System
The app uses a consistent dark theme:
| Token | Value | Usage |
|---|---|---|
| background | #0a0a0b | Page background |
| foreground | #fafafa | Primary text |
| accent | #10b981 | Links, buttons, active states |
| card | #111113 | Card backgrounds |
| border | #27272a | Borders, dividers |
| muted | #1a1a1c | Secondary backgrounds |
| muted-fg | #a1a1aa | Secondary text |
Fonts
- Geist — sans-serif body text
- JetBrains Mono — monospace for code
Architectural Patterns
Dual-Mode Landing Page
pages/index.vue renders the marketing landing page for guests and the authenticated dashboard for logged-in users, using a simple v-if/v-else on authStore.isAuthenticated.
Component-Based Layouts
Instead of Nuxt's layouts/ directory, layouts are implemented as components (AuthenticatedLayout.vue) that wrap page content. This gives more control over layout composition.
Auto-Import
Nuxt auto-imports all composables from composables/ and all components from components/. The pathPrefix: false option means components are referenced by their filename only (e.g., <AppButton> not <UiAppButton>).
Composable Pattern
Each feature has a dedicated composable (e.g., useAuth, useCheckout, useSubscription) that encapsulates API calls, loading states, and error handling. Composables return readonly refs for reactivity.