An AI Platform with Next.js 14, React 18, TailwindCSS, Hanko, Supabase, Bun, Prisma, Typescript, Shadcn UI

Features:

• Hanko Authentication
• Bun (Javascript runtime)
• Tailwind design
• Tailwind animations and effects with typewriter-effect
• Full responsiveness
• Client form validation and handling using react-hook-form
• Server error handling
• Image Generation Tool (Open AI)
• Video Generation Tool (Replicate AI)
• Conversation Generation Tool (Open AI)
• Music Generation Tool (Replicate AI)
• Page loading state
• Free tier with API limiting
• Supabase integration
• Folder structure in Next 14 App Router

Prerequisites

Bun

Cloning the repository

git clone https://github.com/akins-dev/Hanko-Project.git

Install packages

make setup

Setup .env file

Rename .env.local.example to .env and add the following:

NEXT_PUBLIC_HANKO_API_URL=""

OPENAI_API_KEY=""

REPLICATE_API_TOKEN=""

# Connect to Supabase with PgBouncer.
DATABASE_URL="postgres://postgres:__PASSWORD__@db.__YOUR_SUPABASE_PROJECT__.supabase.co:6543/postgres?pgbouncer=true"

# Direct connection to the database. Used for migrations.
DIRECT_URL="postgres://postgres:__PASSWORD__@db.__YOUR SUPABASE_PROJECT__.supabase.co:5432/postgres"

Setup Prisma

Add PosgreSQL Database (I used supabase)

bunx prisma db push

Start the app

bun run dev

Available commands

Running commands with npm bun run [command]

command	description
dev	Starts a development instance of the app

Important!

make sure you use localhost:3000 as your website url when creating a new project with hanko