Bolder Apps Template

Standard project template for building mobile apps at Bolder Apps. Includes the Expo app scaffold, Claude Code development environment, and documented workflows.

What's Inside

bolder-app-template/
  CLAUDE.md              # AI instructions - how Claude builds your app
  CONVENTIONS.md         # Expo gotchas and patterns (read this first)
  init.sh                # Run after cloning to set up your project
  .claude/
    rules/               # Coding style, security, testing rules
    skills/              # Reusable workflows (scaffold, plan, code-review)
  docs/
    WORKFLOW.md           # Full pipeline: SOW to shipped app
    EXAMPLE-SESSION.md    # Step-by-step walkthrough of a build session
  app/                    # Expo app source
    src/
      app/(auth)/         # Auth screens (welcome, login, register, onboarding)
      app/(app)/          # Main app screens (home, profile)
      stores/             # Zustand state management
      services/           # Supabase client, auth, preferences
      constants/          # Theme tokens and app config
      components/         # Shared UI components
      types/              # TypeScript types and Zod schemas
      hooks/              # Custom React hooks
    supabase/
      migrations/         # Database schema with RLS

Quick Start

1. Clone and initialize

git clone https://github.com/bolderappsdev/bolder-app-template.git my-app
cd my-app
chmod +x init.sh && ./init.sh

The init script asks for your app name and slug, then replaces all placeholders.

2. Set up Supabase

1. Create a project at supabase.com/dashboard
2. Copy app/.env.example to app/.env and fill in your Supabase URL + anon key
3. Push the database migration: cd app && npx supabase db push

3. Install and run

cd app
npm install
npx expo start

Scan the QR code with Expo Go on your phone.

Stack

• Expo SDK 54 + Expo Router v6 (file-based routing)
• React 19 + React Native 0.81
• NativeWind v4 (Tailwind CSS for React Native)
• Supabase (auth, database, edge functions)
• Zustand (client state)
• TanStack Query (server state)
• React Hook Form + Zod (forms and validation)

Using with Claude Code

This template is designed to work with Claude Code. The CLAUDE.md, skills, and rules tell Claude how to build apps the Bolder way.

1. Install Claude Code: npm install -g @anthropic-ai/claude-code
2. Start in the project root: claude
3. Give it a scope of work: "Let's plan how to build this app"
4. Let the skills guide the process

Read docs/WORKFLOW.md for the full development pipeline. Read docs/EXAMPLE-SESSION.md for a step-by-step walkthrough.

Customizing

Brand Colors

Edit app/tailwind.config.js and app/src/constants/theme.ts with your client's colors. Keep the same token names (primary, background, surface) so components work consistently.

Auth Type

The template ships with email/password auth. For OTP or social auth, modify src/services/auth.ts and the auth screens.

Navigation

Edit app/src/app/(app)/_layout.tsx to add or rename tabs. Create new screen files in src/app/(app)/ to add pages.

Database

Add new tables in app/supabase/migrations/. Always enable RLS and create user-scoped policies.

Before You Build

Read these two files:

1. CONVENTIONS.md - Gotchas that appear on every Expo project
2. docs/WORKFLOW.md - How the brainstorm -> plan -> execute -> review pipeline works