Next.js 15 Course Selling Template With Stripe, Mongodb, Prisma with Complete Admin Panel

Overview

The Course LMS is a modern Learning Management System (LMS) built using the latest technologies in the Next.js ecosystem. It offers a complete solution for course management, user authentication, media handling, and subscription management. This documentation will guide you through setting up the project, understanding its core features, and resolving common issues.

🛠️ Tech Stack

Technology	Version	Description
Next.js	15	App Router, Server Components
React	19 RC	Latest React release candidate
TypeScript	-	Static typing for better code quality
Prisma	6	Database ORM for PostgreSQL and MongoDB
NextAuth	v5 Beta	Authentication provider
Shadcn UI	-	Prebuilt UI components
TipTap Editor	-	Rich text and markdown editor
Cloudinary	-	Media storage and optimization
Stripe	-	Payment processing
Framer Motion	-	Animations and transitions
Tailwind CSS	-	Utility-first CSS framework

⚙️ Installation & Setup

1️⃣ Clone the Repository

git clone https://github.com/yourusername/course-lms.git
cd course-lms

2️⃣ Install Dependencies

Due to compatibility issues with Next.js 15 and React 19 RC, you need to install dependencies with legacy peer dependencies:

npm install --legacy-peer-deps

3️⃣ Create `.env` File

Create a .env file in the root directory with the following environment variables:

DATABASE_URL="mongodb+srv://..."

NEXTAUTH_URL="http://localhost:3000"
AUTH_SECRET="your-secret-key"

GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="your-cloud-name"
CLOUDINARY_API_KEY="your-api-key"
CLOUDINARY_API_SECRET="your-api-secret"
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET="your-upload-preset"

STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

4️⃣ Set Up the Database

Ensure Prisma is configured correctly:

npx prisma generate
npx prisma db push

5️⃣ Run the Development Server

npm run dev

The application will be available at http://localhost:3000.

📚 Core Features

🔐 Authentication

Google OAuth via NextAuth v5 Beta.
Role-based access (Admin/User).

🎓 Course Management

Create, Read, Update, Delete (CRUD) operations for courses.
Organize content into sections and tutorials.
Support for video and text-based lessons.
Content preview system.

📝 Content Editor

Rich text editor using TipTap.
Markdown support for text content.
Drag-and-drop feature for reordering sections and tutorials.

📹 Media Handling

Video and image uploads via Cloudinary.
Secure media storage and content optimization.

📊 Progress Tracking

User progress tracking for enrolled courses.
Save progress and completion status.

💳 Subscription Management

Payment integration via Stripe.
Subscription plans and billing.
Webhook setup for Stripe events.

📂 Project Structure

src/
├── app/                  # App Router pages
│   ├── (backoffice)/     # Admin area
│   ├── (dashboard)/      # User dashboard
│   ├── (landing)/        # Public pages
│   └── api/              # API routes
├── components/           # UI components
├── hooks/                # Custom hooks
├── lib/                  # Utilities
└── types/                # TypeScript types

🌐 External Services Setup

1️⃣ MongoDB Database

Create a MongoDB Atlas cluster.
Obtain the connection string and add it to the .env file.

2️⃣ Google OAuth

Create a project in Google Cloud Console.
Configure the OAuth consent screen.
Obtain client credentials and add them to the .env file.

3️⃣ Cloudinary

Create a Cloudinary account.
Set up an upload preset.
Obtain API credentials and add them to the .env file.

4️⃣ Stripe

Create a Stripe account.
Set up products and prices.
Configure webhook endpoints.
Obtain API keys and add them to the .env file.

🛠️ Development Notes

Next.js 15 introduces experimental features like the App Router and server components.
React 19 RC is used to leverage the latest React advancements.
Turbopack is enabled by default for faster builds.
The project uses Tailwind CSS for styling and Shadcn UI for prebuilt components.

🧩 Common Issues & Troubleshooting

1️⃣ Installation Issues

Always use --legacy-peer-deps during installation due to compatibility issues.
Ensure Node.js 18+ is installed.

2️⃣ Database Connection Issues

Verify your DATABASE_URL in the .env file.
Ensure your MongoDB Atlas cluster is properly configured.

3️⃣ Media Upload Issues

Verify your Cloudinary credentials.
Ensure your upload preset is correctly configured.

4️⃣ Authentication Problems

Double-check your Google OAuth setup.
Ensure your AUTH_SECRET and callback URLs are correctly configured.

📈 Deployment

Ensure the production database is set up.
Configure environment variables for production.
Deploy the application to Vercel:

vercel deploy

🎯 Additional Setup Tips

Use React Query for managing server state.
Implement proper error handling throughout the app.
Follow best practices for TypeScript to ensure maintainable code.
Optimize SEO and performance for better user experience.

Next.js 15 Course Selling Template With Stripe, Mongodb, Prisma with Complete Admin Panel | Next.js 15 LMS