Full-stack React template with Supabase for hosting, database, auth, CI/CD, UI components, state, and forms. Pre-configured for scalable apps handling high traffic.

Requires a free Supabase project to start.

Tech Stack

• Create React App with cra-template-pwa-typescript: React, TypeScript, Jest tests, PWA support.
• Supabase for hosting, Postgres DB (offline-enabled), authentication.
• GitHub Actions for CI/CD automation.
• Chakra UI for components, Zustand for state, React Hook Form for forms, React Testing Library.

Setup

Configure Supabase project: enable services, copy config from Project Settings > API, paste into src/db/initSupabase.ts. Set default project in .supabaserc.

For CI deploys: generate token with yarn supabase login:ci, add SUPABASE_TOKEN as GitHub secret (Settings > Secrets), uncomment deploy lines in .github/workflows/ci.yml. Pushes trigger tests, builds, deploys.

Development

Run yarn start—uses local Supabase emulator, no project quota usage. Extend Firestore-like types in src/types/Database.ts and collection paths in src/types/SupabasePaths.ts.

Testing

Follow RTL best practices for user-like integration tests. Use /tests/utils helpers:

import renderApp from './utils/renderApp'
import { mockCollection } from './utils/supabaseMocks'

test('display all pets', () => {
  mockCollection('pets', { id: 'test', name: 'Abc' })
  const view = renderApp()
  expect(view.getByText('Abc')).toBeInTheDocument()
})