🔧 1. Project Folder Structure courseforge/ │ ├── backend/ │ ├── controllers/ │ ├── middleware/ │ ├── models/ │ ├── routes/ │ ├── utils/ │ └── server.js │ ├── frontend/ │ ├── components/ │ ├── hooks/ │ ├── pages/ │ │ ├── index.js │ │ ├── dashboard.js │ │ ├── create-course.js │ │ ├── [slug].js │ ├── public/ │ └── tailwind.config.js │ ├── .env ├── README.md ├── vercel.json └── render.yaml --- 🧩 2. Backend Code (Node.js + MongoDB) models/Course.js const mongoose = require("mongoose"); const courseSchema = new mongoose.Schema({ title: String, description: String, price: Number, instructor: { type: mongoose.Schema.Types.ObjectId, ref: "User" }, videos: [{ title: String, muxPlaybackId: String }], createdAt: { type: Date, default: Date.now } }); module.exports = mongoose.model("Course", courseSchema); routes/courses.js const express = require("express"); const router = express.Router(); const Course = require("../models/Course"); // Create a course router.post("/", async (req, res) => { const course = new Course(req.body); await course.save(); res.status(201).json(course); }); // Get all courses router.get("/", async (req, res) => { const courses = await Course.find().populate("instructor", "name email"); res.json(courses); }); controllers/muxUploader.js const mux = require('@mux/mux-node'); const { Video } = new mux(process.env.MUX_TOKEN_ID, process.env.MUX_TOKEN_SECRET); exports.uploadVideo = async (req, res) => { const { url } = req.body; const asset = await Video.Assets.create({ input: url, playback_policy: 'public', }); res.json({ playbackId: asset.playback_ids[0].id }); }; --- 🎨 3. Frontend Code (Next.js + Tailwind + Zustand) pages/create-course.js import { useState } from 'react'; import axios from 'axios'; export default function CreateCourse() { const [form, setForm] = useState({ title: '', description: '', price: '' }); const handleSubmit = async () => { const res = await axios.post("/api/courses", form); alert("Course created!"); }; return ( <div className="p-6"> <h1 className="text-2xl font-bold mb-4">Create a Course</h1> <input onChange={e => setForm({...form, title: e.target.value})} placeholder="Title" /> <textarea onChange={e => setForm({...form, description: e.target.value})} placeholder="Description" /> <input type="number" onChange={e => setForm({...form, price: e.target.value})} placeholder="Price" /> <button onClick={handleSubmit} className="bg-blue-600 text-white p-2 rounded">Submit</button> </div> ); } hooks/useStore.js (Zustand State) import { create } from 'zustand'; export const useUserStore = create((set) => ({ user: null, setUser: (user) => set({ user }), })); --- 💳 4. Stripe Integration (Subscriptions + One-time) /routes/stripe.js const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY); const express = require("express"); const router = express.Router(); router.post("/checkout", async (req, res) => { const { courseId, price } = req.body; const session = await stripe.checkout.sessions.create({ mode: "payment", payment_method_types: ["card"], line_items: [{ price_data: { currency: "usd", product_data: { name: "Course Purchase" }, unit_amount: price * 100, }, quantity: 1 }], success_url: `${process.env.CLIENT_URL}/success`, cancel_url: `${process.env.CLIENT_URL}/cancel` }); res.json({ sessionId: session.id }); }); --- 🔐 Auth with Clerk (Email + Google) Install Clerk SDK in Next.js npm install @clerk/nextjs pages/_app.js import { ClerkProvider } from "@clerk/nextjs"; function MyApp({ Component, pageProps }) { return ( <ClerkProvider> <Component {...pageProps} /> </ClerkProvider> ); } export default MyApp; Protect Routes import { SignedIn, SignedOut, RedirectToSignIn } from "@clerk/nextjs"; function Dashboard() { return ( <> <SignedIn> <div>Dashboard Content</div> </SignedIn> <SignedOut> <RedirectToSignIn /> </SignedOut> </> ); } --- 📦 5. Deployment Guide (Vercel + Render) Frontend (Next.js on Vercel) 1. Push /frontend to GitHub. 2. Go to vercel.com → Import Project → Connect GitHub. 3. Set environment variables: NEXT_PUBLIC_CLERK_FRONTEND_API= NEXT_PUBLIC_API_BASE_URL=https://backend-url.com Backend (Express on Render) 1. Push /backend to GitHub. 2. Go to render.com → Create Web Service → Select repo. 3. Set: NODE_VERSION=18 MONGO_URI= STRIPE_SECRET_KEY= MUX_TOKEN_ID= MUX_TOKEN_SECRET= CLIENT_URL=https://courseforge.vercel.app 4. Build Command: npm install Start Command: node server.js --- 🧠 Advanced Features to Add Later Course analytics (completion, engagement) Student quiz builder + grading Webhook-based access control after Stripe payment Certificate generator via PDFKit Instructor revenue dashboard ---