Your smart assistant for productivity.

• Tailwind design
• Tailwind animations and effects
• Full responsiveness
• Clerk Authentication (Email, Google, 9+ Social Logins)
• Client form validation and handling using react-hook-form
• Server error handling using react-toast
• Set daily events on Dashboard manually
• Set daily events on Dashboard using voice prompts (AlanAI)
• Conversation Generation Tool (OpenAI)
• Code Generation Tool (OpenAI)
• Image Generation Tool (OpenAI)
• Music Generation Tool (Replicate AI)
• Video Generation Tool (Replicate AI)
• Page loading state
• Stripe monthly subscription
• Free tier with API limiting
• Write POST, DELETE, and GET routes in route handlers (app/api)
• Fetch data in server react components by directly accessing database (without API)
• Handle relations between Server and Child components
• Reuse layouts
• Folder structure in Next 13 App Router

Node version 18.X.X or newer

Open Command Prompt and run

node -v

Visit the official Node.js website: https://nodejs.org/ (I've used the LTS Version)

git clone https://github.com/antonioken22/planner-ai.git

npm i

# From https://dashboard.clerk.com/apps/api-keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

# Clerk Convention
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

# From https://platform.openai.com/account/api-keys
OPENAI_API_KEY=
# From https://replicate.com/account/api-tokens
REPLICATE_API_TOKEN=
# From https://studio.alan.app/projects > YourProject > Integrations
NEXT_PUBLIC_ALAN_SDK_KEY=

# From https://app.planetscale.com > YourDatabase > Get connection strings
DATABASE_URL=

# From https://app.crisp.chat/settings/website > Setup instructions  > Website ID
NEXT_PUBLIC_CRISP_WEB_ID=
# From https://dashboard.stripe.com/test/apikeys > Secret key
STRIPE_API_KEY=
# Learn how to obtain this by watching this video https://www.youtube.com/watch?v=ffJ38dBzrlY at 4:28:45
STRIPE_WEBHOOK_SECRET=

# Default Hosting Server
# Change this when you deploy it to a hosting service (I've used Vercel) e.g. https://planner-ai-antonioken22.vercel.app
NEXT_PUBLIC_APP_URL="http://localhost:3000"

Add MySQL Database (I've used PlanetScale)

npx prisma db push

npx prisma generate

npx prisma studio

npm run dev

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

I am very thankful to these YouTubers who have shared their web application development processes. They generously provided their React component-based code, which I've used extensively in this web application.

• Code With Antonio for most of the front-end and back-end components | GitHub repo
• Esteban Codes for the calendar components | GitHub repo
• JavaScript Mastery for AlanAI integration | GitHub repo