Frontend Components
Detailed breakdown of frontend page structure, components, and integration patterns
Frontend Components
This section provides a detailed breakdown of the frontend component architecture, page organization, and integration patterns within the AI SaaS Boilerplate frontend application.
Page Structure Layer
The page structure follows Next.js App Router conventions with internationalization support, organizing user-facing routes and functionality.
Application Routes
| Route Category | Directory Path | Purpose |
|---|---|---|
| Landing Pages | src/app/[locale]/ | Public pages including home, contact, privacy |
| Authentication | src/app/[locale]/login/ | User login and registration flows |
| Dashboard | src/app/[locale]/dashboard/ | AI services interface and user workspace |
| Billing System | src/app/[locale]/(billing)/ | Payment, subscription, and billing management |
| Account Management | src/app/[locale]/settings/ | User preferences and account configuration |
AI Service Pages
All AI services follow consistent page patterns for user interaction:
| Service Category | Page Locations | Service Types |
|---|---|---|
| Document Services | dashboard/ocr/, dashboard/pdf-chat/ | Text extraction, document interaction |
| Image Services | dashboard/image-gen/, dashboard/rembg/, dashboard/bg-replacement/, dashboard/object-removal/, dashboard/object-replacement/, dashboard/photo-to-anime/ | AI generation, background editing, style transfer |
| Video Services | dashboard/yt-video-chat/, dashboard/yt-video-summarizer/ | YouTube interaction, content summarization |
Consistent Service Page Structure:
- File Upload Interface: Drag-and-drop or file selection
- Parameter Configuration: Service-specific options and settings
- Processing Interface: Progress indicators and status updates
- Results Display: Generated content and download options
- Credit Usage: Real-time credit consumption feedback
Billing and Subscription Pages
| Page | Directory Path | Functionality |
|---|---|---|
| Subscription Management | (billing)/subscription-management/ | View and modify subscription plans |
| Payment Methods | (billing)/add-payment-method/ | Add and manage payment methods |
| Plan Changes | (billing)/change-plan/ | Upgrade or downgrade subscription plans |
| Billing Information | (billing)/update-billing-info/ | Update customer billing details |
| Credit Purchasing | purchase-credits/ | Purchase additional credits |
Component Architecture Layer
The component architecture organizes reusable UI elements by feature area and functionality, promoting code reuse and consistent user experience.
Dashboard Components
| Component Category | Directory Path | Purpose |
|---|---|---|
| Layout Components | src/components/dashboard/layout/ | Dashboard navigation, sidebar, header |
| Common Elements | src/components/dashboard/common/ | Shared dashboard UI components |
| Service Components | src/components/dashboard/services/ | AI service-specific UI elements |
Service Component Organization:
| Service Type | Component Path | UI Elements |
|---|---|---|
| Document Services | src/components/dashboard/services/document/ | PDF viewers, text displays, document upload |
| Image Services | src/components/dashboard/services/image/ | Image galleries, generation controls, editing tools |
| Video Services | src/components/dashboard/services/video/ | Video players, transcript displays, interaction interfaces |
Shared Component Library
| Component Category | Directory Path | Components Included |
|---|---|---|
| Common UI | src/components/common/ | Buttons, forms, modals, loading states |
| Layout | src/components/layout/ | Navigation, headers, footers, page layouts |
| Billing | src/components/billing/ | Payment forms, subscription cards, pricing displays |
| Settings | src/components/settings/ | Profile forms, preference controls, account management |
| Home | src/components/home/ | Landing page sections, feature showcases |
Feature-Specific Components
| Feature | Component Details |
|---|---|
| Features Section | src/components/home/FeaturesSection/ - Showcases AI services with preview data and category organization |
| Pages Components | src/components/pages/ - Page-specific components that don't fit into other categories |
Integration Layer
The integration layer manages connections between the frontend and various backend services, APIs, and third-party integrations.
Custom React Hooks
| Hook | File Path | Purpose |
|---|---|---|
| API Integration | src/hooks/useApiCall.js | Generic hook for backend API calls with error handling |
| Document Management | src/hooks/useDocumentList.js, src/hooks/useDocumentManager.js | Document upload, processing, and management |
| Video Management | src/hooks/useVideoList.js, src/hooks/useVideoManager.js | YouTube video processing and interaction |
| Payment Integration | src/hooks/useStripePricing.js | Stripe pricing and subscription management |
Hook Patterns:
- State Management: Loading states, error handling, data caching
- API Abstraction: Simplified interfaces for complex backend operations
- Real-time Updates: Integration with GraphQL subscriptions
- Error Handling: Consistent error messaging and user feedback
GraphQL Integration
| Component | File Path | Functionality |
|---|---|---|
| Queries | src/Graphql/queries.js | GraphQL queries for user credit data |
| Subscriptions | src/Graphql/subscriptions.js | Real-time credit balance updates |
GraphQL Usage Patterns:
- Credit Monitoring: Real-time credit balance tracking
- User Data: Profile and preference synchronization
- Subscription Updates: Live updates when credits are consumed
Payment System Integration
| Component | File Path | Purpose |
|---|---|---|
| Stripe API | src/stripe/subscriptionApi.js | Stripe SDK integration for payments |
Payment Integration Features:
- Subscription Management: Create, modify, cancel subscriptions
- Payment Methods: Add, remove, update payment methods
- Billing Information: Customer billing data management
- Invoice Handling: Payment history and invoice retrieval
AWS Integration
| Integration Point | Configuration | Purpose |
|---|---|---|
| Amplify Setup | src/amplify-setup.js | AWS Amplify configuration for authentication and APIs |
| S3 File Operations | Integrated through Amplify | File uploads and downloads for AI services |
| Cognito Authentication | Configured in amplify-setup | User authentication and session management |
Configuration Layer
The configuration layer manages application setup, styling, and development environment configuration.
Application Configuration
| Configuration | File Path | Purpose |
|---|---|---|
| Next.js Config | next.config.mjs | Next.js framework configuration and build settings |
| Tailwind Config | tailwind.config.cjs | Tailwind CSS customization and theme configuration |
| PostCSS Config | postcss.config.cjs | CSS processing and optimization |
| Internationalization | src/i18n.js, src/i18n/ | Multi-language support configuration |
Development Utilities
| Utility | File Path | Purpose |
|---|---|---|
| Translation Scanner | scripts/scanTranslations.cjs | Automated translation file management |
| Constants | src/constants/index.js | Application-wide constants and configuration |
| Utilities | src/utils/utilities.js | Common utility functions |
| YouTube Utilities | src/utils/Youtube.js | YouTube API integration helpers |
| Font Configuration | src/fonts/index.js | Custom font loading and configuration |
Integration Patterns
Next Steps
Now that you understand the frontend components:
- Review Customization for guidance on modifying UI components and adding new features
- Explore Backend to understand how frontend components integrate with server-side services
- Check Infrastructure to see how the frontend deployment connects to AWS services