A Note from Kevin

Hi! If you're at this repo, you've probably seen one of my AI coding videos and want to try some of those techniques yourself. If you have no clue what I'm talking about, here's a good video to show you my approach and how to best use this repo: https://youtu.be/gXmakVsIbF0

You can also just use this with your own techniques, that's cool too.

You can follow the Getting Started instructions below to start using this stack right away. I've found that using a checklist of tasks in the .cursor-tasks.md file is a great way to make a lot of quick and effective progress with AI Coding. I personally use Cursor in Composer Agent mode with Sonnet 3.7, but feel free to use your AI coding tool of choice.

If you need to create the checklist, here are some good prompts to use to go from a high-level idea to a full checklist of stories and tasks: https://chatgpt.com/share/67be0a59-e484-800d-a078-346b2c29d727

You can also use the template in .cursor-template.xml to generate the task list for existing repos. I personally use RepoPrompt to convert the files into a pastable string, but repomix.com is a good option as well.

🚀 Next.js Modern Stack Template

A Next.js template that combines commonly used tools and libraries for building full-stack web applications. This stack is specifically designed to be optimized for AI coding assistants like Cursor.

🎯 Overview

This template includes Next.js 14 with the App Router, Supabase for the database, Resend for transactional emails, and optional integrations with various AI providers and AWS services.

⚠️ Note: This is my personal template with tools that I personally have experience with and think are solid options for building modern full-stack web application. Your preferences very likely differ, so feel free to fork and modify it for your own use. I won't be accepting pull requests for additional features, but I'll be happy to help you out if you have any questions.

✨ Features

🏗️ Core Architecture

• Next.js 14 - React framework with App Router
• TypeScript - Type safety throughout
• tRPC - End-to-end type-safe APIs
• Prisma - Database ORM and schema management
• NextAuth.js - Authentication with Prisma adapter
• Supabase - Postgres database with realtime and auth

🎨 UI & Styling

• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Lucide Icons - Icon set
• Dark mode with Tailwind CSS

🛠️ Development Tools

• Storybook - Component development environment
• Geist Font - Typography by Vercel

🤖 AI & Background Jobs

• Multiple AI integrations available:
  • OpenAI - GPT-4 and o-series models
  • Anthropic - Sonnet-3.5
  • Perplexity - Web search models
  • Groq - Fast inference
• Inngest - Background jobs and scheduled tasks

🔧 Infrastructure & Services

• Resend - Email delivery
• AWS S3 - File storage
• Supabase - Primary database (Note that I don't directly use the supabase client in this template, so you can switch out supabase with other database providers via the DATABASE_URL and DIRECT_URL environment variables.)

🔔 Additional Features

• react-toastify - Toast notifications
• Utility functions for common operations
• TypeScript and ESLint configuration included

🚀 Getting Started

1. Fork this repository
2. Install dependencies:

npm install

3. Copy .env.example to .env and configure your environment variables
4. Set up your database:

npx prisma migrate dev

5. Start the development server:

npm run dev

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

📁 Project Structure

• app/ - Next.js app router pages and API routes
• src/
  • components/ - UI components
  • lib/ - Utilities and configurations
    • api/ - tRPC routers
    • utils/ - Shared utilities
  • stories/ - Storybook files
• prisma/ - Database schema

🚀 Deployment

This template is optimized for deployment on Vercel.

Database Setup

1. Create a new Supabase project at supabase.com
2. Get your database connection strings from Supabase:
   • Project Settings → Database
   • Copy both the URI (for DATABASE_URL) and Direct Connection (for DIRECT_URL)

Vercel Setup

1. Push your code to GitHub
2. Go to vercel.com/new
3. Import your repository
4. Configure the following environment variables:
   • DATABASE_URL - Your Supabase database URL
   • DIRECT_URL - Your Supabase direct connection URL
   • NEXTAUTH_SECRET - Generate with openssl rand -base64 32
   • NEXTAUTH_URL - Your production URL (e.g., https://your-app.vercel.app)
   • Add any other variables from .env.example that you're using
5. Deploy!

Post-Deployment

1. Run database migrations in the Vercel deployment:

npx vercel env pull .env.production.local  # Pull production env vars
npx prisma migrate deploy                  # Deploy migrations to production

2. Set up your custom domain in Vercel (optional):
   • Go to your project settings
   • Navigate to Domains
   • Add your domain and follow the DNS configuration instructions

📝 License

MIT License