Back to Home

Backend Setup Guide

Follow this step-by-step guide to set up the backend for your portfolio website using Vercel and Supabase.

1Set Up Vercel for Hosting

Vercel provides an excellent platform for hosting your Next.js portfolio with seamless deployment and global CDN.

  1. Create a Vercel account if you don't have one
  2. Connect your GitHub repository to Vercel
  3. Configure your project settings (environment variables, build commands)
  4. Deploy your project

Pro Tip: Enable automatic deployments so your site updates whenever you push changes to your repository.

2Set Up Supabase for Database

Supabase provides a PostgreSQL database with authentication, storage, and API features that are perfect for your portfolio.

  1. Create a Supabase account
  2. Create a new project
  3. Set up your database tables for projects, categories, and media
-- Create projects table
CREATE TABLE projects (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  title TEXT NOT NULL,
  category TEXT NOT NULL,
  type TEXT NOT NULL,
  role TEXT NOT NULL,
  description TEXT,
  image_url TEXT,
  video_url TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create BTS images table
CREATE TABLE bts_images (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
  image_url TEXT NOT NULL,
  caption TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

3Set Up Media Storage

For your portfolio's images and videos, you'll need reliable storage solutions.

Option A: Supabase Storage

Supabase includes a storage solution that's perfect for your project images and BTS photos.

  1. Create storage buckets in Supabase for "projects" and "bts-images"
  2. Set up appropriate permissions (public read, authenticated write)
  3. Use the Supabase client to upload and manage images

Option B: Vimeo for Videos

For videos, Vimeo offers professional hosting with customizable players.

  1. Sign up for a Vimeo Pro account
  2. Upload your videos
  3. Customize player appearance to match your portfolio
  4. Store video IDs in your Supabase database

4Connect Your Frontend to Supabase

Now let's connect your Next.js frontend to your Supabase backend.

// Install Supabase client
npm install @supabase/supabase-js

// In your lib/supabase.ts file
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Create a data fetching function:

// In your lib/project-data.ts
import { supabase } from './supabase'

export async function getProjects() {
  const { data, error } = await supabase
    .from('projects')
    .select('*')
    .order('created_at', { ascending: false })
  
  if (error) {
    console.error('Error fetching projects:', error)
    return []
  }
  
  return data || []
}

export async function getProjectById(id: string) {
  const { data, error } = await supabase
    .from('projects')
    .select('*, bts_images(*)')
    .eq('id', id)
    .single()
  
  if (error) {
    console.error('Error fetching project:', error)
    return null
  }
  
  return data
}

5Set Up Environment Variables

Add your environment variables to your Vercel project:

  1. Go to your Vercel project settings
  2. Navigate to the Environment Variables section
  3. Add the following variables:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key (for server-side operations)

Also create a local .env.local file with the same variables for development.

Ready to deploy your portfolio?

Deploy to Vercel