DeployFrame Docs

Frontend Overview

Understanding the AI SaaS Boilerplate frontend architecture and Next.js application structure

Frontend Overview

The AI SaaS Boilerplate frontend is built with Next.js 14+ using the App Router architecture, providing a modern, responsive web application with internationalization support. This section helps you understand the frontend code structure and organization for future customization.

Frontend Architecture Principles

The frontend follows modern React patterns with clear separation of concerns:

  • App Router Structure: Next.js 14+ App Router for file-based routing and layouts
  • Component-Based Design: Reusable components organized by feature and functionality
  • Integration Layer: Clean separation between UI components and backend API integration
  • Internationalization: Built-in multi-language support (English and French)

The frontend uses JavaScript (not TypeScript) with modern React patterns, Tailwind CSS for styling, and AWS Amplify for authentication and API integration.

Frontend Code Structure

The frontend is organized following Next.js App Router conventions with additional structure for AI services and integrations:

frontend/
├── src/
│   ├── app/                                  # Next.js App Router structure
│   │   ├── [locale]/                         # Internationalized routes
│   │   │   ├── (billing)/                    # Billing and subscription pages
│   │   │   │   ├── add-payment-method/
│   │   │   │   ├── change-plan/
│   │   │   │   ├── subscription-management/
│   │   │   │   └── update-billing-info/
│   │   │   ├── dashboard/                    # AI services dashboard
│   │   │   │   ├── bg-replacement/           # Image background services
│   │   │   │   ├── image-gen/                # AI image generation
│   │   │   │   ├── object-removal/           # Image editing services
│   │   │   │   ├── object-replacement/
│   │   │   │   ├── ocr/                      # Document text extraction
│   │   │   │   ├── pdf-chat/                 # PDF interaction service
│   │   │   │   ├── photo-to-anime/           # Image style transfer
│   │   │   │   ├── rembg/                    # Background removal
│   │   │   │   ├── yt-video-chat/            # YouTube video interaction
│   │   │   │   └── yt-video-summarizer/      # Video summarization
│   │   │   ├── contact/                      # Contact and support pages
│   │   │   ├── login/                        # Authentication pages
│   │   │   ├── privacy/                      # Legal pages
│   │   │   ├── purchase-credits/             # Credit purchasing
│   │   │   ├── settings/                     # User account settings
│   │   │   └── subscription/                 # Subscription management
│   │   └── globals.css                       # Global styles and Tailwind imports
│   ├── components/                           # Reusable React components
│   │   ├── billing/                          # Payment and subscription components
│   │   ├── common/                           # Shared UI components
│   │   ├── dashboard/                        # Dashboard-specific components
│   │   │   ├── common/                       # Shared dashboard elements
│   │   │   ├── layout/                       # Dashboard layout components
│   │   │   └── services/                     # AI service components
│   │   │       ├── document/                 # Document processing UI
│   │   │       ├── image/                    # Image processing UI
│   │   │       └── video/                    # Video processing UI
│   │   ├── home/                             # Landing page components
│   │   ├── layout/                           # Global layout components
│   │   ├── pages/                            # Page-specific components
│   │   └── settings/                         # Settings page components
│   ├── hooks/                                # Custom React hooks
│   │   ├── useApiCall.js                     # Generic API calling hook
│   │   ├── useDocumentList.js                # Document management
│   │   ├── useDocumentManager.js             # Document operations
│   │   ├── useStripePricing.js               # Stripe pricing integration
│   │   ├── useVideoList.js                   # Video management
│   │   └── useVideoManager.js                # Video operations
│   ├── Graphql/                              # GraphQL integration
│   │   ├── queries.js                        # GraphQL queries for credits
│   │   └── subscriptions.js                  # Real-time GraphQL subscriptions
│   ├── stripe/                               # Stripe payment integration
│   │   └── subscriptionApi.js                # Subscription management API
│   ├── i18n/                                 # Internationalization setup
│   │   ├── request.js                        # Server-side i18n handling
│   │   └── routing.js                        # Locale routing configuration
│   ├── utils/                                # Utility functions
│   │   ├── utilities.js                      # General utility functions
│   │   └── Youtube.js                        # YouTube API utilities
│   ├── constants/                            # Application constants
│   ├── fonts/                                # Font configurations
│   ├── lib/                                  # Shared libraries and utilities
│   └── amplify-setup.js                      # AWS Amplify configuration
├── messages/                                 # Translation files (EN/FR)
├── scripts/                                  # Build and development scripts
├── next.config.mjs                           # Next.js configuration
├── tailwind.config.cjs                       # Tailwind CSS configuration
└── postcss.config.cjs                        # PostCSS configuration

The [locale] directory structure enables internationalization, allowing the same page structure to serve content in multiple languages (English and French) based on the URL path.

Technology Stack

Frontend Framework:

  • Next.js 14+ with App Router
  • React with JavaScript (not TypeScript)
  • Tailwind CSS for styling and responsive design

Authentication & APIs:

  • AWS Amplify for authentication integration
  • GraphQL (AppSync) for real-time credit management
  • REST APIs for AI services and payment processing

Integrations:

  • Stripe SDK for payment processing
  • AWS SDK for S3 file operations
  • OpenAI integration for AI services

Development Tools:

  • PostCSS for CSS processing
  • Custom build scripts for translations
  • Sitemap generation for SEO

Key Frontend Features

Internationalization Support

The application supports multiple languages with automatic locale detection and routing. Translation files are organized in the messages/ directory with support for English and French.

Responsive Design

Built with Tailwind CSS for mobile-first responsive design, ensuring optimal user experience across all device sizes.

Real-time Updates

Uses GraphQL subscriptions for real-time credit balance updates, providing immediate feedback when users consume credits through AI services.

AI Service Integration

Each AI service has dedicated pages and components with consistent UI patterns for file uploads, parameter configuration, and result display.

Frontend Architecture Categories

The frontend is organized into distinct categories that correspond to different aspects of the user experience:

Page Structure Layer

Next.js App Router pages that define the application routes and user journeys, including landing pages, authentication flows, AI service interfaces, and account management.

Component Architecture Layer

Reusable React components organized by feature area, providing consistent UI elements and functionality across different pages and services.

Integration Layer

Custom hooks, API utilities, and service integrations that connect the frontend to backend services, payment processing, and third-party APIs.

Configuration Layer

Setup files, constants, and utilities that configure the application behavior, styling, and development environment.

Frontend Components Guide

Frontend Components

Detailed breakdown of page structure, components, and integration patterns

Integration with Backend

The frontend integrates with backend services through multiple patterns:

  • REST APIs: Direct integration with AI service Lambda functions
  • GraphQL: Real-time credit management through AppSync
  • Stripe: Payment processing and subscription management
  • AWS Cognito: User authentication and session management
  • S3: File uploads and downloads for AI services

Next Steps

Now that you understand the frontend organization:

  • Explore Frontend Components for detailed component breakdowns
  • Review Customization for guidance on modifying the user interface
  • Check Backend to understand how frontend integrates with server-side services

Previous

Backend Components

Next

Frontend Components

On this page