devframe

Documentation

Build, edit, and publish portfolios through one App Router system.

These docs summarize the current DevFrame workflow: custom Clerk auth, Supabase persistence, demo-mode fallback, Studio live editing, Builder content management, and public `/p/[slug]` rendering.

Open StudioAPI Reference

DevFrame system map

The same App Router shell powers marketing, Studio, Builder, Dashboard, and public portfolio routes.

App

Next.js 16

App Router under `src/app`

Auth

Clerk

Custom UI, server sessions

Data

Supabase

Portfolio persistence and storage

Output

/p/[slug]

Public portfolio route

Start

Getting started

Install dependencies, copy the example environment file, and start the App Router development server.

Open `http://localhost:3000` and start in Studio or choose a template from `/templates`.
Clerk and Supabase can stay empty for demo-mode exploration.
npm install
cp .env.example .env.local
npm run dev

Environment

Environment variables

DevFrame reads app runtime configuration from `.env.local` and validates it through the environment helper layer.

Optional rate limiting can use Upstash Redis or Vercel KV-compatible REST variables.
DATABASE_URL and DIRECT_URL are for Supabase CLI or ORM workflows, not normal app runtime reads.
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=...
CLERK_SECRET_KEY=...
NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=...
SUPABASE_SERVICE_ROLE_KEY=...

Auth

Auth setup

Clerk provides sessions, but DevFrame keeps the sign-in, sign-up, OAuth, and callback screens custom.

Auth pages live in `src/app/(auth)` and UI components live in `src/components/auth`.
The global header reads auth server-side and passes only display state into the client header surface.
If Clerk keys are missing, `getViewerContext()` activates demo mode with a synthetic user.

Persistence

Supabase setup

Supabase stores the published portfolio record, related projects, experience, sections, and managed assets.

Run `supabase/schema.sql` or the current migrations against your Supabase project.
Set `SUPABASE_SERVICE_ROLE_KEY` for server-side portfolio writes and signed upload URL creation.
When Supabase is unavailable, saves fall back to a secure preview cookie.

Workflow

Creating and editing a portfolio

Studio is the primary live editor, Builder is the structured/mobile editor, and Dashboard is the control center.

Use Studio for fast visual editing with a central live preview.
Use Builder when you want dense form controls for content, template settings, and mobile editing.
The single portfolio record rule means template switches update one owner record instead of creating duplicates.

Publish

Publishing to `/p/[slug]`

A valid slug publishes to a public portfolio route rendered through the shared `PortfolioRenderer` and template registry.

Public pages try Supabase first, then preview cookie data, then seeded examples when available.
Owners can return from a public portfolio page into Studio when they are signed in.
Public routes stay template-agnostic: Nova, Vertex, and Drift all consume the same portfolio record shape.