Getting Started

1. Clone the repo and install dependencies

Run the following commands in your terminal. Replace [YOUR_APP_NAME] with whatever you want to call your project.

git clone https://github.com/The-Youssef-Org/yousship-boilerplate.git [YOUR_APP_NAME]
cd [YOUR_APP_NAME]
npm install
git remote remove origin
npm run dev

2. Set up your environment file

Rename the example env file — this is where all your secret keys live:

cp .env.example .env.local

Your .env.local should look like this to start:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
RESEND_API_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

3. Start the development server

npm run dev

Open http://localhost:3000. The full landing page renders immediately — no accounts or keys required at this stage.

Project structure

Here's a quick map of where things live:

src/
  app/              → Pages and API routes (App Router)
  app/api/          → Server-side endpoints (auth, payments, webhooks)
  components/       → All UI components
  emails/           → Transactional email templates (React Email)
  libs/             → Helper libraries (Stripe, Supabase, Resend, SEO)
  config.ts         → Central configuration — start here
  blog/             → File-based blog content

The config file

src/config.ts is the backbone of the app. It controls your brand, theming, pricing cards, auth redirects, email sender, social links, and more — all in one place. Most of the landing page copy comes directly from this file, so updating it is the first thing you should do after getting the server running.

Open it now and fill in at minimum:

• appName — your product name
• domainName — your production domain
• appDescription — one-sentence description for SEO
• mail.fromAdmin — the email address you'll send from