Overview

1. Install the latest stable version of Node.js (If you already have Node.js installed, this will override it):

   • Mac/Linux: Install via nvm:

     nvm install stable
     

   Verify Node.js is installed:

   node -v
   

   Should return something like v23.x.y (at the time of writing: 23.9.0)

2. Install Bun: We recommend using Bun for significantly faster development experience - including 10x faster dependency installation, 2-4x faster builds, and practically instant dev server startup.

# For macOS
curl -fsSL https://bun.sh/install | bash

# Verify Bun is installed:
bun -v

Should return something like 1.x.y (at the time of writing: 1.2.4)

3. Create a new empty GitHub repository for your project

   Have the SSH repository URL ready (e.g., git@github.com:username/repo-name.git)

   Make sure it’s the SSH URL, not the HTTPS URL!

4. Install the Supabase CLI to interact with Supabase:

   • Install via Homebrew:

     brew install supabase/tap/supabase
     

5. Gather your Development API keys from the following services:

   • Clerk (Authentication)

     • Create account at Clerk
     • Create a new Application but only select the ‘Google’ Auth toggle (We only want to allow users to sign in with Google as it’s the least frictionless option)
     • Copy your NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY from the ‘API Keys’ section

   • Stripe (Payments)

     • Create account at Stripe
     • Make sure you’re in test mode (toggle at the top right)
     • Copy your STRIPE_SECRET_KEY and NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY from the ‘API Keys’ section
     • Create a product and get your NEXT_PUBLIC_STRIPE_PRICE_ID

   • Plunk (Email)

     • Create account at Plunk (We don’t care about the environment)
     • Copy your PLUNK_API_KEY from Project Settings > API Keys

   • Supabase (Database)

     • Create account at Supabase
     • Create a new project called ‘[Project Name] Dev DB’
     • When creating your database password, avoid special characters like ’#’ and ’&’ as they cause URL encoding issues
     • Copy your database password and keep it safe (ideally in a password manager)
     • Copy your NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY from the ‘Connect’ modal on the main Project Dashboard page (click on the ‘Connect’ button) and then go to the ‘App Frameworks’ tab
     • Copy your SUPABASE_SERVICE_ROLE_KEY from the Project Settings > Data API tab
     • Copy your DATABASE_URL (with pgbouncer) and DIRECT_URL (without pgbouncer) from the same ‘Connect’ modal under the ‘ORMs’ tab

1. Using your previously saved info (GitHub repo URL and API keys), create your project locally by running:

   bun x @codeandcreed/create-titan@latest
   

2. Follow the prompts to configure your project. The CLI will:

   1. Clone the project template
   2. Create the .env file with all the required environment variables

Done! Your project is now set up:

• Pushed to your GitHub repo ✅
• Ready for local development ✅

Setup ngrok

1. Install ngrok:
   • Install via Homebrew: brew install ngrok
2. Run ngrok http 3000
3. Copy the ngrok URL.
4. Update the FRONTEND_URL environment variable in your .env file to the ngrok URL.

Configure your app components in order

Your app requires several components to be set up in the correct order:

1. First, set up your Database - See the Database Guide for setting up all your tables

2. Next, configure Authentication - See the Authentication Guide to set up Clerk authentication

3. Next, set up Payments - See the Payments Guide to configure Stripe payments and Dispute prevention with ByeDispute

4. Next, set up Emails - See the Email Guide to configure Plunk emails

5. Next, set up User Analytics - See the Analytics Guide to configure DataFast

6. Next, set up User Feedback - See the Feedback Guide to configure UserJot

7. Finally, set up Customer Support - See the Customer Support Guide to configure GetFernand

Run your app locally

bun run dev

Done. Your app will now be able to receive webhooks from both Clerk and Stripe.

When you initially clone the project, the UI is a basic UI for Titan itself.

But it’s up to you to rip everything out and replace with your own designs. Likewise for the Dashboard.

The following guides will help you customise the entire application UI to your liking:

• Landing Page Design
• Rapid UI Prototyping

Use Cursor to guide you efficiently through the process, add new features, fix bugs etc. See Building

When you’re ready to deploy your application to production, follow our comprehensive deployment guide:

Deploy to Production Guide

The guide covers everything you need for a successful production deployment:

• Domain purchase and setup
• Production database configuration
• Production authentication setup
• Production payments setup
• Vercel deployment
• Post-deployment verification

Track your site visitors and get insights on how they interact with your site.

1. Create an account at DataFast
2. Copy the Tracking code and paste it into the head of your index.html file
3. Deploy your site
4. Done. Real-time traffic data should now be being tracked.

1. Create an account at UserJot
2. Create a new Workspace for the app
3. Done. Go to ‘My Board’ to see your public feedback/roadmap board.