Basis

Final project — Internet Technologies (Fullstack) course — Caroline Genzel

Live site: basis-app-sigma.vercel.app

What is Basis

Basis is a leverage platform for small business owners and freelancers of any kind - bakers, nail artists, photographers, trainers, and so on. A small business owner is usually very good at their craft, but weak on marketing, pricing, and professional paperwork. The app takes minimal input from them (a short questionnaire, filled out once) and turns it into professional deliverables: marketing content, a data-driven price recommendation, price quotes as PDF files, and a public business page that can be sent to clients.

Main Features

• Secure sign-up and login (Supabase Auth)
• Onboarding questionnaire for any kind of business (free-text profession) that creates a business profile, including a unique public URL (slug)
• AI market search (Claude + web search) right after onboarding, which builds a price list tailored to the business - cakes for a baker, gel polish for a nail artist
• Short fit-assessment questionnaire that recommends whether to focus on the pricing advisor, branding, or both
• AI branding ideas (Claude): several ready-to-copy options each for slogans, value proposition, Instagram bio, website text, social posts and a sales pitch
• Pricing advisor based on the AI market search, with search for any specific service
• Quote creation and PDF export, with correct Hebrew rendering
• Public business page (/p/[slug]) with a photo, free text, and downloadable documents - accessible without logging in

Tech Stack

• Next.js 16 (App Router) + React 19 + TypeScript
• Supabase - Postgres database, Auth, and file storage in one project
• Tailwind CSS v4
• Zod - server-side validation on every write action
• @react-pdf/renderer - server-side PDF generation (quotes)
• Anthropic SDK (Claude) - AI market price search and branding ideas
• Vitest - unit tests (see TESTING.md)
• Playwright - end-to-end tests (see TESTING.md)
• Vercel - hosting and deployment

Prerequisites

• Node.js 20+ and npm
• A Supabase project (free tier works)

Running Locally

1. Install dependencies

npm install

2. Set up Supabase

1. Create a new project at supabase.com.

2. In the Supabase dashboard, under SQL Editor, run the following files, in this exact order (each one depends on the ones before it):

   supabase/schema.sql
   supabase/fix_grants.sql
   supabase/add_quote_title.sql
   supabase/add_fit_assessment.sql
   supabase/add_profile_media.sql
   supabase/fix_profile_view.sql
   supabase/update_pricing_real_data.sql
   supabase/add_public_branding_text.sql
   supabase/add_indexes.sql
   supabase/fix_public_access.sql
   supabase/any_business_ai.sql
   

3. Under Settings → API, copy the Project URL, the anon public key, and the service_role key (secret - never expose it).

3. Set environment variables

cp .env.local.example .env.local

Fill in the three values from step 2, plus an Anthropic API key (from platform.claude.com) for the AI market search and branding ideas:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
ANTHROPIC_API_KEY=

.env.local is already in .gitignore - never commit real values in it.

4. Run the app

npm run dev

Open http://localhost:3000. To try the full flow: sign up, then go through onboarding → fit assessment → dashboard → pricing advisor / branding / quotes / public page.

Running Tests

npm test             # single run
npm run test:watch   # watch mode

End-to-end tests (Playwright)

One-time setup, both steps:

npx playwright install chromium

Then run supabase/grant_service_role_for_tests.sql once in the Supabase SQL Editor - the test helpers seed data directly through the service_role admin client, which has no table access until it's explicitly granted one. Not needed to run the app itself, only the e2e tests.

npm run test:e2e

For full details on what's tested, why, and what's intentionally out of scope (for both the unit and end-to-end suites), see TESTING.md.

Lint

npm run lint

Deployment (Vercel)

1. Push the code to GitHub, then import it as a New Project on Vercel.

2. Add the same four environment variables from step 3 under Settings → Environment Variables in the Vercel project.

3. Deploy - Vercel builds and redeploys automatically on every push.

4. Final, critical step: in Supabase, under Authentication → URL Configuration, set:

   • Site URL - the real Vercel domain (https://the-app.vercel.app)
   • Redirect URLs - the same domain with /** at the end

   Without this step, sign-up/login on the live site won't work - Supabase Auth will reject the redirect because it doesn't recognize the domain.

Project Structure

app/
  (public)/       Pages that don't require login: landing, login,
                   sign-up, and the public business page /p/[slug]
  (private)/      Protected pages: onboarding, fit-assessment, dashboard,
                   branding, pricing-advisor, quotes, public-profile
  api/quotes/[id]/pdf/  The only API Route - generates and returns a PDF
                   file
components/
  forms/          All form components (Client Components)
  ui/             Small, reusable UI components
  layout/         Navbar
lib/
  actions/        Server Actions - every write action goes through them
  validations/    Zod schemas - the same schemas used client- and
                   server-side
  templates/      Branding questions, tones and idea categories
  ai/             Claude calls - market price search and branding ideas
  pricing/        Saves the market search results as pricing options
  fit-assessment/ Questionnaire questions and scoring logic
  pdf/            The PDF document and the Hebrew bidi-text fix
  supabase/       Client creation (browser, server, admin)
supabase/
  schema.sql and migration files - run manually in the Supabase SQL
  Editor
proxy.ts          Runs before every request - refreshes the auth cookie
                   (the Next.js 16 equivalent of middleware.ts)