Full-Stack Web & Mobile Template

A production-ready GitHub template for building full-stack applications with a shared codebase across web and mobile platforms. This monorepo provides everything you need to start a new project with authentication, database, API routes, AI chat streaming, email sending, and deployment automation—all wired up and ready to go.

Why This Template?

Stop wasting time on boilerplate. This template gives you a complete, production-ready foundation so you can focus on building your actual product:

• One codebase, two platforms — Share business logic between Next.js web app and React Native mobile app
• Auth that just works — Email/password + OAuth with secure token handling for both web and mobile
• AI-ready — OpenAI integration with streaming, tool calling, and rate limiting built-in
• Deploy in minutes — CI/CD pipeline with automatic migrations and Vercel deployment
• Type-safe end-to-end — TypeScript everywhere with shared types across all packages

Features at a Glance

Feature	Description
Monorepo Architecture	pnpm workspaces + Turborepo for fast, cached builds
Next.js 16 Web App	App Router, Server Components, Middleware, API Routes
React Native Mobile	Bare workflow iOS & Android app with shared API client
Better Auth	Email/password + OAuth, sessions for web, JWT for mobile
PostgreSQL + Drizzle	Type-safe ORM with auto-generated migrations
AI Agent Demo	Streaming chat with tool calling & image generation
Rate Limiting	Upstash Redis-powered protection on auth & API routes
Email Integration	Resend for verification & password reset emails
CI/CD Pipeline	GitHub Actions with tests, migrations, and auto-deploy
E2E Testing	Playwright browser tests alongside Vitest integration
iOS TestFlight	Fastlane + Match workflow for automated iOS releases

---

Table of Contents

• Prerequisites
• Quickstart (includes Claude Code setup wizard)
• Demo Features
• What's Included
• Prerequisites
• Local Development
• Environment Variables
• Password Reset Flow
• Mobile Authentication
• Project Structure

---

Prerequisites

Required:

• Node.js 20+, pnpm (npm install -g pnpm), Git, Docker, TypeScript

For mobile development:

• iOS: Xcode + CocoaPods (sudo gem install cocoapods)
• Android: Android Studio with SDK configured

Accounts:

• GitHub, Vercel (free tier works), Resend (for email)
• Apple Developer Program ($99/year) for iOS TestFlight deployment

Quickstart: From Template to Production

1. Create Your Repository

1. On this repo, click "Use this template" → "Create a new repository"
2. Name your repo and click "Create repository"

2. Create note to temporarily store creds over the next couple of steps that we will put into Vercel environment variables and github actions all at once later

3. Create Vercel Project

1. Go to vercel.com/new
2. Click "Import Git Repository" → select your new repo
3. Under "Root Directory", click "Edit" → type apps/web → click "Continue"
4. Click "Deploy"
5. Get the domain name Vercel has deployed the app too and store it in the note from step 2 as APP_BASE_URL

4. Create Neon Database

1. In your Vercel project, click the "Storage" tab
2. Click "Create Database" → select "Neon Serverless Postgres"
3. Click "Continue" → name the database → "Create"

Vercel automatically adds these env vars to your project:

• DATABASE_URL
• POSTGRES_URL
• POSTGRES_USER, POSTGRES_PASSWORD, POSTGRES_HOST, POSTGRES_DATABASE

5. Create Upstash Redis (Optional)

1. In your Vercel project, click the "Storage" tab
2. Click "Create Database" → select dropdown for "Upstash Serverless DB" → select Upstash for Redis
3. Click "Continue" → name the database → "Create"

Vercel automatically adds these env vars to your project:

• KV_REST_API_URL
• KV_REST_API_TOKEN

6. Set Up Vercel Blob Storage (Optional)

If you want image upload and generation features in the AI Agent:

1. In your Vercel project, click the "Storage" tab
2. Click "Create Database" → select "Blob"
3. Name it → click "Create"

Vercel automatically adds this env var to your project:

• BLOB_READ_WRITE_TOKEN

This enables:

• User image uploads in chat
• AI-generated image storage
• Image input to vision-capable models

7. Add Custom Domain (Optional)

If you want to use a custom domain instead of the default .vercel.app URL:

1. In your Vercel project, click "Settings" → "Domains"
2. Enter your domain name and click "Add"
3. If you don't own a domain, click "Buy" to purchase one through Vercel
4. If you own a domain elsewhere, follow the DNS configuration instructions shown
5. Configure and connect your domain to your vercel project
6. Overwrite the APP_BASE_URL field in your note from step 2 with your custom domain name

8. Create Deploy Hook (In Vercel)

