Skip to main content

Prerequisites

Before you begin, make sure you have the following installed and ready:

Node.js

Version 18.0 or higher

pnpm

Package manager (or npm/yarn)

Supabase Account

Free account at supabase.com

Vercel Account

Free account at vercel.com
This guide assumes you’re comfortable with the command line and have basic knowledge of Git and Node.js.

Step-by-Step Setup

1

Clone and Install

Clone the repository and install dependencies:
# Clone the repository
git clone <your-repo-url>
cd galey-cloud

# Install dependencies
pnpm install
You can also use npm install or yarn install if you prefer those package managers.
2

Configure Environment Variables

Create a .env.local file in the root directory with the following variables:
.env.local
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# Optional: Development redirect URL
NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL=http://localhost:3000/gallery

# Vercel Blob Storage (automatically configured on Vercel)
# BLOB_READ_WRITE_TOKEN=your_vercel_blob_token
The BLOB_READ_WRITE_TOKEN is automatically configured when you deploy to Vercel with Blob storage enabled. For local development, you’ll need to create a Vercel Blob store and add the token.

Getting Your Supabase Credentials

  1. Go to supabase.com and create a new project
  2. Navigate to SettingsAPI
  3. Copy your Project URL (NEXT_PUBLIC_SUPABASE_URL)
  4. Copy your anon public key (NEXT_PUBLIC_SUPABASE_ANON_KEY)

Setting Up Vercel Blob

  1. Install Vercel CLI: npm i -g vercel
  2. Run vercel login
  3. Create a Blob store in your Vercel dashboard
  4. Copy the read-write token to your .env.local
3

Setup Supabase Database

Run the SQL scripts to create the required database tables and security policies.

Create Albums Table

In your Supabase project, go to SQL Editor and run:
CREATE TABLE IF NOT EXISTS public.albums (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT now()
);

ALTER TABLE public.albums ENABLE ROW LEVEL SECURITY;

CREATE POLICY "albums_select_own" ON public.albums
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "albums_insert_own" ON public.albums
  FOR INSERT WITH CHECK (auth.uid() = user_id);

CREATE POLICY "albums_update_own" ON public.albums
  FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "albums_delete_own" ON public.albums
  FOR DELETE USING (auth.uid() = user_id);

Create Photos Table

Then run the second script:
CREATE TABLE IF NOT EXISTS public.photos (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  album_id UUID REFERENCES public.albums(id) ON DELETE SET NULL,
  blob_url TEXT NOT NULL,
  file_name TEXT NOT NULL,
  file_size BIGINT,
  file_type TEXT,
  width INT,
  height INT,
  created_at TIMESTAMPTZ DEFAULT now()
);

ALTER TABLE public.photos ENABLE ROW LEVEL SECURITY;

CREATE POLICY "photos_select_own" ON public.photos
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "photos_insert_own" ON public.photos
  FOR INSERT WITH CHECK (auth.uid() = user_id);

CREATE POLICY "photos_update_own" ON public.photos
  FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "photos_delete_own" ON public.photos
  FOR DELETE USING (auth.uid() = user_id);
The Row Level Security (RLS) policies are critical for data security. Never disable RLS on these tables.
You can also find these scripts in the scripts/ directory of the repository:
  • scripts/001_create_albums.sql
  • scripts/002_create_photos.sql
4

Configure Supabase Authentication

Enable email authentication in your Supabase project:
  1. Go to AuthenticationProviders
  2. Enable Email provider
  3. Configure email templates (optional)
  4. Set Site URL to your domain (e.g., http://localhost:3000 for development)
  5. Add redirect URLs under URL Configuration:
    • http://localhost:3000/gallery (development)
    • https://yourdomain.com/gallery (production)
5

Run the Application

Start the development server:
pnpm dev
The application will be available at http://localhost:3000
pnpm dev

Available Scripts

ScriptCommandDescription
Developmentpnpm devStart development server on port 3000
Buildpnpm buildBuild production bundle
Startpnpm startStart production server
Lintpnpm lintRun ESLint code checks
6

Create Account and Upload Photos

Now you’re ready to use Galey Cloud!
  1. Navigate to http://localhost:3000
  2. Click “Registrate” to create a new account
  3. Enter your email and password
  4. Verify your email (check Supabase email settings)
  5. Login to access your gallery
  6. Upload your first photo by clicking the upload button or dragging files
In development mode, Supabase may not send actual emails. You can confirm users manually in the Supabase dashboard under AuthenticationUsers.

Your First Photo Upload

  1. Click the upload button in the top right
  2. Select one or more photos
  3. Wait for upload confirmation
  4. Photos appear in your gallery

Verify Your Setup

After completing the setup, verify everything is working:
  • Can create new account
  • Can login with email/password
  • Can logout successfully
  • Redirects to gallery after login

Troubleshooting

Problem: Cannot login or signup failsSolutions:
  • Verify your NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY are correct
  • Check that email provider is enabled in Supabase
  • Verify redirect URLs are configured in Supabase
  • Check browser console for detailed error messages
Problem: Photos won’t uploadSolutions:
  • Verify BLOB_READ_WRITE_TOKEN is set (for local development)
  • Check that Vercel Blob is properly configured
  • Ensure you’re logged in (check Network tab for 401 errors)
  • Verify photo file size is reasonable (< 50MB)
Problem: Cannot fetch photos or albumsSolutions:
  • Verify all SQL scripts ran successfully
  • Check that RLS policies are created
  • Confirm tables exist in Supabase Table Editor
  • Verify auth.users table has your user
Problem: Photos uploaded but not showingSolutions:
  • Check browser console for CORS errors
  • Verify blob URLs are accessible (try opening in new tab)
  • Check that photos table has entries with valid blob_url
  • Verify user_id matches your authenticated user
If you encounter RLS policy errors, make sure your Supabase SQL functions are enabled and the auth.uid() function is available.

Next Steps

Congratulations! You now have a working Galey Cloud instance.

Environment Variables

Learn about environment variables configuration

Deployment

Deploy to production on Vercel

API Reference

Explore the API endpoints

Core Features

Learn about gallery features

Need Help?

Join our community or check the documentation for more detailed guides.
  • Check the Troubleshooting section above for common questions
  • Review the Introduction guide for architecture details
  • Submit issues on GitHub for bugs or feature requests

Build docs developers (and LLMs) love