Deployment Strategy

Deployment Overview

Blogify is designed as a decoupled full-stack application. To achieve optimal performance and scalability, the architecture is split across specialized hosting providers:

• Frontend: Vercel (Next.js optimized hosting)
• Backend API: Railway (Containerized FastAPI hosting)
• Database, Auth & Storage: Supabase (PostgreSQL and Object Storage)

---

1. Database & Authentication (Supabase)

Before deploying the application code, you must set up your backend services and security policies.

Project Setup

1. Create a new project in the Supabase Dashboard.
2. Run the following SQL in the SQL Editor to create the necessary tables:

   -- Create a posts table
   create table posts (
     id uuid default gen_random_uuid() primary key,
     title text not null,
     content text not null,
     user_id uuid references auth.users not null,
     tags text[] default '{}',
     image_url text,
     created_at timestamp with time zone default now(),
     updated_at timestamp with time zone
   );
   
   -- Enable Row Level Security (RLS)
   alter table posts enable row level security;
   

Storage Setup

1. Navigate to Storage in Supabase.
2. Create a new public bucket named images.
3. Set up an RLS policy to allow authenticated users to upload files.

---

2. Backend Deployment (Railway)

The FastAPI backend handles high-performance API requests and can be deployed easily using Railway's GitHub integration.

Steps to Deploy

1. Log in to Railway and click New Project.
2. Select Deploy from GitHub repo and choose your BLOGIFY repository.
3. In the Settings tab, ensure the build command is detected and the start command is set to:

   uvicorn main:app --host 0.0.0.0 --port ${PORT}
   

Environment Variables

Add the following variables in the Railway Variables tab:

• MONGODB_URI: Your MongoDB Atlas connection string.
• MONGODB_DB: The name of your production database.

---

3. Frontend Deployment (Vercel)

The Next.js frontend is optimized for Vercel, supporting Server-Side Rendering (SSR) and efficient static generation.

Steps to Deploy

1. Connect your GitHub account to Vercel.
2. Select the BLOGIFY repository.
3. Vercel will automatically detect the Next.js framework.
4. Set the Root Directory to frontend if your repository structure is nested.

Environment Variables

Configure these variables in the Vercel project settings to connect the frontend to your services:

| Variable | Description | | :--- | :--- | | NEXT_PUBLIC_API_URL | The URL of your deployed Railway backend API. | | NEXT_PUBLIC_SUPABASE_URL | Your Supabase Project URL (found in Project Settings). | | NEXT_PUBLIC_SUPABASE_ANON_KEY | Your Supabase Project API "anon" key. |

---

Post-Deployment Checklist

After the services are live, verify the following:

1. CORS Settings: Ensure your Backend API (Railway) allows requests from your Vercel domain. Update your FastAPI middleware configuration if necessary.
2. Auth Redirects: In the Supabase Auth settings, add your Vercel URL to the Site URL and Redirect Allow List to ensure login flows work correctly.
3. Storage Access: Test an image upload from a new blog post to ensure the images bucket is accessible and the public URLs are rendering correctly.

Production Environment Summary

• Frontend URL: https://your-app-name.vercel.app
• Backend URL: https://your-api-name.railway.app
• Health Check: Access https://your-api-name.railway.app/docs to verify the API is running.