​
Architecture Overview

OnlyAutomator’s web application uses a modern, component-based architecture with:
  • Next.js as the React framework with App Router
  • Tailwind CSS for styling
  • Supabase for database, auth, and storage
  • Stripe for payment processing
  • Resend for email delivery

​
Front-End Architecture

The front-end architecture follows modern React patterns with clean separation of concerns.

​
Key Directories

The application follows a Next.js project structure with additional organization for scalability:
  • /app - Next.js App Router pages and layouts
    • /api - API routes for backend functionality
    • /auth - Authentication related pages
    • /dashboard - Dashboard views
    • /(website) - Public website pages
    • /email-test, /email-preview - Email testing functionality
  • /components - Reusable UI components
    • /ui - Generic UI components
    • /content - Content-related components
    • /shared - Shared components
    • /auth - Authentication components
    • /analytics - Analytics components
    • /dashboard - Dashboard UI
    • /layout - Layout components
    • /emails - Email templates
    • /sections - Page sections
  • /lib - Shared utilities and services
    • /utils - Helper functions and services
    • /analytics - Analytics configuration
    • /auth - Authentication utilities
    • /hooks - Custom React hooks
  • /public - Static assets
  • /styles - Global styles and Tailwind config

​
Back-End Integration

OnlyAutomator uses Next.js API routes to create a serverless back-end that interacts with various services.

​
Authentication Flow

The authentication system uses Supabase Auth with JWT tokens for secure access.

​
Analytics Integration

The application implements a comprehensive analytics system using multiple services.

​
Subscription System

The application uses Stripe for subscription and payment processing.

​
Email System

The application uses Resend for a comprehensive email delivery system.

​
Data Flow Architecture

The application uses a combination of server-side and client-side data fetching with proper caching.

​
Deployment & Configuration

The application is configured for optimal deployment across environments:
  • Environment Variables: Multiple environment files manage configuration
  • Deployment Platform: Vercel with edge function optimization
  • Performance Optimization:
    • Strategic script loading
    • Efficient component architecture
    • Image optimization
  • Security Considerations:
    • Middleware for session validation
    • Secure API routes
    • Environment variable protection
This architecture provides a comprehensive foundation for building and scaling the OnlyAutomator web application.