Introduction to LaunchPad.js

LaunchPad.js is a powerful Next.js starter kit designed to help you launch your SaaS project quickly and efficiently. This documentation will guide you through the setup process and help you make the most of LaunchPad.js features.

Quick Start Guide

Get up and running with LaunchPad.js in just a few steps:

1. Clone the repository
2. Install dependencies
3. Configure environment variables
4. Run the development server

git clone https://github.com/launchpad-js/starter.git
cd starter
npm install
npm run dev

Authentication

LaunchPad.js comes with a robust authentication system out of the box. Here's a simple example of how to implement a protected route:

import { useAuth } from '@/lib/auth'
import { useRouter } from 'next/router'

export default function ProtectedPage() {
  const { user, loading } = useAuth()
  const router = useRouter()

  if (loading) return <div>Loading...</div>
  if (!user) {
    router.push('/login')
    return null
  }

  return <div>Welcome, {user.name}!</div>
}

This example demonstrates how to create a protected page that only authenticated users can access.

Payment Integration

LaunchPad.js supports various payment gateways. Here's how you can set up Stripe for accepting payments:

import { loadStripe } from '@stripe/stripe-js'
import { Elements } from '@stripe/react-stripe-js'
import PaymentForm from '@/components/PaymentForm'

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)

export default function PaymentPage() {
  return (
    <Elements stripe={stripePromise}>
      <PaymentForm />
    </Elements>
  )
}

This example shows how to set up the Stripe Elements provider and create a payment form component.

API Reference

LaunchPad.js provides a set of APIs to interact with various features. Here's an example of how to use the user API:

// GET /api/users
const response = await fetch('/api/users')
const users = await response.json()

// POST /api/users
const newUser = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John Doe', email: 'john@example.com' })
}).then(res => res.json())

// GET /api/users/:id
const user = await fetch(`/api/users/${userId}`).then(res => res.json())

// PUT /api/users/:id
const updatedUser = await fetch(`/api/users/${userId}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Jane Doe' })
}).then(res => res.json())

// DELETE /api/users/:id
await fetch(`/api/users/${userId}`, { method: 'DELETE' })

This example demonstrates how to perform CRUD operations using the LaunchPad.js user API.

Deployment

LaunchPad.js is optimized for deployment on Vercel. Follow these steps to deploy your application:

1. Push your code to a GitHub repository
2. Sign up for a Vercel account
3. Connect your GitHub repository to Vercel
4. Configure your environment variables
5. Deploy your application

Vercel will automatically detect your Next.js application and set up the appropriate build commands and output directory.