Design-Buddy/README.md

Next.js Better Auth PostgreSQL Starter Kit

A comprehensive Next.js boilerplate with authentication, database integration, AI capabilities, and modern UI components.

=<3D> Features

• = Authentication: Better Auth with Google OAuth integration
• =<3D> Database: Drizzle ORM with PostgreSQL
• > AI Integration: Vercel AI SDK with OpenAI support
• <<3C> UI Components: shadcn/ui with Tailwind CSS
• <A1> Modern Stack: Next.js 15, React 19, TypeScript
• =<3D> Responsive: Mobile-first design approach

=<3D> Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Authentication: Better Auth
• Database: PostgreSQL with Drizzle ORM
• Styling: Tailwind CSS
• UI Components: shadcn/ui + Radix UI
• AI: Vercel AI SDK + OpenAI
• Icons: Lucide React

<<3C>

B Quick Start

1. Clone and Install

git clone <your-repo-url>
cd nextjs-better-auth-postgresql-starter-kit
npm install

2. Environment Setup

Copy the environment variables template:

cp .env.example .env.local

Fill in your environment variables in .env.local:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/your_database_name"

# Authentication
BETTER_AUTH_SECRET="your-random-32-character-secret-key-here"

# Google OAuth (Get from Google Cloud Console)
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# AI Integration (Optional)
OPENAI_API_KEY="sk-your-openai-api-key-here"

# App URL
NEXT_PUBLIC_APP_URL="http://localhost:3000"

3. Database Setup

Set up your PostgreSQL database and run migrations:

npm run db:push

4. Start Development Server

npm run dev

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

=<3D> Project Structure

src/
 app/                    # Next.js app directory
    api/               # API routes
       auth/          # Authentication endpoints
       chat/          # AI chat endpoint
    chat/              # AI chat page
    dashboard/         # User dashboard
    page.tsx           # Home page
 components/            # React components
    auth/             # Authentication components
    ui/               # shadcn/ui components
 lib/                  # Utilities and configurations
     auth.ts           # Better Auth configuration
     auth-client.ts    # Client-side auth utilities
     db.ts             # Database connection
     schema.ts         # Database schema
     utils.ts          # General utilities

=' Configuration

Google OAuth Setup

1. Go to Google Cloud Console
2. Create a new project or select existing one
3. Enable Google+ API
4. Go to Credentials <20> Create OAuth 2.0 Client ID
5. Add authorized redirect URI: http://localhost:3000/api/auth/callback/google
6. Copy Client ID and Client Secret to your .env.local

Database Schema

The starter kit includes pre-configured database tables for:

• Users (id, name, email, image, etc.)
• Sessions (authentication sessions)
• Accounts (OAuth provider accounts)
• Verification (email verification tokens)

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run db:generate  # Generate database migrations
npm run db:migrate   # Run database migrations
npm run db:push      # Push schema changes to database
npm run db:studio    # Open Drizzle Studio

=<3D> Pages & Features

Home Page (/)

• Welcome message with feature overview
• Setup instructions
• Navigation to key features

Dashboard (/dashboard)

• User profile display
• Navigation to application features
• Protected route (requires authentication)

AI Chat (/chat)

• Real-time chat with OpenAI
• Message history
• Protected route (requires authentication)

=<3D> Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Environment Variables for Production

Make sure to set these in your production environment:

• DATABASE_URL - Your production PostgreSQL URL
• BETTER_AUTH_SECRET - A secure random string
• GOOGLE_CLIENT_ID - Your Google OAuth Client ID
• GOOGLE_CLIENT_SECRET - Your Google OAuth Client Secret
• OPENAI_API_KEY - Your OpenAI API key (optional)
• NEXT_PUBLIC_APP_URL - Your production URL

> Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

=<3D> License

This project is licensed under the MIT License.

<<3C> Support

If you have any questions or need help, please:

1. Check the documentation
2. Search existing issues
3. Create a new issue with detailed information

---

Happy coding! <<3C>