Quick Start Guide
Get your Echo Boilerplate website up and running in minutes.
Prerequisites
Make sure you have these installed before starting
- Node.js 18+ installed
- pnpm installed (
npm install -g pnpm) - A Supabase account - Create one here
- A Stripe account (optional) - Create one here
- A Resend account (optional) - Create one here
Installation
Create a new Echo project
# Create a new Echo project
pnpm create echo
# Or using npx
npx create-echo
# Navigate to your project
cd your-project-name
# Install dependencies
pnpm install
Initial Setup
1
Set up Supabase Database
Create a Supabase project and get your credentials
- •Go to supabase.com and create a new project
- •Wait for the project to be fully initialized
- •Go to Settings → API and copy your credentials
- •You'll need: Project URL, anon key, service_role key, and database URL
2
Configure Environment Variables
Set up your local environment configuration
- •Copy env.example to .env.local
- •Add your Supabase credentials
- •Set a secure ADMIN_CLAIM_CODE
- •Set NEXT_PUBLIC_APP_URL to http://localhost:3000
3
Run Database Migrations
Set up all necessary database tables
- •Run: pnpm db:migrate
- •This creates all required tables
- •Your database is now ready!
4
Start Development Server
Launch your local development environment
- •Run: pnpm dev
- •Open http://localhost:3000
- •Your site is now running!
5
Access Admin Panel
Manage your content and settings
- •Navigate to /admin
- •In development mode, you can access without authentication
- •Set DISABLE_AUTH=true in .env.local if needed
Customization
Change Your Site Name
Edit config/site.ts to customize your site name, description, and metadata.
Configure Theme
The theme switcher is available at any time. When you're ready to finalize your design:
- Use the theme switcher to experiment with different themes
- Copy your preferred CSS variables
- Paste them into
app/globals.css - Remove the theme switcher (optional)
Features Included
Everything you need to build production-ready applications
Admin Panel - Manage content, blog, and settings
Theme System - Customize colors, fonts, and styles
Dark Mode - Built-in dark/light mode support
Blog System - Create and manage blog posts
Responsive Design - Works on all devices
SEO Ready - Optimized for search engines
Next Steps
Continue your journey with these guides