Frontend Overview

The AI SaaS Boilerplate frontend is built with Next.js 14+ and Tailwind CSS, providing a modern, responsive user interface for your AI services platform.

Technology Stack

Framework: Next.js 14+ with App Router
Styling: Tailwind CSS
Authentication: AWS Cognito with Google OAuth
State Management: React Context API
API Integration: Fetch API with custom hooks
Forms: React Hook Form
Internationalization: Next.js built-in i18n routing

Frontend Architecture

The frontend follows a component-based architecture with a focus on reusability, maintainability, and performance:

App Router: Uses Next.js App Router for file-based routing
Server Components: Leverages React Server Components for enhanced performance
Client Components: Uses Client Components for interactive UI elements
API Integration: Connects to backend services through AWS API Gateway
Responsive Design: Fully responsive design that works on all device sizes

Core Features

Authentication

Secure user authentication with AWS Cognito and Google OAuth

Dashboard

Interactive dashboard for accessing AI services

Subscriptions

Subscription management with Stripe integration

Credits System

Credit-based usage tracking for AI services

User Settings

Comprehensive user settings and profile management

Project Structure

The frontend follows a standard Next.js App Router project structure:

frontend/
├── app/                      # App Router pages and layouts
│   ├── [locale]/             # Internationalization routing
│   │   ├── (billing)/        # Billing route group
│   │   ├── dashboard/        # Dashboard routes
│   │   ├── login/            # Authentication
│   │   ├── settings/         # User settings
│   │   └── ...               # Other root routes
│   ├── api/                  # API routes
│   ├── globals.css           # Global styles
│   └── layout.tsx            # Root layout
├── components/               # Shared React components
│   ├── billing/              # Billing components
│   ├── common/               # Common UI components
│   ├── dashboard/            # Dashboard components
│   ├── home/                 # Home page components
│   ├── layout/               # Layout components
│   └── settings/             # Settings components
├── contexts/                 # React context providers
├── hooks/                    # Custom React hooks
├── lib/                      # Utility functions
├── public/                   # Static assets
├── styles/                   # CSS modules and styles
└── types/                    # TypeScript type definitions

The project uses route groups (folders in parentheses) to organize routes without affecting the URL structure.

Routing System

The frontend uses Next.js App Router with internationalization support. The routing structure is:

Root Routes: /, /login, /settings, etc.
Billing Routes: Routes related to billing management
Dashboard Routes: Routes for accessing various AI services

For details on specific routes, see:

Root Routes

Documentation for root-level routes

Billing Routes

Documentation for billing-related routes

Dashboard Routes

Documentation for dashboard and service routes

Component Categories

The frontend components are organized into several categories:

Billing Components

Components for billing and subscription management

Common Components

Reusable UI components used throughout the application

Dashboard Components

Components specific to the dashboard and AI services

Home Components

Components used on the marketing home page

Layout Components

Layout components like navigation and footer

Settings Components

Components for user settings and profile management

Authentication Flow

The authentication flow uses AWS Cognito and supports:

Email/password registration and login
Social login with Google
Password reset
Email verification
Session management

For more details, see the Authentication documentation.

Internationalization

The frontend supports internationalization through Next.js's built-in i18n routing. All text is stored in language-specific JSON files, allowing easy translation to different languages.

For more details, see the Internationalization guide.

Styling System

The UI is styled with Tailwind CSS, providing:

Consistent design language
Responsive layouts
Dark/light mode support
Custom component styling

For more details about customizing the UI, see the Theming guide.

Next Steps

To learn more about specific aspects of the frontend: