Font Center

A premium font management dashboard for browsing, previewing, favoriting, downloading, and organizing typefaces.

Highlights · Screenshots · Getting Started · Supabase Setup

Font Center is a polished desktop-grade font management product built with React, Vite, Tailwind CSS, shadcn-style UI components, and Supabase. It combines a rich type browsing experience with email authentication and real backend sync through Supabase Edge Functions and Postgres.

Highlights

• Browse a curated font library with categories, ratings, tags, metadata, and responsive grid/list views.
• Load the full Google Fonts catalog through the Web Fonts Developer API, with a bundled fallback catalog for local setup.
• Preview font families, inspect variable font axes, compare typefaces, and explore glyph/character tools.
• Download real font files from connected catalog metadata when available.
• Sign in or create an account with Supabase email/password authentication.
• Save library and favorite state locally, then sync it to Supabase through an Edge Function.
• Use a Supabase-backed key/value store without exposing privileged database credentials in the frontend.
• Dark, desktop-grade interface with collapsible navigation, dashboard stats, and product-ready screenshots.

Screenshots

Landing	Sign In

Home	Library

Favorites	Variable Playground

Tech Stack

• React 18
• Vite 6
• Tailwind CSS 4
• Motion
• Lucide React
• Supabase Edge Functions
• Supabase Postgres
• Supabase Auth

Getting Started

Install dependencies:

npm install

Run the app locally:

npm run dev

Build for production:

npm run build

GitHub Pages Deployment

This repo includes .github/workflows/deploy.yml. After GitHub Pages is set to use GitHub Actions as its source, every push to main or master will build the Vite app and deploy dist/ to Pages.

For a normal project Pages URL like https://user.github.io/FontCenterApplicationDesign/, the workflow automatically sets:

VITE_BASE_PATH=/<repository-name>/

If you deploy to a custom domain or a root user.github.io repository, set the repository variable VITE_BASE_PATH to / in GitHub:

Settings -> Secrets and variables -> Actions -> Variables

Optional catalog settings can also be configured there. Put VITE_GOOGLE_FONTS_API_KEY in Actions secrets, and non-secret Vite options such as VITE_FONT_PAGE_SIZE or VITE_ENABLE_BUNNY_FONTS in Actions variables.

Refresh the auth screenshot:

npm run screenshots

The screenshot script expects the Vite dev server to be available at http://127.0.0.1:5173/. To refresh signed-in dashboard screenshots, set SCREENSHOT_EMAIL and SCREENSHOT_PASSWORD before running the command.

Supabase Setup

Create a local .env from .env.example and fill in your own secrets:

SUPABASE_URL=https://your-project-ref.supabase.co
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
SUPABASE_ACCESS_TOKEN=your-personal-access-token
SUPABASE_FUNCTION_NAME=make-server-08f3b40f
VITE_GOOGLE_FONTS_API_KEY=your-google-fonts-api-key
VITE_FONT_CATALOG_LIMIT=0
VITE_FONT_PAGE_SIZE=32
VITE_GOOGLE_FONTS_SORT=popularity
VITE_ENABLE_FONTSOURCE=true
VITE_FONTSOURCE_CATALOG_LIMIT=0
VITE_ENABLE_BUNNY_FONTS=true

Do not commit .env. The service role key and access token are secrets.

VITE_GOOGLE_FONTS_API_KEY is optional for local development. Without it, Font Center uses the bundled sample catalog plus Fontsource when enabled. With it, the app requests the Google Web Fonts API at runtime. Set VITE_FONT_CATALOG_LIMIT=0 and VITE_FONTSOURCE_CATALOG_LIMIT=0 to keep the full returned catalogs, then use VITE_FONT_PAGE_SIZE to control how many families are rendered and preloaded per page. Bunny Fonts is supported as a no-key Google-compatible CSS mirror through VITE_ENABLE_BUNNY_FONTS=true. Restrict the Google public browser key in Google Cloud to your localhost and production domains before deployment.

Enable email/password authentication in Supabase:

Authentication -> Providers -> Email

If email confirmation is enabled, newly created users must confirm their inbox before signing in.

Create the database table:

create table if not exists public.kv_store_08f3b40f (
  key text not null primary key,
  value jsonb not null
);

alter table public.kv_store_08f3b40f enable row level security;

The same SQL is included in supabase/migrations/20260728150000_create_kv_store.sql.

Deploy the Edge Function:

npx supabase functions deploy make-server-08f3b40f --project-ref your-project-ref --use-api

The frontend currently reads the public Supabase project config from utils/supabase/info.tsx and calls:

https://<project-ref>.supabase.co/functions/v1/make-server-08f3b40f

Authenticated sync requests send the user's Supabase access token to the Edge Function. The function validates the token before reading or writing account-scoped state.

Data Sync

The app stores a stable browser device id in localStorage under fc:deviceId. Synced records use namespaced keys:

u:<device-id>:library
u:<device-id>:favorites
u:<device-id>:collections
u:<device-id>:profile

This keeps the frontend anonymous while still preserving each browser's font state across sessions.

Project Structure

src/app/                         React application
src/app/components/              Shared UI and layout components
src/app/pages/                   Product pages and tools
src/app/lib/api.ts               Supabase Edge Function client
src/app/lib/persist.ts           Local persistence helpers
supabase/functions/              Supabase Edge Function source
supabase/migrations/             Database schema
docs/screenshots/                GitHub README screenshots
utils/supabase/info.tsx          Public Supabase project config

License

This repository is prepared as a standalone product codebase. Add your preferred license before publishing for public reuse.