Bolt Boilerplate ⚡

Bolt Boilerplate is a Next.js framework integrated with Convex real-time database for seamless interactions, Clerk for authentication, and Shadcn/ui for stunning and customizable UI.

Designed to streamline your web development process, Bolt eliminates the hassle of setup by providing full CRUD functionality, seamless database integration, and user authentication right from the start.

Say goodbye to the complexities of React state management as Bolt integrates Convex, simplifying your development workflow. Whether you're a seasoned developer or just starting out, Bolt empowers you to build stunning and dynamic web applications effortlessly, allowing you to focus on bringing your ideas to life.

Features

• ✅ Setup full-stack CRUD in 3 minutes!
• ✅ Best practices for Next.js App router v14
• ✅ Clean code structure and organization
• ✅ Lightweight and easily customizable
• ✅ Metadata, opengraph, SEO friendly

Quick Start

1. Clone the Repository:

git clone https://github.com/bitcraft3r/bolt-boilerplate-nextjs.git

2. Install Dependencies:

cd bolt-boilerplate-nextjs
npm install

3. Setup Convex Development Server:

Run the Convex development server and create a new project:

npx convex dev

This will auto-populate .env.local file with the following:

CONVEX_DEPLOYMENT=dev:something-random-123
NEXT_PUBLIC_CONVEX_URL=your_public_convex_url

4. Setup Clerk Authentication:

Setup a Clerk project and add the following environment variables to the .env.local file:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

In your Clerk project, create a JWT Template, select Convex, then make sure to click Save changes. Copy the Issuer URL in the JWT Template to replace in @/convex/auth.config.ts in the providers domain.

If required, setup middleware as per Clerk documentation.

5. Add environment variable for app URL:

Add the following environment variable to the .env.local file:

NEXT_PUBLIC_URL=http://localhost:3000/

6. Run the Development Server:

npm run dev

7. Open Your Browser:

Open http://localhost:3000 to view the app.

Contributing

Contributions are welcome! Whether you want to report a bug, request a feature, or submit a pull request, please follow our contribution guidelines.

License

This project is licensed under the MIT License.

Resources

• Convex Template with Next.js 13 App Router
• Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023
• A quick start guide for using Convex with Next.js
• How To Setup: NextJS + Convex + ShadCN + Stripe + Tailwind CSS + Typescript + React | Explained
• Building a Subscription Based SaaS with my Favorite Tech Stack (Next.js, Stripe, Convex, Clerk)