System Architecture

Blogify utilizes a hybrid architectural model that balances the high performance of a FastAPI backend with the rich, interactive user experience of Next.js 16. By offloading identity management and media storage to Supabase, the system maintains a lightweight footprint while ensuring enterprise-grade security.

High-Level Architecture

The system is split into three primary layers:

1. Frontend (Next.js): Acts as the user interface and orchestrates direct communication with Supabase for authentication and file uploads to reduce backend overhead.
2. API Layer (FastAPI): Serves as the gatekeeper for structured data (posts and user profiles). It performs business logic and validates security tokens.
3. Service Layer (Supabase): Provides the underlying PostgreSQL database, Auth engine, and S3-compatible storage.

Core Components

Frontend (Next.js)

The frontend is built using the Next.js 16 App Router and React 19. It is designed as a "thick client" that handles:

• State Management: Local user context and session persistence.
• Direct-to-Service Uploads: Images are sent directly to Supabase Storage, bypassing the Python backend to optimize performance.
• Markdown Rendering: Rich text content is processed on the client using react-markdown with full KaTeX support for mathematical expressions.

Backend (FastAPI)

The Python-based backend handles the "heavy lifting" of data management.

• JWT Verification: Every protected request is intercepted by a security middleware that validates the Supabase-issued JWT using PyJWT.
• Pydantic Modeling: All data entering and leaving the API is strictly typed and validated using Pydantic schemas.
• CORS Management: Configured to securely allow communication between the Vercel-hosted frontend and the Railway-hosted backend.

Database & Storage (Supabase)

• PostgreSQL: Stores structured data for users and posts.
• Row Level Security (RLS): While FastAPI handles most data access, the database is structured to support future RLS policies for direct frontend querying if needed.
• Storage Buckets: Organizes public assets (avatars) and private post content (images).

Authentication Workflow

Blogify implements a Stateless JWT-based Authentication flow:

1. Authentication: The user submits credentials via the Next.js frontend directly to Supabase Auth.
2. Token Issuance: Supabase returns an access_token (JWT).
3. Authorization: For any data-sensitive request (e.g., creating a post), the frontend attaches this JWT to the Authorization: Bearer <token> header.
4. Validation: The FastAPI backend receives the request, extracts the JWT, and verifies its signature against the Supabase Project Secret.
5. Execution: If valid, FastAPI fulfills the database request; otherwise, it returns a 401 Unauthorized response.

Data Schema Overview

The system revolves around two primary entities:

Posts

| Field | Type | Description | |---|---|---| | id | UUID | Primary Key | | title | String | Post headline | | content | Markdown | The body of the blog (supports math/images) | | user_id | UUID | Foreign Key to the User profile | | tags | Array | List of categorized strings | | image_url | String | Path to the featured image in Supabase Storage |

Users

| Field | Type | Description | |---|---|---| | id | UUID | Maps to Supabase Auth UUID | | name | String | Display name | | email | String | Unique user email | | profile_picture | String | URL to the user's avatar image |

Hosting & Deployment

The application is optimized for distributed hosting to ensure high availability:

• Client Side: Deployed on Vercel for edge caching and fast global delivery.
• API Side: Hosted on Railway, providing a persistent environment for the Python/Uvicorn server.
• Persistence Side: Managed by Supabase Cloud, ensuring database backups and global file delivery via CDN.