Home

DRIPLENS-WEB

A full-stack creator marketplace connecting brands with world-class creative talent.

---

Table of Contents

• Overview
• Tech Stack
• Project Structure
• Getting Started
• Environment Variables
• Database Setup
• Storage Buckets
• API Reference
• Known Issues & Fixes

---

Overview

DRIPLENS is a creator discovery and hiring platform. Brands can browse creators by discipline, budget, reach, and platform. Creators build a profile, upload portfolio work, and receive hiring requests with real-time messaging.

Key features:

• Creator discovery with filters (discipline, budget, reach, platform, availability, rating)
• Portfolio upload (images + video, up to 50 MB)
• Hiring requests with status lifecycle (Pending → Accepted → Completed)
• Real-time messaging via Socket.io + Supabase Realtime
• Role-based access: creator and brand
• JWT auth with Supabase Auth backend

---

Tech Stack

Layer	Technology
Frontend	React 18, Vite, Tailwind CSS, Framer Motion
Backend	Node.js, Express 5, ES Modules
Database	Supabase (PostgreSQL)
Storage	Supabase Storage
Auth	Supabase Auth + JWT
Realtime	Socket.io + Supabase Realtime
Validation	Zod
Logging	Winston
Testing	Jest + Supertest

---

Project Structure

DRIPLENS-WEB/ ├── client/ # React frontend (Vite) │ ├── src/ │ │ ├── pages/ # Route-level components │ │ ├── components/ # Shared UI components │ │ ├── context/ # AuthContext, OnboardingContext, SocketContext │ │ ├── lib/ # api.js, supabase.js │ │ └── services/ # externalMediaService.js │ └── .env.example │ ├── server/ # Express backend │ ├── routes/v1/ # creators, upload, auth, messages, hiring │ ├── services/ # creatorService, uploadService, authService... │ ├── middleware/ # auth, validate, rateLimiter, errorHandler │ ├── schemas/ # Zod schemas for all routes │ ├── utils/ # supabase.js (service role), AppError, logger │ └── .env.example │ └── supabase/ └── migrations/ # Run in order: 001 → 005

---

Getting Started

Prerequisites

• Node.js 18+
• A Supabase project

1. Clone the repo

git clone https://github.com/switchd2/DRIPLENS-WEB.git
cd DRIPLENS-WEB

2. Install dependencies

# Backend
cd server && npm install

# Frontend
cd ../client && npm install

3. Set up environment variables

Copy the example files and fill in your values:

cp server/.env.example server/.env
cp client/.env.example client/.env

See Environment Variables below.

4. Run the database migrations

In your Supabase project → SQL Editor, paste and run each file in order:

1. supabase/migrations/20240001_initial_schema.sql
2. supabase/migrations/20240002_rls_policies.sql
3. supabase/migrations/20240003_add_social_links.sql
4. supabase/migrations/20240004_profile_storage.sql
5. supabase/migrations/20240005_advanced_filters.sql

5. Create Storage Buckets

In Supabase Dashboard → Storage → New Bucket:

Bucket name	Public
portfolio-media	✅ Yes
profiles	✅ Yes

6. Start the dev servers

# Terminal 1 — Backend (http://localhost:5000)
cd server && npm run dev

# Terminal 2 — Frontend (http://localhost:5173)
cd client && npm run dev

---

Environment Variables

Server (server/.env)

Variable	Description
NODE_ENV	development or production
PORT	Express server port (default: 5000)
CLIENT_URL	Frontend URL for CORS (e.g. http://localhost:5173)
SUPABASE_URL	Your Supabase project URL
SUPABASE_SERVICE_ROLE_KEY	Service role key (bypasses RLS — keep secret!)
LOG_LEVEL	Winston log level (info, debug, error)

Client (client/.env)

Variable	Description
VITE_API_URL	Backend URL (e.g. http://localhost:5000)
VITE_SUPABASE_URL	Your Supabase project URL
VITE_SUPABASE_ANON_KEY	Supabase anon/public key
VITE_PEXELS_API_KEY	Pexels API key (external media)
VITE_PIXABAY_API_KEY	Pixabay API key (external media)

---

Database Setup

The schema uses 4 core tables:

Table	Description
profiles	One row per user (creator or brand). Auto-created on signup via trigger.
portfolio_items	Media uploaded by creators. Linked to profiles.
hiring_requests	Briefs posted by brands, optionally targeting a creator.
messages	Chat messages scoped to a hiring request. Realtime enabled.

Important: Profile role must be set at signup

The handle_new_user() trigger reads raw_user_meta_data->>'role' from Supabase Auth. If a profile appears with role = NULL, fix it manually:

UPDATE public.profiles
SET role = 'creator'   -- or 'brand'
WHERE username = 'your-username';

---

Storage Buckets

Bucket	Path format	Used for
portfolio-media	portfolio/{user_uuid}/{file_uuid}.ext	Portfolio uploads
profiles	images/{user_uuid}/{type}_{file_uuid}.ext	Avatars and banners

Both buckets must be public. Storage RLS policies are defined in 20240002_rls_policies.sql and 20240004_profile_storage.sql.

---

API Reference

All routes are prefixed with /api/v1.

Auth

Method	Route	Auth	Description
POST	/auth/register	No	Register new user
POST	/auth/login	No	Login and receive JWT

Creators

Method	Route	Auth	Description
GET	/creators	No	List/filter creators
GET	/creators/:id	No	Get creator profile
PATCH	/creators/profile	✅	Update own profile

Upload

Method	Route	Auth	Role
POST	/upload/portfolio	✅	creator
POST	/upload/avatar	✅	Any
POST	/upload/banner	✅	Any
GET	/upload	No	List portfolio items

Messages & Hiring

Method	Route	Auth	Description
GET	/hiring	✅	List hiring requests
POST	/hiring	✅ Brand	Create hiring request
PATCH	/hiring/:id	✅	Update status
GET	/messages/:hiringId	✅	Get messages
POST	/messages	✅	Send message

---

Known Issues & Fixes

"BUCKET NOT FOUND" on upload

You need to manually create the portfolio-media and profiles buckets in Supabase Storage. See Storage Buckets.

Creators page shows "No Matches"

Your profile's role column may be NULL. Run the SQL fix in Database Setup.

Migrations must be run in order

Each migration file depends on the previous one. Always run 001 → 005 sequentially. Running them out of order will cause column-not-found errors.