Autofocus is built on a modern, scalable architecture designed for performance, reliability, and developer experience. Here's how everything fits together.

🎨 Frontend Stack

Next.js 14

React framework with App Router, server-side rendering, and automatic optimization. Configured for standalone deployment with enhanced webpack settings for media handling.

output: 'standalone', productionBrowserSourceMaps: true

Tailwind CSS

Utility-first CSS framework with custom scrollbar support and extensive color palette. Integrated with CSS modules for component-specific styling.

Framer Motion

Advanced animation library powering smooth page transitions, block animations, and interactive elements throughout the platform.

React DnD

Drag and drop functionality for block reordering with touch support for mobile devices. Automatic backend detection (HTML5 vs Touch).

🗄️ Backend Stack

Supabase

Open-source Firebase alternative providing authentication, PostgreSQL database, real-time subscriptions, and row-level security (RLS) policies.

Authentication: Email, OAuth providers (Google, GitHub)

Database: PostgreSQL with real-time capabilities

Storage: File uploads, image optimization

PostgreSQL Schema

Relational database with sophisticated role-based access control, resource limits, and optimized queries for content delivery.

profiles

pages

content_blocks

user_roles

☁️ Infrastructure & Deployment

AWS Amplify

Hosting platform with automatic deployments, CDN distribution, and serverless backend integration. Configured for Next.js with custom build settings.

amplify.yml: npm ci → npm run build → deploy

GitHub Actions

Continuous integration and deployment pipeline triggering automatic builds and deployments to AWS Amplify on push to main branch.

CDN & Caching

Global content delivery with intelligent caching for static assets, images, and frequently accessed content. Image optimization with Next.js Image component.

🔄 Data Flow Architecture

Request Flow

1. User visits → autofoc.us/username/page

2. Next.js SSR → Fetch from Supabase

3. Profile + Page + Blocks → Render Components

4. Real-time subscription → Live Updates

5. User interactions → API mutations

Real-time Features

Supabase real-time subscriptions enable live collaborative editing, instant block updates, and synchronized content changes across all connected clients.

⚡ Performance & Scalability

Frontend Optimizations

• Code splitting with Next.js dynamic imports
• Image optimization with WebP/AVIF support
• Bundle analysis and tree shaking
• Lazy loading for non-critical components
• Service worker for offline capabilities

Backend Optimizations

• PostgreSQL indexes on frequently queried columns
• Row-level security for efficient data filtering
• Connection pooling with Supabase
• Optimized queries with selective field fetching
• Caching layers for static content

🔐 Security Architecture

Authentication & Authorization

Multi-layered security with JWT tokens, role-based access control, and granular permissions.

Authentication

• Supabase Auth with JWT tokens
• OAuth providers (Google, GitHub)
• Email verification required
• Session management with refresh tokens

Authorization

• Role-based permissions system
• Resource limits by subscription tier
• Row-level security policies
• Admin panel access controls

🛠️ Development Workflow

1. Local Development: npm run dev

2. Testing: Cypress E2E tests

3. Build: npm run build

4. Deploy: Git push → GitHub Actions → AWS Amplify

5. Monitor: CloudWatch logs + Supabase dashboard

Quality Assurance

• ESLint + Prettier for code formatting
• TypeScript for type safety where applicable
• Cypress for end-to-end testing
• Manual testing protocols for new features

🚀 Explore More

Block System →

Learn about the expandable content block architecture

Database Schema →

Understand the PostgreSQL data relationships

Architecture Overview