Tech Stack

Our boilerplate is built with the latest and most reliable technologies to provide you with a solid foundation for your SaaS application.

Next.js 14

The React framework for production, featuring:

  • App Router for better routing and layouts
  • Server Components for improved performance
  • Server Actions for secure mutations
  • Edge Runtime support
// Example of a Server Component
export default async function SubscriptionPage() {
  const subscription = await getSubscription();
  
  async function updateSubscription(formData: FormData) {
    // Handle subscription update
  }


  return (
    <form action={updateSubscription}>
      {/* Form fields */}
    </form>
  );}
TypeScript

TypeScript

Built with TypeScript for type safety and better developer experience:

  • Strict type checking
  • Better IDE support
  • Safer refactoring
  • Type inference
// Example of TypeScript usage
interface User {
  id: string;
  email: string;
  subscription?: {
    plan: 'basic' | 'pro' | 'enterprise';
    status: 'active' | 'canceled' | 'past_due';
  };
}


async function getUser(id: string): Promise<User> {
  // Fetch user data
}
Supabase

Supabase

Open source Firebase alternative with:

  • PostgreSQL database
  • Authentication
  • Real-time subscriptions
  • Storage
  • Edge Functions
// Example of Supabase usage
const { data: profiles } = await supabase
  .from('profiles')
  .select('*')
  .eq('subscription_status', 'active');


// Real-time subscription
supabase
  .channel('profile_changes')
  .on('postgres_changes', { 
    event: '*', 
    schema: 'public',
    table: 'profiles' 
  }, (payload) => {
    // Handle change
  })
  .subscribe();
Stripe

Stripe

Complete payment infrastructure with:

  • Subscription management
  • Usage-based billing
  • Invoicing
  • Tax handling
View detailed Stripe setup guide →
Tailwind CSS

Tailwind CSS

Utility-first CSS framework featuring:

  • JIT (Just-In-Time) engine
  • Dark mode support
  • Custom animations
  • Responsive design
// Example of Tailwind usage
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  <div className="rounded-lg border p-6 hover:shadow-lg transition-all">
    <h3 className="text-xl font-bold mb-2">Feature</h3>
    <p className="text-muted-foreground">
      Feature description
    </p>
  </div>
</div>
Resend

Resend

Modern email service with:

  • React email templates
  • High deliverability
  • Analytics
  • Webhooks
View email integration guide →