8x Hiring Template

A modern SaaS starter template for frontend engineering assessments. Built with Next.js 16, React 19, TypeScript, Tailwind CSS, and Supabase.

Quick Start

Prerequisites

• Node.js (v20+)
• pnpm (or npm/yarn)
• Docker (for local Supabase)
• Supabase CLI

Setup

1. Clone the repository

   git clone <repo-url>
   cd 8x-hiring-template

2. Install dependencies

   pnpm install

3. Start local Supabase

   # If you have another Supabase project running, stop it first:
   # supabase stop --project-id <other-project>
   
   supabase start

   This will output your local credentials (note: this project uses custom ports):

   API URL: http://127.0.0.1:54521
   Publishable key: sb_publishable_...
   Secret key: sb_secret_...
   

   Migrations are applied automatically during startup.

4. Configure environment

   cp .env.example .env.local

   Then edit .env.local with the keys from step 3:

   NEXT_PUBLIC_SUPABASE_URL="http://127.0.0.1:54521"
   NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY="<your-publishable-key>"
   SUPABASE_SERVICE_ROLE_KEY="<your-secret-key>"
   

5. Start development server

   pnpm dev

6. Open http://localhost:3000

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• UI: React 19 + Tailwind CSS + Shadcn/ui
• Database: Supabase (PostgreSQL)
• Auth: Supabase Auth (email/password)

Features

• User authentication (sign up, sign in, sign out)
• Protected routes
• Subscription tiers (Free / Pro)
• Profile management
• Account deletion
• Responsive design
• Dark mode support

Project Structure

├── app/                    # Next.js App Router pages
│   ├── api/               # API routes
│   ├── auth/              # Auth pages (login, signup)
│   ├── profile/           # User profile
│   └── upgrade/           # Subscription upgrade flow
├── components/            # Reusable UI components
├── contexts/              # React Context providers
├── lib/                   # Utilities and Supabase clients
└── supabase/              # Database migrations

Useful Commands

pnpm dev          # Start development server
pnpm build        # Build for production
pnpm lint         # Run ESLint
supabase start    # Start local Supabase (applies migrations)
supabase stop     # Stop local Supabase
supabase studio   # Open Supabase Studio (local admin UI)

Database Schema

The template uses a simple subscriptions table:

CREATE TABLE subscriptions (
  id UUID PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id),
  tier TEXT CHECK (tier IN ('free', 'pro')),
  created_at TIMESTAMP,
  updated_at TIMESTAMP
);

Notes

• No real payments: The upgrade flow is simulated (writes directly to database)
• Local auth: Email verification is disabled in development mode
• Test accounts: Use any email/password to sign up locally

---

See CANDIDATE_ASSIGNMENT.md for assessment instructions.