docs/ update README

2025-08-18 14:20:20 +02:00
parent ce92f0ce26
commit a20fcddcba
9 changed files with 83 additions and 50 deletions
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# Next.js Better Auth PostgreSQL Starter Kit
+# Agentic Coding Boilerplate

-A complete Next.js boilerplate with authentication, PostgreSQL database, AI chat functionality, and modern UI components - perfect for building your next SaaS application.
+A complete agentic coding boilerplate with authentication, PostgreSQL database, AI chat functionality, and modern UI components - perfect for building AI-powered applications and autonomous agents.

 ## 🚀 Features

@@ -11,12 +11,20 @@ A complete Next.js boilerplate with authentication, PostgreSQL database, AI chat
 - **⚡ Modern Stack**: Next.js 15, React 19, TypeScript
 - **📱 Responsive**: Mobile-first design approach

+## 🎥 Video Tutorial
+
+Watch the complete walkthrough of this agentic coding template:
+
+[![Agentic Coding Boilerplate Tutorial](https://img.youtube.com/vi/T0zFZsr_d0Q/maxresdefault.jpg)](https://youtu.be/T0zFZsr_d0Q)
+
+[🔗 Watch on YouTube](https://youtu.be/T0zFZsr_d0Q)
+
 ## 📋 Prerequisites

 Before you begin, ensure you have the following installed on your machine:

- **Node.js**: Version 18.0 or higher ([Download here](https://nodejs.org/))
- **Git**: For cloning the repository ([Download here](https://git-scm.com/))
+- **Node.js**: Version 18.0 or higher (<a href="https://nodejs.org/" target="_blank">Download here</a>)
+- **Git**: For cloning the repository (<a href="https://git-scm.com/" target="_blank">Download here</a>)
 - **PostgreSQL**: Either locally installed or access to a hosted service like Vercel Postgres

 ## 🛠️ Quick Setup
@@ -26,8 +34,8 @@ Before you begin, ensure you have the following installed on your machine:
 **Option A: Clone with Git**

 ```bash
-git clone https://github.com/your-username/nextjs-better-auth-postgresql-starter-kit.git
-cd nextjs-better-auth-postgresql-starter-kit
+git clone https://github.com/your-username/agentic-coding-boilerplate.git
+cd agentic-coding-boilerplate
 ```

 **Option B: Download ZIP**
@@ -70,10 +78,11 @@ NEXT_PUBLIC_APP_URL="http://localhost:3000"

 ### 4. Database Setup

-Push the database schema to your PostgreSQL database:
+Generate and run database migrations:

 ```bash
-npm run db:push
+npm run db:generate
+npm run db:migrate
 ```

 ### 5. Start the Development Server
@@ -88,7 +97,7 @@ Your application will be available at [http://localhost:3000](http://localhost:3

 ### PostgreSQL Database on Vercel

-1. Go to [Vercel Dashboard](https://vercel.com/dashboard)
+1. Go to <a href="https://vercel.com/dashboard" target="_blank">Vercel Dashboard</a>
 2. Navigate to the **Storage** tab
 3. Click **Create** → **Postgres**
 4. Choose your database name and region
@@ -97,19 +106,18 @@ Your application will be available at [http://localhost:3000](http://localhost:3

 ### Google OAuth Credentials

-1. Go to [Google Cloud Console](https://console.cloud.google.com/)
+1. Go to <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a>
 2. Create a new project or select an existing one
-3. Enable the **Google+ API**
-4. Navigate to **Credentials** → **Create Credentials** → **OAuth 2.0 Client ID**
-5. Set application type to **Web application**
-6. Add authorized redirect URIs:
+3. Navigate to **Credentials** → **Create Credentials** → **OAuth 2.0 Client ID**
+4. Set application type to **Web application**
+5. Add authorized redirect URIs:
   - `http://localhost:3000/api/auth/callback/google` (development)
   - `https://yourdomain.com/api/auth/callback/google` (production)
-7. Copy the **Client ID** and **Client Secret** to your `.env` file
+6. Copy the **Client ID** and **Client Secret** to your `.env` file

 ### OpenAI API Key

-1. Go to [OpenAI Platform](https://platform.openai.com/dashboard)
+1. Go to <a href="https://platform.openai.com/dashboard" target="_blank">OpenAI Platform</a>
 2. Navigate to **API Keys** in the sidebar
 3. Click **Create new secret key**
 4. Give it a name and copy the key
@@ -162,10 +170,18 @@ npm run db:reset     # Reset database (drop all tables)

 ### Deploy to Vercel (Recommended)

-1. Push your code to GitHub
-2. Connect your repository to [Vercel](https://vercel.com)
-3. Add your environment variables in the Vercel dashboard
-4. Deploy automatically with each push to your main branch
+1. Install the Vercel CLI globally:
+   ```bash
+   npm install -g vercel
+   ```
+
+2. Deploy your application:
+   ```bash
+   vercel --prod
+   ```
+
+3. Follow the prompts to configure your deployment
+4. Add your environment variables when prompted or via the Vercel dashboard

 ### Production Environment Variables

@@ -181,11 +197,9 @@ Ensure these are set in your production environment:

 ## 🎥 Tutorial Video

-Watch my comprehensive tutorial on how to use this boilerplate to build amazing applications:
+Watch my comprehensive tutorial on how to use this agentic coding boilerplate to build AI-powered applications:

-[📺 YouTube Tutorial - Building with Next.js Better Auth PostgreSQL Starter Kit](#)
-
-_Coming soon - link will be updated with the actual video URL_
+[📺 YouTube Tutorial - Building with Agentic Coding Boilerplate](https://youtu.be/T0zFZsr_d0Q)

 ## 🤝 Contributing

@@ -203,7 +217,7 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file

 If you encounter any issues:

-1. Check the [Issues](https://github.com/your-username/nextjs-better-auth-postgresql-starter-kit/issues) section
+1. Check the [Issues](https://github.com/your-username/agentic-coding-boilerplate/issues) section
 2. Review the documentation above
 3. Create a new issue with detailed information about your problem

--- a/docs/business/starter-prompt.md
+++ b/docs/business/starter-prompt.md
@@ -1,6 +1,6 @@
-I'm working with a Next.js boilerplate project that includes authentication, database integration, and AI capabilities. Here's what's already set up:
+I'm working with an agentic coding boilerplate project that includes authentication, database integration, and AI capabilities. Here's what's already set up:

-## Current Boilerplate Structure
+## Current Agentic Coding Boilerplate Structure

 - **Authentication**: Better Auth with Google OAuth integration
 - **Database**: Drizzle ORM with PostgreSQL setup
@@ -13,7 +13,7 @@ I'm working with a Next.js boilerplate project that includes authentication, dat

 ## Important Context

-This is a **boilerplate/starter template** - all existing pages and components are meant to be examples and should be **completely replaced** to build the actual application.
+This is an **agentic coding boilerplate/starter template** - all existing pages and components are meant to be examples and should be **completely replaced** to build the actual AI-powered application.

 ### CRITICAL: You MUST Override All Boilerplate Content

--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-better-auth-postgresql-starter-kit",
+  "name": "agentic-coding-boilerplate",
  "version": "0.1.0",
  "private": true,
  "scripts": {
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -16,9 +16,9 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-  title: "Next.js Full-Stack Boilerplate",
+  title: "Agentic Coding Boilerplate",
  description:
-    "Complete Next.js starter template with authentication, database, AI integration, and modern tooling by Leon van Zyl",
+    "Complete agentic coding boilerplate with authentication, database, AI integration, and modern tooling - perfect for building AI-powered applications and autonomous agents by Leon van Zyl",
 };

 export default function RootLayout({
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,14 +13,33 @@ export default function Home() {
      <div className="max-w-4xl mx-auto text-center space-y-8">
        <div className="space-y-4">
          <h2 className="text-4xl font-bold tracking-tight">
-            Welcome to Your Next.js Boilerplate
+            Welcome to Your Agentic Coding Boilerplate
          </h2>
          <p className="text-xl text-muted-foreground">
-            A complete starter kit with authentication, database, AI
-            integration, and modern tooling
+            A complete agentic coding boilerplate with authentication, database, AI
+            integration, and modern tooling for building AI-powered applications
          </p>
        </div>

+        {/* YouTube Tutorial Video */}
+        <div className="space-y-4">
+          <h3 className="text-2xl font-semibold">📺 Video Tutorial</h3>
+          <p className="text-muted-foreground">
+            Watch the complete walkthrough of this agentic coding boilerplate:
+          </p>
+          <div className="relative w-full max-w-3xl mx-auto">
+            <div className="relative pb-[56.25%] h-0 overflow-hidden rounded-lg border">
+              <iframe
+                className="absolute top-0 left-0 w-full h-full"
+                src="https://www.youtube.com/embed/T0zFZsr_d0Q"
+                title="Agentic Coding Boilerplate Tutorial"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              />
+            </div>
+          </div>
+        </div>
+
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
          <div className="p-6 border rounded-lg">
            <h3 className="font-semibold mb-2">🔐 Authentication</h3>
--- a/src/components/auth/sign-in-button.tsx
+++ b/src/components/auth/sign-in-button.tsx
@@ -1,17 +1,17 @@
-"use client"
+"use client";

-import { signIn, useSession } from "@/lib/auth-client"
-import { Button } from "@/components/ui/button"
+import { signIn, useSession } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";

 export function SignInButton() {
-  const { data: session, isPending } = useSession()
+  const { data: session, isPending } = useSession();

  if (isPending) {
-    return <Button disabled>Loading...</Button>
+    return <Button disabled>Loading...</Button>;
  }

  if (session) {
-    return null
+    return null;
  }

  return (
@@ -20,10 +20,10 @@ export function SignInButton() {
        await signIn.social({
          provider: "google",
          callbackURL: "/dashboard",
-        })
+        });
      }}
    >
-      Sign in with Google
+      Sign in
    </Button>
-  )
+  );
 }
--- a/src/components/site-footer.tsx
+++ b/src/components/site-footer.tsx
@@ -5,9 +5,9 @@ export function SiteFooter() {
    <footer className="border-t py-6 text-center text-sm text-muted-foreground">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center space-y-3">
-          <GitHubStars repo="leonvanzyl/nextjs-better-auth-postgresql-starter-kit" />
+          <GitHubStars repo="leonvanzyl/agentic-coding-boilerplate" />
          <p>
-            Built using Boilerplate Template by{" "}
+            Built using Agentic Coding Boilerplate by{" "}
            <a
              href="https://youtube.com/@leonvanzyl"
              target="_blank"
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -11,7 +11,7 @@ export function SiteHeader() {
            href="/"
            className="bg-clip-text text-transparent [background-image:linear-gradient(90deg,color-mix(in_oklab,var(--primary)_85%,white_0%),color-mix(in_oklab,var(--primary)_50%,white_0%))] hover:opacity-90"
          >
-            Next.js Boilerplate
+            Agentic Coding Boilerplate
          </Link>
        </h1>
        <div className="flex items-center gap-4">
--- a/src/components/starter-prompt-modal.tsx
+++ b/src/components/starter-prompt-modal.tsx
@@ -12,9 +12,9 @@ import {
 } from "@/components/ui/dialog";
 import { Copy, Check } from "lucide-react";

-const STARTER_PROMPT = `I'm working with a Next.js boilerplate project that includes authentication, database integration, and AI capabilities. Here's what's already set up:
+const STARTER_PROMPT = `I'm working with an agentic coding boilerplate project that includes authentication, database integration, and AI capabilities. Here's what's already set up:

-## Current Boilerplate Structure
+## Current Agentic Coding Boilerplate Structure
 - **Authentication**: Better Auth with Google OAuth integration
 - **Database**: Drizzle ORM with PostgreSQL setup  
 - **AI Integration**: Vercel AI SDK with OpenAI integration
@@ -25,7 +25,7 @@ const STARTER_PROMPT = `I'm working with a Next.js boilerplate project that incl
  - \`/chat\` - AI chat interface (requires OpenAI API key)

 ## Important Context
-This is a **boilerplate/starter template** - all existing pages and components are meant to be examples and should be **completely replaced** to build the actual application.
+This is an **agentic coding boilerplate/starter template** - all existing pages and components are meant to be examples and should be **completely replaced** to build the actual AI-powered application.

 ### CRITICAL: You MUST Override All Boilerplate Content
 **DO NOT keep any boilerplate components, text, or UI elements unless explicitly requested.** This includes: