shipsaas

Prerequisites: Node.js 18.17 or later installed on your machine.

Installation

1. Clone the Repository

Start by cloning the shipsaas repository to your local machine:

git clone https://github.com/yourusername/shipsaasTemplate.git my-app
cd my-app

2. Install Dependencies

Install all required packages using npm:

npm install

3. Environment Setup

Copy the .env.example file and configure your environment variables:

cp .env.example .env.local

.env.local

# Authentication - Auth.js v5
AUTH_SECRET=your-auth-secret-here
AUTH_GOOGLE_ID=your-google-client-id
AUTH_GOOGLE_SECRET=your-google-client-secret

# Database - Supabase
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_KEY=your-supabase-anon-key

# Payments - Stripe
STRIPE_SECRET_KEY=sk_test_your-stripe-secret-key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your-stripe-publishable-key
STRIPE_WEBHOOK_SECRET=whsec_your-webhook-secret

# Email - Mailgun (Optional)
MAILGUN_API_KEY=your-mailgun-api-key

Important: Never commit your .env.local file to version control. Generate a secure secret with openssl rand -base64 32

4. Start Development Server

Run the development server:

npm run dev

Open http://localhost:3000 in your browser to see your app running.

Project Structure

Understanding the project structure will help you navigate and customize the app:

my-saas-app/
├── app/                    # Next.js App Router pages
│   ├── page.tsx            # Landing page (assembles all landing components)
│   ├── layout.tsx          # Root layout with ThemeProvider + Analytics
│   ├── login/              # Login page
│   ├── dashboard/          # Authenticated dashboard pages
│   │   ├── page.tsx        # Dashboard home
│   │   ├── profile/        # Profile settings
│   │   ├── billing/        # Billing management
│   │   └── settings/       # App settings
│   ├── api/                # API routes
│   │   ├── auth/           # Auth.js route handler
│   │   └── api.ts          # API utilities
│   └── docs/               # Documentation pages
├── components/             # All React components
│   ├── landing/            # Landing page sections (9 components)
│   ├── dashboard/          # Dashboard components (Sidebar)
│   ├── layout/             # Shared layout components
│   ├── ui/                 # shadcn/ui base components (6)
│   ├── providers.tsx       # SessionProvider wrapper
│   └── theme-provider.tsx  # ThemeProvider wrapper
├── lib/                    # Utility functions and configuration
│   ├── config.ts           # 🔧 Single source of truth for all app config
│   ├── auth.js             # Auth.js v5 configuration + Supabase user sync
│   ├── stripe.ts           # Stripe helpers (checkout, portal, sessions)
│   ├── email.ts            # Mailgun email sender
│   ├── supabase.js         # Supabase client
│   ├── seo.tsx             # SEO utilities
│   └── utils.ts            # Utility functions (cn, etc.)
├── public/                 # Static assets
└── .env.example            # Environment variables template

Next Steps

Set up Authentication

Configure Auth.js with Google OAuth and Supabase user sync

Configure Payments

Integrate Stripe for subscriptions and one-time payments

Connect Database

Set up Supabase for user data and app storage

Deploy to Production

Launch your app on Vercel

Getting Started