DeployFrame Docs

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 CategoryDirectory PathPurpose
Landing Pagessrc/app/[locale]/Public pages including home, contact, privacy
Authenticationsrc/app/[locale]/login/User login and registration flows
Dashboardsrc/app/[locale]/dashboard/AI services interface and user workspace
Billing Systemsrc/app/[locale]/(billing)/Payment, subscription, and billing management
Account Managementsrc/app/[locale]/settings/User preferences and account configuration

AI Service Pages

All AI services follow consistent page patterns for user interaction:

Service CategoryPage LocationsService Types
Document Servicesdashboard/ocr/, dashboard/pdf-chat/Text extraction, document interaction
Image Servicesdashboard/image-gen/, dashboard/rembg/, dashboard/bg-replacement/, dashboard/object-removal/, dashboard/object-replacement/, dashboard/photo-to-anime/AI generation, background editing, style transfer
Video Servicesdashboard/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

PageDirectory PathFunctionality
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 Purchasingpurchase-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 CategoryDirectory PathPurpose
Layout Componentssrc/components/dashboard/layout/Dashboard navigation, sidebar, header
Common Elementssrc/components/dashboard/common/Shared dashboard UI components
Service Componentssrc/components/dashboard/services/AI service-specific UI elements

Service Component Organization:

Service TypeComponent PathUI Elements
Document Servicessrc/components/dashboard/services/document/PDF viewers, text displays, document upload
Image Servicessrc/components/dashboard/services/image/Image galleries, generation controls, editing tools
Video Servicessrc/components/dashboard/services/video/Video players, transcript displays, interaction interfaces

Shared Component Library

Component CategoryDirectory PathComponents Included
Common UIsrc/components/common/Buttons, forms, modals, loading states
Layoutsrc/components/layout/Navigation, headers, footers, page layouts
Billingsrc/components/billing/Payment forms, subscription cards, pricing displays
Settingssrc/components/settings/Profile forms, preference controls, account management
Homesrc/components/home/Landing page sections, feature showcases

Feature-Specific Components

FeatureComponent Details
Features Sectionsrc/components/home/FeaturesSection/ - Showcases AI services with preview data and category organization
Pages Componentssrc/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

HookFile PathPurpose
API Integrationsrc/hooks/useApiCall.jsGeneric hook for backend API calls with error handling
Document Managementsrc/hooks/useDocumentList.js, src/hooks/useDocumentManager.jsDocument upload, processing, and management
Video Managementsrc/hooks/useVideoList.js, src/hooks/useVideoManager.jsYouTube video processing and interaction
Payment Integrationsrc/hooks/useStripePricing.jsStripe 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

ComponentFile PathFunctionality
Queriessrc/Graphql/queries.jsGraphQL queries for user credit data
Subscriptionssrc/Graphql/subscriptions.jsReal-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

ComponentFile PathPurpose
Stripe APIsrc/stripe/subscriptionApi.jsStripe 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 PointConfigurationPurpose
Amplify Setupsrc/amplify-setup.jsAWS Amplify configuration for authentication and APIs
S3 File OperationsIntegrated through AmplifyFile uploads and downloads for AI services
Cognito AuthenticationConfigured in amplify-setupUser authentication and session management

Configuration Layer

The configuration layer manages application setup, styling, and development environment configuration.

Application Configuration

ConfigurationFile PathPurpose
Next.js Confignext.config.mjsNext.js framework configuration and build settings
Tailwind Configtailwind.config.cjsTailwind CSS customization and theme configuration
PostCSS Configpostcss.config.cjsCSS processing and optimization
Internationalizationsrc/i18n.js, src/i18n/Multi-language support configuration

Development Utilities

UtilityFile PathPurpose
Translation Scannerscripts/scanTranslations.cjsAutomated translation file management
Constantssrc/constants/index.jsApplication-wide constants and configuration
Utilitiessrc/utils/utilities.jsCommon utility functions
YouTube Utilitiessrc/utils/Youtube.jsYouTube API integration helpers
Font Configurationsrc/fonts/index.jsCustom 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