1. In Vercel, click "Settings" → "Git" (left sidebar)
2. Scroll to "Deploy Hooks" → click "Create Hook"
3. Fill in the required fields:
   • Name: GitHub Actions
   • Branch: main
4. Click "Create Hook"
5. Add the generated url for the hook to the note from step 2 as VERCEL_DEPLOY_HOOK_URL

9. Set Up Resend (Email) (Optional)

If you want email functionality (verification emails, password reset):

1. Go to resend.com and create an account
2. In the Resend dashboard, click "API Keys" → "Create API Key"
3. Add the api key to your note from step 2 as RESEND_API_KEY
4. (Optional) Click "Domains" → "Add Domain" to verify your domain, if you don't verify a domain you can only send emails from onboarding@resend.dev for testing purposes.
5. (Optional) if you did create a custom domain, add an email address from that custom domain to the note from step 2 as MAIL_FROM

10. Set Up Google OAuth (Optional)

If you want users to sign in with their Google account:

1. Go to Google Cloud Console
2. Create a new project (or select an existing one)
3. Open the project sidebar and navigate to "APIs & Services" → "Credentials"
4. If prompted, configure the OAuth consent screen first:
   • Choose "External" user type
   • Fill in app name, user support email, and developer contact email
5. Click "Create Credentials" → "OAuth client ID"
6. Back in Credentials, create an OAuth client ID:
   • Application type: "Web application"
   • Name: Your app name
   • Authorized JavaScript origins: Add https://your-domain.com (or your Vercel domain), and http://localhost:3000 for local development. This is required so the OAuth flow can redirect properly.
   • Authorized redirect URIs: Add https://your-domain.com/api/auth/callback/google (replace with your custom domain, or use your default Vercel domain like https://your-app.vercel.app/api/auth/callback/google if you haven't set up a custom domain). For local development, also add: http://localhost:3000/api/auth/callback/google
7. Add the Client ID and Client Secret to your note from step 2 as GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET

11. Get LLM tokens if you plan to use them, get only the ones you would like to use (Optional) I personally like to generate 2 keys for each provider one being for the CI/CD evals and the other being for use in the application just so you can break down the different usage. If you would like to do that as well just store the CI/CD value in Github actions secrets and the application value in Vercel in steps 14 and 15

1. Go to OpenAI API Keys, create an API key, and add it to the note from step 2 as OPENAI_API_KEY
2. Go to Anthropic Console, generate an API key, and add it to the note from step 2 as ANTHROPIC_API_KEY
3. Go to Google Generative AI Studio, create an API key, and add it to the note from step 2 as GOOGLE_GENERATIVE_AI_API_KEY

12. Set Up Google Analytics (Optional)

If you want to track website traffic and user engagement:

1. Go to Google Analytics
2. Click "Admin" (gear icon in bottom left)
3. Click "Create" → "Account" (if you don't have one) or "Property"
4. Follow the setup wizard to create a GA4 Property
5. During the setup flow (or under "Data Streams"), select "Web" as your platform
6. Enter your website URL (use your Vercel URL or custom domain from previous steps) and a stream name
7. Click "Create stream". You will be presented with a "Setup Google tag" screen; you can close this window, as the template handles the tag injection for you.
8. After closing the tag setup, you will see the "Web stream details". Copy the "Measurement ID" (format: G-XXXXXXXXXX) from the top right.
9. Add it to the note from step 2 as NEXT_PUBLIC_GA_TRACKING_ID

13. Add custom secrets

There are two locations where we need to generate our own custom secrets, feel free to use any generator that satisifed the requirements of the secrets but I will show what I use for generation below.

1. Create a secret key (recommendation is to run openssl rand -base64 32 in terminal) and store it in the note from step 2 as BETTER_AUTH_SECRET
2. Create a secret key (recommendation is to run openssl rand -hex 32 in terminal) and store it in the note from step 2 as CRON_SECRET

14. Configure Vercel Environment Variables

1. In your Vercel project, click "Settings" tab → "Environment Variables"
2. Add each variable below (click "Add" after each):

Required (you must add these manually and they should all be in the note from step 2):

Variable	Value
BETTER_AUTH_SECRET	Random string, 32+ chars (run openssl rand -base64 32 in terminal)
APP_BASE_URL	https://your-project.vercel.app (your Vercel URL)
CRON_SECRET	Random string for cron auth (run openssl rand -hex 32 in terminal)

Optional (add if using these features):

Variable	Value
OPENAI_API_KEY	For AI chat functionality
ANTHROPIC_API_KEY	For AI chat functionality
GOOGLE_GENERATIVE_AI_API_KEY	For AI chat functionality
RESEND_API_KEY	Your Resend API key
MAIL_FROM	Your verified