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:
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
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