Next.js 15 + Supabase + Shadcn UI Project

This project was scaffolded using a custom setup script that replicates the 5daysprint framework.

Tech Stack

• Next.js 15 - React framework with App Router
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS
• Shadcn UI - Beautiful UI components
• Supabase - Backend as a Service
• Vercel Analytics - Web analytics
• Framer Motion - Animations

Getting Started

1. Configure Environment Variables

Copy .env.example to .env.local and fill in your Supabase credentials:

cp .env.example .env.local

Get your Supabase credentials from: https://app.supabase.com/

2. Setup Database

Run the database setup script to verify your configuration:

npm run setup-db

Then create your database schema in the Supabase SQL Editor.

3. Run Development Server

npm run dev

Open http://localhost:3000 to see your app.

Project Structure

src/
  app/              # Next.js App Router pages
    api/            # API routes
    layout.tsx      # Root layout
  components/       # React components
    ui/             # Shadcn UI components
    providers/      # Context providers
  lib/              # Utilities & helpers
    supabase.ts     # Supabase client
    utils.ts        # Utility functions
  hooks/            # Custom React hooks
  contexts/         # React contexts
  types/            # TypeScript types
supabase/
  migrations/       # Database migrations
scripts/            # Utility scripts
public/             # Static assets

Available Scripts

• npm run dev - Start development server
• npm run dev-turbo - Start development server with Turbopack
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run setup-db - Database setup guide

Adding Shadcn Components

npx shadcn@latest add [component-name]

Browse components: https://ui.shadcn.com/

Learn More

• Next.js Documentation
• Supabase Documentation
• Shadcn UI Documentation
• Tailwind CSS Documentation

Deployment

Deploy to Vercel with one click. Remember to add your environment variables in the Vercel dashboard!