Demo

See demo

Getting Started

To run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the app running.

TIP: Ask your AI Coding Assistant to update the landing page with your own content.

Tech Stack

• Next.js
• Shadcn/ui
• Next Safe Action
• Google Gemini AI
• Convex
• Clerk

Backend & Auth

This template contains an alternative dashboard that uses Convex for your backend needs (database, real-time updates, serverless functions, background jobs) and Clerk for authentication. Both services offer generous free tiers and are perfect for getting started quickly.

Setting up Convex and Clerk

1. Replace the existing /dash and /login folders and move the /middleware.ts file.

src/app/_dash-with-convex-and-clerk/
├── dash          -> src/app/dash
├── login         -> src/app/login
└── middleware.ts -> src/middleware.ts

2. Configure your environment variables:

• Copy the .env.example file into a new .env file.
• Update the environment variables in .env with your Convex and Clerk account values.
• Update the environment validation files:

  src/lib/client-env.ts
  src/lib/server-env.ts

3. Update src/app/providers.tsx to use the new env var clientEnv.NEXT_PUBLIC_CONVEX_URL for Convex client initialization:

   const convex = new ConvexReactClient(clientEnv.NEXT_PUBLIC_CONVEX_URL)

4. Update src/app/layout.tsx to use the Providers component from src/app/providers.tsx