npx create-next-app@latest courstar --ts --tailwind --eslint --app --src-dir --turbopack --import-alias "@/*"npm install @whop/sdk @mux/mux-node @mux/mux-player-react @mux/mux-uploader-react @prisma/client @prisma/adapter-pg pg iron-session zod lucide-react next-themes clsx tailwind-merge
npm install -D prisma dotenv @types/pgNEXT_PUBLIC_APP_URL=https://your-app.vercel.appopenssl rand -base64 32| Variable | Source | Description |
|---|---|---|
DATABASE_URL | Neon via Vercel | Pooled connection (PgBouncer), used at runtime |
DATABASE_URL_UNPOOLED | Neon via Vercel | Direct connection, used by Prisma CLI |
WHOP_CLIENT_ID | Whop app OAuth tab | OAuth client identifier |
WHOP_CLIENT_SECRET | Whop app OAuth tab | OAuth client secret |
WHOP_API_KEY | Business Settings > API Keys | Company API key for Whop for Platforms |
WHOP_COMPANY_ID | Dashboard URL | Starts with biz_, identifies your platform company |
SESSION_SECRET | Generated | At least 32 characters for iron-session encryption |
NEXT_PUBLIC_APP_URL | Set manually | Production URL on Vercel, http://localhost:3000 locally |
WHOP_SANDBOX | Set manually | true during development |
vercel link vercel env pull .env.localWHOP_SANDBOX=trueNEXT_PUBLIC_APP_URL=http://localhost:3000@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--color-background: #0A0A0F;
--color-surface: #13131A;
--color-surface-elevated: #1C1C26;
--color-border: #2A2A3C;
--color-text-primary: #F0F0F5;
--color-text-secondary: #8A8A9A;
--color-accent: #14B8A6;
--color-accent-hover: #0D9488;
--color-accent-active: #0F766E;
--color-success: #34D399;
--color-warning: #FBBF24;
--color-error: #F87171;
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
body {
background-color: var(--color-background);
color: var(--color-text-primary);
}
::selection {
background-color: var(--color-accent);
color: white;
}
/* Light mode overrides */
.light {
--color-background: #FAFAFA;
--color-surface: #FFFFFF;
--color-surface-elevated: #F3F4F6;
--color-border: #E5E7EB;
--color-text-primary: #111827;
--color-text-secondary: #6B7280;
--color-accent: #14B8A6;
--color-accent-hover: #0D9488;
--color-accent-active: #0F766E;
--color-success: #059669;
--color-warning: #D97706;
--color-error: #DC2626;
}generator client {
provider = "prisma-client"
output = "../src/generated/prisma"
}
datasource db {
provider = "postgresql"
}
model User {
id String @id @default(cuid())
whopUserId String @unique
email String?
name String?
avatarUrl String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}import { config } from "dotenv";
config({ path: ".env.local" });
import { defineConfig } from "prisma/config";
export default defineConfig({
schema: "prisma/schema.prisma",
migrations: {
path: "prisma/migrations",
},
datasource: {
url: process.env["DATABASE_URL_UNPOOLED"],
},
});import { PrismaClient } from "@/generated/prisma/client";
import { PrismaPg } from "@prisma/adapter-pg";
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL });
export const prisma =
globalForPrisma.prisma ??
new PrismaClient({
adapter,
log: process.env.NODE_ENV === "development" ? ["query"] : [],
});
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;npx prisma generate
npx prisma db pushimport { z } from "zod";
const envSchema = z.object({
WHOP_CLIENT_ID: z.string().min(1),
WHOP_CLIENT_SECRET: z.string().min(1),
WHOP_API_KEY: z.string().min(1),
WHOP_COMPANY_ID: z.string().startsWith("biz_"),
DATABASE_URL: z.string().min(1),
DATABASE_URL_UNPOOLED: z.string().min(1),
SESSION_SECRET: z.string().min(32),
NEXT_PUBLIC_APP_URL: z.string().min(1),
WHOP_SANDBOX: z.string().optional(),
});
type EnvType = z.infer<typeof envSchema>;
let _env: EnvType | null = null;
export function getEnv(): EnvType {
if (!_env) {
_env = envSchema.parse(process.env);
}
return _env;
}
export const env = new Proxy({} as EnvType, {
get(_target, prop: string) {
return getEnv()[prop as keyof EnvType];
},
});import { getIronSession, SessionOptions } from "iron-session";
import { cookies } from "next/headers";
export interface SessionData {
userId?: string;
whopUserId?: string;
accessToken?: string;
}
const sessionOptions: SessionOptions = {
password: process.env.SESSION_SECRET!,
cookieName: "courstar_session",
cookieOptions: {
secure: process.env.NODE_ENV === "production",
httpOnly: true,
sameSite: "lax" as const,
maxAge: 60 * 60 * 24 * 7, // 7 days
},
};
export async function getSession() {
const cookieStore = await cookies();
return getIronSession<SessionData>(cookieStore, sessionOptions);
}import Whop from "@whop/sdk";
let _whop: Whop | null = null;
export function getWhop(): Whop {
if (!_whop) {
_whop = new Whop({
apiKey: process.env.WHOP_API_KEY!,
webhookKey: process.env.WHOP_WEBHOOK_SECRET
? Buffer.from(process.env.WHOP_WEBHOOK_SECRET).toString("base64")
: undefined,
...(process.env.WHOP_SANDBOX === "true" && {
baseURL: "https://sandbox-api.whop.com/api/v1",
}),
});
}
return _whop;
}
const isSandbox = () => process.env.WHOP_SANDBOX === "true";
const whopApiDomain = () =>
isSandbox() ? "sandbox-api.whop.com" : "api.whop.com";
export const WHOP_OAUTH = {
get authorizationUrl() {
return `https://${whopApiDomain()}/oauth/authorize`;
},
get tokenUrl() {
return `https://${whopApiDomain()}/oauth/token`;
},
get userInfoUrl() {
return `https://${whopApiDomain()}/oauth/userinfo`;
},
get clientId() {
return process.env.WHOP_CLIENT_ID!;
},
get clientSecret() {
return process.env.WHOP_CLIENT_SECRET!;
},
scopes: ["openid", "profile", "email"],
get redirectUri() {
return `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback`;
},
};
export async function generatePKCE() {
const array = new Uint8Array(32);
crypto.getRandomValues(array);
const verifier = base64UrlEncode(array);
const encoder = new TextEncoder();
const data = encoder.encode(verifier);
const digest = await crypto.subtle.digest("SHA-256", data);
const challenge = base64UrlEncode(new Uint8Array(digest));
return { verifier, challenge };
}
function base64UrlEncode(buffer: Uint8Array): string {
let binary = "";
for (const byte of buffer) {
binary += String.fromCharCode(byte);
}
return btoa(binary)
.replace(/\+/g, "-")
.replace(/\//g, "_")
.replace(/=+$/, "");
}import { redirect } from "next/navigation";
import { getSession } from "./session";
import { prisma } from "./prisma";
export async function requireAuth(
options?: { redirect?: boolean }
): Promise<{
id: string;
whopUserId: string;
email: string | null;
name: string | null;
avatarUrl: string | null;
} | null> {
const session = await getSession();
if (!session.userId) {
if (options?.redirect === false) return null;
redirect("/sign-in");
}
const user = await prisma.user.findUnique({
where: { id: session.userId },
});
if (!user) {
session.destroy();
if (options?.redirect === false) return null;
redirect("/sign-in");
}
return user;
}
export async function isAuthenticated(): Promise<boolean> {
const session = await getSession();
return !!session.userId;
}import { NextResponse } from "next/server";
interface RateLimitConfig {
interval: number;
maxRequests: number;
}
const rateLimitMap = new Map<string, { count: number; lastReset: number }>();
export function rateLimit(
key: string,
config: RateLimitConfig = { interval: 60_000, maxRequests: 30 }
): NextResponse | null {
const now = Date.now();
const entry = rateLimitMap.get(key);
if (!entry || now - entry.lastReset > config.interval) {
rateLimitMap.set(key, { count: 1, lastReset: now });
return null;
}
if (entry.count >= config.maxRequests) {
return NextResponse.json(
{ error: "Too many requests. Please try again later." },
{
status: 429,
headers: {
"Retry-After": String(
Math.ceil((config.interval - (now - entry.lastReset)) / 1000)
),
},
}
);
}
entry.count++;
return null;
}
if (typeof globalThis !== "undefined") {
const CLEANUP_INTERVAL = 5 * 60 * 1000;
setInterval(() => {
const now = Date.now();
for (const [key, entry] of rateLimitMap.entries()) {
if (now - entry.lastReset > 10 * 60 * 1000) {
rateLimitMap.delete(key);
}
}
}, CLEANUP_INTERVAL).unref?.();
}import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export function formatPrice(cents: number): string {
if (cents === 0) return "Free";
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
}).format(cents / 100);
}
export function formatDuration(seconds: number): string {
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
if (h > 0) return `${h}h ${m}m`;
if (m > 0) return `${m}m ${s}s`;
return `${s}s`;
}export function slugify(text: string): string {
return (
text
.toLowerCase()
.trim()
.replace(/[^\w\s-]/g, "")
.replace(/[\s_]+/g, "-")
.replace(/-+/g, "-")
.slice(0, 80) +
"-" +
Math.random().toString(36).slice(2, 8)
);
}export const PLATFORM_FEE_PERCENT = Number(process.env.PLATFORM_FEE_PERCENT) || 20;
export const MAX_COURSE_TITLE = 100;
export const MAX_COURSE_DESCRIPTION = 5000;
export const MAX_SECTION_TITLE = 100;
export const MAX_LESSON_TITLE = 100;
export const MAX_REVIEW_COMMENT = 1000;
export const MAX_SECTIONS_PER_COURSE = 20;
export const MAX_LESSONS_PER_SECTION = 30;
export const COURSES_PER_PAGE = 12;import { NextResponse, NextRequest } from "next/server";
import { WHOP_OAUTH, generatePKCE } from "@/lib/whop";
import { rateLimit } from "@/lib/rate-limit";
import { headers } from "next/headers";
export async function GET(_request: NextRequest) {
const headersList = await headers();
const ip =
headersList.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
const limited = rateLimit(`auth:login:${ip}`, {
interval: 60_000,
maxRequests: 10,
});
if (limited) return limited;
const { verifier, challenge } = await generatePKCE();
const nonceArray = new Uint8Array(16);
crypto.getRandomValues(nonceArray);
const nonce = Array.from(nonceArray, (b) =>
b.toString(16).padStart(2, "0")
).join("");
const stateArray = new Uint8Array(16);
crypto.getRandomValues(stateArray);
const state = Array.from(stateArray, (b) =>
b.toString(16).padStart(2, "0")
).join("");
const params = new URLSearchParams({
client_id: WHOP_OAUTH.clientId,
redirect_uri: WHOP_OAUTH.redirectUri,
response_type: "code",
scope: WHOP_OAUTH.scopes.join(" "),
code_challenge: challenge,
code_challenge_method: "S256",
state,
nonce,
});
const response = NextResponse.redirect(
`${WHOP_OAUTH.authorizationUrl}?${params.toString()}`
);
response.cookies.set("oauth_pkce", JSON.stringify({ verifier, state }), {
httpOnly: true,
secure: WHOP_OAUTH.redirectUri.startsWith("https"),
sameSite: "lax",
path: "/",
maxAge: 600,
});
return response;
}import { NextRequest, NextResponse } from "next/server";
import { getSession } from "@/lib/session";
import { WHOP_OAUTH } from "@/lib/whop";
import { prisma } from "@/lib/prisma";
export async function GET(request: NextRequest) {
try {
const code = request.nextUrl.searchParams.get("code");
const state = request.nextUrl.searchParams.get("state");
const pkceCookie = request.cookies.get("oauth_pkce")?.value;
if (!pkceCookie) {
return NextResponse.redirect(
new URL("/sign-in?error=missing_pkce", request.url)
);
}
let verifier: string;
let savedState: string;
try {
const parsed = JSON.parse(pkceCookie);
verifier = parsed.verifier;
savedState = parsed.state;
} catch {
return NextResponse.redirect(
new URL("/sign-in?error=invalid_pkce", request.url)
);
}
if (!code) {
return NextResponse.redirect(
new URL("/sign-in?error=missing_code", request.url)
);
}
if (!savedState || savedState !== state) {
return NextResponse.redirect(
new URL("/sign-in?error=invalid_state", request.url)
);
}
const tokenResponse = await fetch(WHOP_OAUTH.tokenUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
grant_type: "authorization_code",
code,
redirect_uri: WHOP_OAUTH.redirectUri,
client_id: WHOP_OAUTH.clientId,
client_secret: WHOP_OAUTH.clientSecret,
code_verifier: verifier,
}),
});
if (!tokenResponse.ok) {
console.error("Token exchange failed:", tokenResponse.status);
return NextResponse.redirect(
new URL("/sign-in?error=token_exchange", request.url)
);
}
const tokenData = await tokenResponse.json();
const accessToken: string = tokenData.access_token;
const userInfoResponse = await fetch(WHOP_OAUTH.userInfoUrl, {
headers: { Authorization: `Bearer ${accessToken}` },
});
if (!userInfoResponse.ok) {
return NextResponse.redirect(
new URL("/sign-in?error=userinfo", request.url)
);
}
const userInfo = await userInfoResponse.json();
const avatarUrl =
typeof userInfo.picture === "string" &&
userInfo.picture.startsWith("https://")
? userInfo.picture
: null;
const name =
typeof userInfo.name === "string" ? userInfo.name.slice(0, 100) : null;
const user = await prisma.user.upsert({
where: { whopUserId: userInfo.sub },
update: { email: userInfo.email ?? null, name, avatarUrl },
create: {
whopUserId: userInfo.sub,
email: userInfo.email ?? null,
name,
avatarUrl,
},
});
const session = await getSession();
session.userId = user.id;
session.whopUserId = user.whopUserId;
session.accessToken = accessToken;
await session.save();
const response = NextResponse.redirect(
new URL("/dashboard", request.url)
);
response.cookies.delete("oauth_pkce");
return response;
} catch (error) {
console.error("OAuth callback error:", error);
return NextResponse.redirect(
new URL("/sign-in?error=unknown", request.url)
);
}
}import { NextResponse } from "next/server";
import { getSession } from "@/lib/session";
export async function GET() {
const session = await getSession();
session.destroy();
return NextResponse.redirect(
new URL("/sign-in", process.env.NEXT_PUBLIC_APP_URL!)
);
}import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
const publicPaths = [
"/",
"/sign-in",
"/courses",
"/api/auth",
"/api/webhooks",
];
export function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
if (publicPaths.some((p) => pathname === p || pathname.startsWith(p + "/"))) {
return NextResponse.next();
}
if (
pathname.startsWith("/_next/") ||
pathname.startsWith("/favicon") ||
pathname.includes(".")
) {
return NextResponse.next();
}
const session = request.cookies.get("courstar_session");
if (!session) {
if (pathname.startsWith("/api/")) {
return NextResponse.json(
{ error: "Unauthorized" },
{ status: 401 }
);
}
return NextResponse.redirect(new URL("/sign-in", request.url));
}
return NextResponse.next();
}
export const config = {
matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ThemeProvider } from "next-themes";
import { Sidebar } from "@/components/sidebar";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Courstar",
description: "Learn from the best creators on the internet",
};
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const user = await requireAuth({ redirect: false });
const creatorProfile = user ? await getCreatorProfile(user.id) : null;
return (
<html lang="en" suppressHydrationWarning>
<body className={`${inter.className} antialiased`}>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<div className="flex h-screen overflow-hidden">
<Sidebar
user={
user
? { id: user.id, name: user.name, avatarUrl: user.avatarUrl }
: null
}
isInstructor={!!creatorProfile?.kycComplete}
/>
<main className="flex-1 overflow-y-auto pt-14 lg:pt-0">{children}</main>
</div>
</ThemeProvider>
</body>
</html>
);
}<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import Link from "next/link";
export default function SignInPage() {
return (
<div className="min-h-full flex items-center justify-center px-8">
<div className="w-full max-w-sm p-10 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] text-center">
<h1 className="text-2xl font-bold mb-2">Courstar</h1>
<p className="text-sm text-[var(--color-text-secondary)] mb-10">
Learn from the best creators on the internet
</p>
<a
href="/api/auth/login"
className="block w-full py-3.5 px-4 rounded-lg bg-[var(--color-accent)] text-white font-semibold hover:bg-[var(--color-accent-hover)]"
>
Sign in with Whop
</a>
<Link
href="/"
className="block mt-5 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
>
&larr; Back to home
</Link>
</div>
</div>
);
}</code></pre>
</div>
</div><div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">vercel.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">const config = {
framework: "nextjs" as const,
buildCommand: "prisma generate && next build",
regions: ["iad1"],
headers: [
{
source: "/(.*)",
headers: [
{ key: "X-Content-Type-Options", value: "nosniff" },
{ key: "X-Frame-Options", value: "DENY" },
{ key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
{ key: "Strict-Transport-Security", value: "max-age=31536000; includeSubDomains" },
{
key: "Content-Security-Policy",
value:
"default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.whop.com https://www.gstatic.com; style-src 'self' 'unsafe-inline' https://*.whop.com; img-src 'self' https://*.whop.com https://image.mux.com https://ui-avatars.com data:; media-src 'self' https://stream.mux.com https://*.mux.com blob:; font-src 'self' https://*.whop.com; connect-src 'self' https://*.mux.com https://*.production.mux.com https://*.whop.com wss://*.whop.com https://inferred.litix.io; frame-src 'self' https://*.whop.com; frame-ancestors 'none'; form-action 'self'; base-uri 'self'",
},
{ key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
],
},
],
};
export default config;</code></pre>
</div>
</div><div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">next-config.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import type { NextConfig } from "next";
const nextConfig: NextConfig = {
images: {
remotePatterns: [
{ protocol: "https", hostname: "**.whop.com" },
{ protocol: "https", hostname: "image.mux.com" },
],
},
};
export default nextConfig;</code></pre>
</div>
</div>npm run devgenerator client {
provider = "prisma-client"
output = "../src/generated/prisma"
}
datasource db {
provider = "postgresql"
}
enum Category {
DEVELOPMENT
BUSINESS
DESIGN
MARKETING
PHOTOGRAPHY
MUSIC
HEALTH
LIFESTYLE
DATA_SCIENCE
ARTIFICIAL_INTELLIGENCE
CYBERSECURITY
CLOUD_COMPUTING
MOBILE_DEVELOPMENT
GAME_DEVELOPMENT
FINANCE
ENTREPRENEURSHIP
PROJECT_MANAGEMENT
PERSONAL_DEVELOPMENT
WRITING
VIDEO_PRODUCTION
ANIMATION
ARCHITECTURE
ENGINEERING
SCIENCE
MATHEMATICS
LANGUAGE
COOKING
FITNESS
PARENTING
TEACHING
}
enum CourseStatus {
DRAFT
PUBLISHED
}
model User {
id String @id @default(cuid())
whopUserId String @unique
email String?
name String?
avatarUrl String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
creatorProfile CreatorProfile?
enrollments Enrollment[]
progress Progress[]
reviews Review[]
}
model CreatorProfile {
id String @id @default(cuid())
userId String @unique
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
headline String?
bio String?
whopCompanyId String @unique
kycComplete Boolean @default(false)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
courses Course[]
}
model Course {
id String @id @default(cuid())
title String
slug String @unique
description String
price Int
thumbnailUrl String?
category Category
status CourseStatus @default(DRAFT)
creatorId String
creator CreatorProfile @relation(fields: [creatorId], references: [id], onDelete: Cascade)
whopProductId String?
whopPlanId String?
whopCheckoutUrl String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
sections Section[]
enrollments Enrollment[]
reviews Review[]
}
model Section {
id String @id @default(cuid())
title String
order Int
courseId String
course Course @relation(fields: [courseId], references: [id], onDelete: Cascade)
lessons Lesson[]
@@unique([courseId, order])
}
model Lesson {
id String @id @default(cuid())
title String
order Int
isFree Boolean @default(false)
sectionId String
section Section @relation(fields: [sectionId], references: [id], onDelete: Cascade)
muxAssetId String? @unique
muxPlaybackId String?
muxUploadId String?
duration Int?
videoReady Boolean @default(false)
progress Progress[]
@@unique([sectionId, order])
}
model Enrollment {
id String @id @default(cuid())
userId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
courseId String
course Course @relation(fields: [courseId], references: [id], onDelete: Cascade)
whopPaymentId String?
createdAt DateTime @default(now())
@@unique([userId, courseId])
}
model Progress {
id String @id @default(cuid())
userId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
lessonId String
lesson Lesson @relation(fields: [lessonId], references: [id], onDelete: Cascade)
completed Boolean @default(false)
completedAt DateTime?
@@unique([userId, lessonId])
}
model Review {
id String @id @default(cuid())
userId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
courseId String
course Course @relation(fields: [courseId], references: [id], onDelete: Cascade)
rating Int
comment String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@unique([userId, courseId])
}
model WebhookEvent {
id String @id
source String
processedAt DateTime @default(now())
}npx prisma db push
npx prisma generateexport async function getCreatorProfile(userId: string) {
return prisma.creatorProfile.findUnique({
where: { userId },
});
}import { requireAuth, getCreatorProfile } from "@/lib/auth";
// Inside the RootLayout function, after requireAuth:
const creatorProfile = user ? await getCreatorProfile(user.id) : null;
// Update the Sidebar prop:
isInstructor={!!creatorProfile?.kycComplete}import { NextResponse } from "next/server";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { getWhop } from "@/lib/whop";
import { prisma } from "@/lib/prisma";
import { rateLimit } from "@/lib/rate-limit";
import { headers } from "next/headers";
const isSandbox = process.env.WHOP_SANDBOX === "true";
export async function POST() {
const headersList = await headers();
const ip =
headersList.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
const limited = rateLimit(`teach:onboard:${ip}`, {
interval: 60_000,
maxRequests: 5,
});
if (limited) return limited;
const user = await requireAuth({ redirect: false });
if (!user) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const existing = await getCreatorProfile(user.id);
if (existing) {
if (!existing.kycComplete) {
if (isSandbox) {
await prisma.creatorProfile.update({
where: { id: existing.id },
data: { kycComplete: true },
});
return NextResponse.json({ sandbox: true });
}
const whop = getWhop();
const accountLink = await whop.accountLinks.create({
company_id: existing.whopCompanyId,
use_case: "account_onboarding",
return_url: `${process.env.NEXT_PUBLIC_APP_URL}/teach/dashboard`,
refresh_url: `${process.env.NEXT_PUBLIC_APP_URL}/teach?refresh=true`,
});
return NextResponse.json({ url: accountLink.url });
}
return NextResponse.json({ url: "/teach/dashboard" });
}
const whop = getWhop();
const company = await whop.companies.create({
email: user.email || undefined,
title: `${user.name || "Instructor"}'s Teaching Account`,
parent_company_id: process.env.WHOP_COMPANY_ID!,
});
if (isSandbox) {
await prisma.creatorProfile.create({
data: {
userId: user.id,
whopCompanyId: company.id,
kycComplete: true,
},
});
return NextResponse.json({ sandbox: true });
}
await prisma.creatorProfile.create({
data: {
userId: user.id,
whopCompanyId: company.id,
kycComplete: false,
},
});
const accountLink = await whop.accountLinks.create({
company_id: company.id,
use_case: "account_onboarding",
return_url: `${process.env.NEXT_PUBLIC_APP_URL}/teach/dashboard`,
refresh_url: `${process.env.NEXT_PUBLIC_APP_URL}/teach?refresh=true`,
});
return NextResponse.json({ url: accountLink.url });
}import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { redirect } from "next/navigation";
import { DollarSign, CreditCard, Wallet } from "lucide-react";
import { OnboardButton } from "@/components/onboard-button";
export default async function TeachPage() {
const user = await requireAuth();
if (!user) redirect("/sign-in");
const profile = await getCreatorProfile(user.id);
if (profile?.kycComplete) redirect("/teach/dashboard");
return (
<main className="max-w-3xl mx-auto px-8 py-24 text-center">
<h1 className="text-4xl md:text-5xl font-extrabold mb-4">
Share your expertise with the world
</h1>
<p className="text-lg text-[var(--color-text-secondary)] mb-12 max-w-xl mx-auto">
Create video courses, set your own price, and earn money from every student enrollment. We handle payments and payouts.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
{[
{ icon: DollarSign, title: "Set Your Price", desc: "You decide what your course is worth" },
{ icon: CreditCard, title: "We Handle Payments", desc: "Whop processes all transactions automatically" },
{ icon: Wallet, title: "Get Paid", desc: "Withdraw earnings to your bank account anytime" },
].map((item) => (
<div key={item.title} className="p-7 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)]">
<item.icon className="w-8 h-8 text-[var(--color-accent)] mb-3 mx-auto" />
<h3 className="font-semibold mb-1">{item.title}</h3>
<p className="text-sm text-[var(--color-text-secondary)]">{item.desc}</p>
</div>
))}
</div>
<p className="text-sm text-[var(--color-text-secondary)] mb-6">
Platform takes a 20% commission — you keep 80% of every sale
</p>
<OnboardButton hasProfile={!!profile} />
</main>
);
}"use client";
import { useState } from "react";
export function OnboardButton({ hasProfile }: { hasProfile: boolean }) {
const [loading, setLoading] = useState(false);
const [sandboxMessage, setSandboxMessage] = useState(false);
async function handleClick() {
setLoading(true);
try {
const res = await fetch("/api/teach/onboard", { method: "POST" });
const data = await res.json();
if (data.sandbox) {
setSandboxMessage(true);
setTimeout(() => {
window.location.href = "/teach/dashboard";
}, 2000);
return;
}
if (data.url) {
window.location.href = data.url;
}
} catch {
setLoading(false);
}
}
if (sandboxMessage) {
return (
<div className="rounded-lg bg-[var(--color-success)]/10 border border-[var(--color-success)]/20 p-5 text-center">
<p className="text-[var(--color-success)] font-medium mb-1">You're all set!</p>
<p className="text-sm text-[var(--color-text-secondary)]">
Since this demo uses the Whop sandbox, KYC is not required. Redirecting to your dashboard...
</p>
</div>
);
}
return (
<button
onClick={handleClick}
disabled={loading}
className="px-8 py-4 rounded-lg bg-[var(--color-accent)] text-white text-lg font-semibold hover:bg-[var(--color-accent-hover)] disabled:opacity-50"
>
{loading
? "Setting up..."
: hasProfile
? "Complete Verification"
: "Become an Instructor"}
</button>
);
}import { redirect } from "next/navigation";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { OnboardButton } from "@/components/onboard-button";
export default async function TeachDashboardPage() {
const user = await requireAuth();
if (!user) return null;
const profile = await getCreatorProfile(user.id);
if (!profile) {
redirect("/teach");
}
return (
<div className="mx-auto max-w-4xl px-8 py-10">
{!profile.kycComplete && (
<div className="mb-8 rounded-lg border border-warning/30 bg-warning/10 p-4">
<p className="mb-3 text-sm font-medium text-warning">
Complete your identity verification to start creating courses.
</p>
<OnboardButton hasProfile={true} />
</div>
)}
<h1 className="mb-2 text-2xl font-bold tracking-tight text-text-primary">
Instructor Dashboard
</h1>
<p className="mb-8 text-text-secondary">
Welcome back, {user.name || "Instructor"}.
</p>
<div className="rounded-lg border border-border bg-surface p-12 text-center">
<p className="text-text-secondary">
Your courses will appear here.
</p>
</div>
</div>
);
}import { requireAuth } from "@/lib/auth";
export default async function DashboardPage() {
const user = await requireAuth();
if (!user) return null;
return (
<div className="mx-auto max-w-4xl px-8 py-10">
<h1 className="mb-2 text-2xl font-bold tracking-tight text-text-primary">
My Learning
</h1>
<p className="mb-8 text-text-secondary">
Welcome back, {user.name || "Student"}.
</p>
<div className="rounded-lg border border-border bg-surface p-12 text-center">
<p className="text-text-secondary">
Your enrolled courses will appear here.
</p>
</div>
</div>
);
}vercel env pull .env.localMUX_TOKEN_ID: z.string().min(1).optional(),
MUX_TOKEN_SECRET: z.string().min(1).optional(),
MUX_WEBHOOK_SECRET: z.string().min(1).optional(),import Mux from "@mux/mux-node";
let _mux: Mux | null = null;
export function getMux(): Mux {
if (!_mux) {
_mux = new Mux({
tokenId: process.env.MUX_TOKEN_ID!,
tokenSecret: process.env.MUX_TOKEN_SECRET!,
});
}
return _mux;
}import { NextResponse } from "next/server";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { rateLimit } from "@/lib/rate-limit";
import { slugify } from "@/lib/slugify";
import { z } from "zod";
import { MAX_COURSE_TITLE, MAX_COURSE_DESCRIPTION } from "@/lib/constants";
import { headers } from "next/headers";
const categoryValues = [
"DEVELOPMENT", "BUSINESS", "DESIGN", "MARKETING",
"PHOTOGRAPHY", "MUSIC", "HEALTH", "LIFESTYLE",
"DATA_SCIENCE", "ARTIFICIAL_INTELLIGENCE", "CYBERSECURITY", "CLOUD_COMPUTING",
"MOBILE_DEVELOPMENT", "GAME_DEVELOPMENT", "FINANCE", "ENTREPRENEURSHIP",
"PROJECT_MANAGEMENT", "PERSONAL_DEVELOPMENT", "WRITING", "VIDEO_PRODUCTION",
"ANIMATION", "ARCHITECTURE", "ENGINEERING", "SCIENCE",
"MATHEMATICS", "LANGUAGE", "COOKING", "FITNESS",
"PARENTING", "TEACHING",
] as const;
const createCourseSchema = z.object({
title: z.string().min(3).max(MAX_COURSE_TITLE),
description: z.string().min(10).max(MAX_COURSE_DESCRIPTION),
price: z.number().int().min(0),
category: z.enum(categoryValues),
thumbnailUrl: z.string().url().optional().or(z.literal("")),
});
export async function POST(request: Request) {
const headersList = await headers();
const ip = headersList.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
const limited = rateLimit(`teach:courses:${ip}`, { interval: 60_000, maxRequests: 10 });
if (limited) return limited;
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const profile = await getCreatorProfile(user.id);
if (!profile || !profile.kycComplete) {
return NextResponse.json({ error: "Complete instructor onboarding first" }, { status: 403 });
}
const body = await request.json();
const parsed = createCourseSchema.safeParse(body);
if (!parsed.success) {
return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
}
const { title, description, price, category, thumbnailUrl } = parsed.data;
const course = await prisma.course.create({
data: {
title,
slug: slugify(title),
description,
price,
category,
thumbnailUrl: thumbnailUrl || null,
creatorId: profile.id,
status: "DRAFT",
},
});
return NextResponse.json({ course }, { status: 201 });
}"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
const CATEGORIES = [
"DEVELOPMENT", "BUSINESS", "DESIGN", "MARKETING",
"PHOTOGRAPHY", "MUSIC", "HEALTH", "LIFESTYLE",
"DATA_SCIENCE", "ARTIFICIAL_INTELLIGENCE", "CYBERSECURITY", "CLOUD_COMPUTING",
"MOBILE_DEVELOPMENT", "GAME_DEVELOPMENT", "FINANCE", "ENTREPRENEURSHIP",
"PROJECT_MANAGEMENT", "PERSONAL_DEVELOPMENT", "WRITING", "VIDEO_PRODUCTION",
"ANIMATION", "ARCHITECTURE", "ENGINEERING", "SCIENCE",
"MATHEMATICS", "LANGUAGE", "COOKING", "FITNESS",
"PARENTING", "TEACHING",
];
export function CreateCourseForm() {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setLoading(true);
setError("");
const form = new FormData(e.currentTarget);
const body = {
title: form.get("title") as string,
description: form.get("description") as string,
price: Math.round(Number(form.get("price")) * 100),
category: form.get("category") as string,
thumbnailUrl: (form.get("thumbnailUrl") as string) || "",
};
try {
const res = await fetch("/api/teach/courses", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
const data = await res.json();
if (!res.ok) {
setError(typeof data.error === "string" ? data.error : "Validation failed");
return;
}
router.push(`/teach/courses/${data.course.id}/edit`);
} catch {
setError("Something went wrong");
} finally {
setLoading(false);
}
}
return (
<form onSubmit={handleSubmit} className="space-y-6">
{error && (
<div className="p-3 rounded-lg bg-[var(--color-error)]/10 text-[var(--color-error)] text-sm">
{error}
</div>
)}
<div>
<label className="block text-sm text-[var(--color-text-secondary)] mb-1">Title</label>
<input
name="title"
required
maxLength={100}
className="w-full px-4 py-3.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-accent)]"
placeholder="e.g. Introduction to Python"
/>
</div>
<div>
<label className="block text-sm text-[var(--color-text-secondary)] mb-1">Description</label>
<textarea
name="description"
required
rows={4}
maxLength={5000}
className="w-full px-4 py-3.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-accent)] resize-none"
placeholder="What will students learn?"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm text-[var(--color-text-secondary)] mb-1">Price (USD)</label>
<input
name="price"
type="number"
step="0.01"
min="0"
required
className="w-full px-4 py-3.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-accent)]"
placeholder="0.00"
/>
</div>
<div>
<label className="block text-sm text-[var(--color-text-secondary)] mb-1">Category</label>
<select
name="category"
required
className="w-full px-4 py-3 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-accent)]"
>
<option value="">Select...</option>
{CATEGORIES.map((c) => (
<option key={c} value={c}>{c.split("_").map(w => w.charAt(0) + w.slice(1).toLowerCase()).join(" ")}</option>
))}
</select>
</div>
</div>
<div>
<label className="block text-sm text-[var(--color-text-secondary)] mb-1">Thumbnail URL (optional)</label>
<input
name="thumbnailUrl"
type="url"
className="w-full px-4 py-3.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-accent)]"
placeholder="https://..."
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-3.5 rounded-lg bg-[var(--color-accent)] text-white font-semibold hover:bg-[var(--color-accent-hover)] transition-colors disabled:opacity-50"
>
{loading ? "Creating..." : "Create Course"}
</button>
</form>
);
}import { redirect } from "next/navigation";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { CreateCourseForm } from "@/components/create-course-form";
export default async function NewCoursePage() {
const user = await requireAuth();
if (!user) redirect("/sign-in");
const profile = await getCreatorProfile(user.id);
if (!profile?.kycComplete) redirect("/teach");
return (
<main className="max-w-2xl mx-auto px-8 py-10">
<h1 className="text-3xl font-bold tracking-tight mb-10">Create New Course</h1>
<CreateCourseForm />
</main>
);
}import { NextResponse } from "next/server";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { z } from "zod";
import { MAX_COURSE_TITLE, MAX_COURSE_DESCRIPTION } from "@/lib/constants";
const updateCourseSchema = z
.object({
title: z.string().min(3).max(MAX_COURSE_TITLE),
description: z.string().min(10).max(MAX_COURSE_DESCRIPTION),
price: z.number().int().min(0),
category: z.enum([
"DEVELOPMENT", "BUSINESS", "DESIGN", "MARKETING",
"PHOTOGRAPHY", "MUSIC", "HEALTH", "LIFESTYLE",
"DATA_SCIENCE", "ARTIFICIAL_INTELLIGENCE", "CYBERSECURITY", "CLOUD_COMPUTING",
"MOBILE_DEVELOPMENT", "GAME_DEVELOPMENT", "FINANCE", "ENTREPRENEURSHIP",
"PROJECT_MANAGEMENT", "PERSONAL_DEVELOPMENT", "WRITING", "VIDEO_PRODUCTION",
"ANIMATION", "ARCHITECTURE", "ENGINEERING", "SCIENCE",
"MATHEMATICS", "LANGUAGE", "COOKING", "FITNESS",
"PARENTING", "TEACHING",
] as const).optional(),
thumbnailUrl: z.string().url().optional().or(z.literal("")),
})
.partial();
export async function PATCH(
request: Request,
{ params }: { params: Promise<{ courseId: string }> }
) {
const { courseId } = await params;
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const profile = await getCreatorProfile(user.id);
if (!profile) return NextResponse.json({ error: "Not an instructor" }, { status: 403 });
const course = await prisma.course.findUnique({ where: { id: courseId } });
if (!course || course.creatorId !== profile.id) {
return NextResponse.json({ error: "Course not found" }, { status: 404 });
}
const body = await request.json();
const parsed = updateCourseSchema.safeParse(body);
if (!parsed.success) {
return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
}
const updated = await prisma.course.update({
where: { id: courseId },
data: {
...parsed.data,
thumbnailUrl: parsed.data.thumbnailUrl === "" ? null : parsed.data.thumbnailUrl,
},
});
return NextResponse.json({ course: updated });
}import { redirect, notFound } from "next/navigation";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { CourseEditor } from "@/components/course-editor";
export default async function EditCoursePage({
params,
}: {
params: Promise<{ courseId: string }>;
}) {
const { courseId } = await params;
const user = await requireAuth();
if (!user) redirect("/sign-in");
const profile = await getCreatorProfile(user.id);
if (!profile) redirect("/teach");
const course = await prisma.course.findUnique({
where: { id: courseId },
include: {
sections: {
orderBy: { order: "asc" },
include: {
lessons: { orderBy: { order: "asc" } },
},
},
},
});
if (!course || course.creatorId !== profile.id) notFound();
return (
<main className="max-w-4xl mx-auto px-8 py-10">
<div className="flex items-center justify-between mb-10">
<h1 className="text-3xl font-bold tracking-tight">Edit: {course.title}</h1>
{course.status === "PUBLISHED" ? (
<span className="px-3.5 py-1.5 rounded-lg text-sm font-medium bg-[var(--color-success)]/15 text-[var(--color-success)]">Published</span>
) : (
<span className="px-3.5 py-1.5 rounded-lg text-sm font-medium bg-[var(--color-warning)]/15 text-[var(--color-warning)]">Draft</span>
)}
</div>
<div className="space-y-8">
<div className="p-7 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)]">
<h2 className="font-semibold mb-5">Course Info</h2>
<div className="space-y-3 text-sm">
<div><span className="text-[var(--color-text-secondary)]">Title:</span> {course.title}</div>
<div><span className="text-[var(--color-text-secondary)]">Category:</span> {course.category}</div>
<div><span className="text-[var(--color-text-secondary)]">Price:</span> ${(course.price / 100).toFixed(2)}</div>
<div><span className="text-[var(--color-text-secondary)]">Description:</span> <span className="line-clamp-2">{course.description}</span></div>
</div>
</div>
<CourseEditor
courseId={course.id}
sections={course.sections.map((s) => ({
id: s.id, title: s.title, order: s.order,
lessons: s.lessons.map((l) => ({
id: l.id, title: l.title, order: l.order,
isFree: l.isFree, videoReady: l.videoReady,
muxUploadId: l.muxUploadId,
})),
}))}
status={course.status}
/>
</div>
</main>
);
}import { NextResponse } from "next/server";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { z } from "zod";
import { MAX_SECTION_TITLE, MAX_SECTIONS_PER_COURSE } from "@/lib/constants";
async function verifyCourseOwnership(userId: string, courseId: string) {
const profile = await getCreatorProfile(userId);
if (!profile) return null;
const course = await prisma.course.findUnique({ where: { id: courseId } });
if (!course || course.creatorId !== profile.id) return null;
return course;
}
const createSchema = z.object({
title: z.string().min(1).max(MAX_SECTION_TITLE),
courseId: z.string().min(1),
});
const updateSchema = z.object({
id: z.string().min(1),
title: z.string().min(1).max(MAX_SECTION_TITLE).optional(),
order: z.number().int().min(0).optional(),
});
const deleteSchema = z.object({ id: z.string().min(1) });
export async function POST(request: Request) {
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const body = await request.json();
const parsed = createSchema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
const course = await verifyCourseOwnership(user.id, parsed.data.courseId);
if (!course) return NextResponse.json({ error: "Course not found" }, { status: 404 });
const count = await prisma.section.count({ where: { courseId: course.id } });
if (count >= MAX_SECTIONS_PER_COURSE) {
return NextResponse.json(
{ error: `Maximum ${MAX_SECTIONS_PER_COURSE} sections per course` },
{ status: 400 }
);
}
const section = await prisma.section.create({
data: { title: parsed.data.title, courseId: course.id, order: count },
});
return NextResponse.json({ section }, { status: 201 });
}
export async function PATCH(request: Request) {
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const body = await request.json();
const parsed = updateSchema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
const section = await prisma.section.findUnique({
where: { id: parsed.data.id },
});
if (!section) return NextResponse.json({ error: "Section not found" }, { status: 404 });
const course = await verifyCourseOwnership(user.id, section.courseId);
if (!course) return NextResponse.json({ error: "Not authorized" }, { status: 403 });
const updated = await prisma.section.update({
where: { id: parsed.data.id },
data: {
...(parsed.data.title !== undefined && { title: parsed.data.title }),
...(parsed.data.order !== undefined && { order: parsed.data.order }),
},
});
return NextResponse.json({ section: updated });
}
export async function DELETE(request: Request) {
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const body = await request.json();
const parsed = deleteSchema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
const section = await prisma.section.findUnique({
where: { id: parsed.data.id },
});
if (!section) return NextResponse.json({ error: "Section not found" }, { status: 404 });
const course = await verifyCourseOwnership(user.id, section.courseId);
if (!course) return NextResponse.json({ error: "Not authorized" }, { status: 403 });
await prisma.section.delete({ where: { id: parsed.data.id } });
return NextResponse.json({ success: true });
}import { NextResponse } from "next/server";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { getMux } from "@/lib/mux";
import { z } from "zod";
import { MAX_LESSON_TITLE, MAX_LESSONS_PER_SECTION } from "@/lib/constants";
async function verifyLessonOwnership(userId: string, sectionId: string) {
const section = await prisma.section.findUnique({
where: { id: sectionId },
include: { course: true },
});
if (!section) return null;
const profile = await getCreatorProfile(userId);
if (!profile || section.course.creatorId !== profile.id) return null;
return section;
}
const createSchema = z.object({
title: z.string().min(1).max(MAX_LESSON_TITLE),
sectionId: z.string().min(1),
isFree: z.boolean().optional(),
});
const updateSchema = z.object({
id: z.string().min(1),
title: z.string().min(1).max(MAX_LESSON_TITLE).optional(),
order: z.number().int().min(0).optional(),
isFree: z.boolean().optional(),
});
const deleteSchema = z.object({ id: z.string().min(1) });
export async function POST(request: Request) {
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const body = await request.json();
const parsed = createSchema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
const section = await verifyLessonOwnership(user.id, parsed.data.sectionId);
if (!section) return NextResponse.json({ error: "Section not found" }, { status: 404 });
const count = await prisma.lesson.count({ where: { sectionId: section.id } });
if (count >= MAX_LESSONS_PER_SECTION) {
return NextResponse.json(
{ error: `Maximum ${MAX_LESSONS_PER_SECTION} lessons per section` },
{ status: 400 }
);
}
const lesson = await prisma.lesson.create({
data: {
title: parsed.data.title,
sectionId: section.id,
order: count,
isFree: parsed.data.isFree ?? false,
},
});
return NextResponse.json({ lesson }, { status: 201 });
}
export async function PATCH(request: Request) {
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const body = await request.json();
const parsed = updateSchema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
const lesson = await prisma.lesson.findUnique({
where: { id: parsed.data.id },
include: { section: { include: { course: true } } },
});
if (!lesson) return NextResponse.json({ error: "Lesson not found" }, { status: 404 });
const profile = await getCreatorProfile(user.id);
if (!profile || lesson.section.course.creatorId !== profile.id) {
return NextResponse.json({ error: "Not authorized" }, { status: 403 });
}
const updated = await prisma.lesson.update({
where: { id: parsed.data.id },
data: {
...(parsed.data.title !== undefined && { title: parsed.data.title }),
...(parsed.data.order !== undefined && { order: parsed.data.order }),
...(parsed.data.isFree !== undefined && { isFree: parsed.data.isFree }),
},
});
return NextResponse.json({ lesson: updated });
}
export async function DELETE(request: Request) {
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const body = await request.json();
const parsed = deleteSchema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
const lesson = await prisma.lesson.findUnique({
where: { id: parsed.data.id },
include: { section: { include: { course: true } } },
});
if (!lesson) return NextResponse.json({ error: "Lesson not found" }, { status: 404 });
const profile = await getCreatorProfile(user.id);
if (!profile || lesson.section.course.creatorId !== profile.id) {
return NextResponse.json({ error: "Not authorized" }, { status: 403 });
}
if (lesson.muxAssetId) {
try {
const mux = getMux();
await mux.video.assets.delete(lesson.muxAssetId);
} catch {
}
}
await prisma.lesson.delete({ where: { id: parsed.data.id } });
return NextResponse.json({ success: true });
}import { NextResponse } from "next/server";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { getMux } from "@/lib/mux";
import { rateLimit } from "@/lib/rate-limit";
import { z } from "zod";
import { headers } from "next/headers";
const uploadSchema = z.object({ lessonId: z.string().min(1) });
export async function POST(request: Request) {
const headersList = await headers();
const ip = headersList.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
const limited = rateLimit(`teach:upload:${ip}`, { interval: 60_000, maxRequests: 10 });
if (limited) return limited;
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const body = await request.json();
const parsed = uploadSchema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
const lesson = await prisma.lesson.findUnique({
where: { id: parsed.data.lessonId },
include: { section: { include: { course: true } } },
});
if (!lesson) return NextResponse.json({ error: "Lesson not found" }, { status: 404 });
const profile = await getCreatorProfile(user.id);
if (!profile || lesson.section.course.creatorId !== profile.id) {
return NextResponse.json({ error: "Not authorized" }, { status: 403 });
}
const mux = getMux();
if (lesson.muxAssetId) {
try {
await mux.video.assets.delete(lesson.muxAssetId);
} catch {
}
await prisma.lesson.update({
where: { id: lesson.id },
data: {
muxAssetId: null,
muxPlaybackId: null,
muxUploadId: null,
duration: null,
videoReady: false,
},
});
}
const upload = await mux.video.uploads.create({
cors_origin: process.env.NEXT_PUBLIC_APP_URL!,
new_asset_settings: {
passthrough: lesson.id,
playback_policy: ["signed"],
video_quality: "basic",
},
});
await prisma.lesson.update({
where: { id: lesson.id },
data: { muxUploadId: upload.id },
});
return NextResponse.json({ url: upload.url, uploadId: upload.id });
}import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { getMux } from "@/lib/mux";
export async function POST(request: NextRequest) {
const body = await request.text();
const signature = request.headers.get("mux-signature");
if (!signature) {
return NextResponse.json({ error: "Missing signature" }, { status: 401 });
}
type MuxEvent = {
type: string;
id: string;
data: Record<string, unknown>;
};
let event: MuxEvent;
try {
const mux = getMux();
event = mux.webhooks.unwrap(
body,
{ "mux-signature": signature },
process.env.MUX_WEBHOOK_SECRET!
) as unknown as MuxEvent;
} catch {
return NextResponse.json({ error: "Invalid signature" }, { status: 401 });
}
const existing = await prisma.webhookEvent.findUnique({
where: { id: event.id },
});
if (existing) {
return NextResponse.json({ received: true });
}
await prisma.webhookEvent.create({
data: { id: event.id, source: "mux" },
});
if (event.type === "video.asset.ready") {
const asset = event.data as {
id: string;
passthrough?: string;
duration?: number;
playback_ids?: Array<{ id: string; policy: string }>;
};
if (asset.passthrough) {
await prisma.lesson.update({
where: { id: asset.passthrough },
data: {
muxAssetId: asset.id,
muxPlaybackId: asset.playback_ids?.[0]?.id ?? null,
duration: asset.duration ? Math.round(asset.duration) : null,
videoReady: true,
},
});
}
}
if (event.type === "video.upload.asset_created") {
const upload = event.data as { asset_id?: string; id?: string };
if (upload.asset_id && upload.id) {
await prisma.lesson.updateMany({
where: { muxUploadId: upload.id },
data: { muxAssetId: upload.asset_id },
});
}
}
return NextResponse.json({ received: true });
}import { NextResponse } from "next/server";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { getWhop } from "@/lib/whop";
import { PLATFORM_FEE_PERCENT } from "@/lib/constants";
import { rateLimit } from "@/lib/rate-limit";
import { headers } from "next/headers";
export async function POST(
_request: Request,
{ params }: { params: Promise<{ courseId: string }> }
) {
const { courseId } = await params;
const headersList = await headers();
const ip = headersList.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
const limited = rateLimit(`teach:publish:${ip}`, { interval: 60_000, maxRequests: 5 });
if (limited) return limited;
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const profile = await getCreatorProfile(user.id);
if (!profile) return NextResponse.json({ error: "Not an instructor" }, { status: 403 });
const course = await prisma.course.findUnique({
where: { id: courseId },
include: {
sections: {
include: {
lessons: { where: { videoReady: true } },
},
},
},
});
if (!course || course.creatorId !== profile.id) {
return NextResponse.json({ error: "Course not found" }, { status: 404 });
}
if (course.status === "PUBLISHED") {
return NextResponse.json({ error: "Already published" }, { status: 400 });
}
const sectionsWithLessons = course.sections.filter(
(s) => s.lessons.length > 0
);
if (sectionsWithLessons.length === 0) {
return NextResponse.json(
{ error: "Course must have at least one section with a ready video lesson" },
{ status: 400 }
);
}
if (course.price > 0) {
const whop = getWhop();
const product = await whop.products.create({
company_id: profile.whopCompanyId,
title: course.title.slice(0, 40),
description: course.description.slice(0, 500),
});
const priceInDollars = course.price / 100;
const plan = await whop.plans.create({
company_id: profile.whopCompanyId,
product_id: product.id,
initial_price: priceInDollars,
plan_type: "one_time",
});
const applicationFee = Math.round(priceInDollars * (PLATFORM_FEE_PERCENT / 100) * 100) / 100;
const checkout = await whop.checkoutConfigurations.create({
plan: {
company_id: profile.whopCompanyId,
currency: "usd",
initial_price: priceInDollars,
plan_type: "one_time",
application_fee_amount: applicationFee,
},
metadata: {
courstar_course_id: course.id,
},
redirect_url: `${process.env.NEXT_PUBLIC_APP_URL}/courses/${course.slug}/learn`,
});
await prisma.course.update({
where: { id: courseId },
data: {
status: "PUBLISHED",
whopProductId: product.id,
whopPlanId: plan.id,
whopCheckoutUrl: checkout.purchase_url,
},
});
} else {
await prisma.course.update({
where: { id: courseId },
data: { status: "PUBLISHED" },
});
}
return NextResponse.json({ success: true });
}WHOP_WEBHOOK_SECRET: z.string().min(1).optional(),import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { COURSES_PER_PAGE } from "@/lib/constants";
import { formatPrice } from "@/lib/utils";
import { Star, Users } from "lucide-react";
import type { Category } from "@/generated/prisma/client";
const CATEGORIES = [
"DEVELOPMENT", "BUSINESS", "DESIGN", "MARKETING",
"PHOTOGRAPHY", "MUSIC", "HEALTH", "LIFESTYLE",
"DATA_SCIENCE", "ARTIFICIAL_INTELLIGENCE", "CYBERSECURITY", "CLOUD_COMPUTING",
"MOBILE_DEVELOPMENT", "GAME_DEVELOPMENT", "FINANCE", "ENTREPRENEURSHIP",
"PROJECT_MANAGEMENT", "PERSONAL_DEVELOPMENT", "WRITING", "VIDEO_PRODUCTION",
"ANIMATION", "ARCHITECTURE", "ENGINEERING", "SCIENCE",
"MATHEMATICS", "LANGUAGE", "COOKING", "FITNESS",
"PARENTING", "TEACHING",
] as const;
export default async function CoursesPage({
searchParams,
}: {
searchParams: Promise<{ q?: string; category?: string; page?: string }>;
}) {
const { q, category, page: pageStr } = await searchParams;
const page = Math.max(1, Number(pageStr) || 1);
const where = {
status: "PUBLISHED" as const,
...(category && CATEGORIES.includes(category as Category) && { category: category as Category }),
...(q && { title: { contains: q, mode: "insensitive" as const } }),
};
const [courses, total] = await Promise.all([
prisma.course.findMany({
where,
include: {
creator: { include: { user: true } },
_count: { select: { enrollments: true } },
reviews: { select: { rating: true } },
sections: { include: { _count: { select: { lessons: true } } } },
},
orderBy: { createdAt: "desc" },
skip: (page - 1) * COURSES_PER_PAGE,
take: COURSES_PER_PAGE,
}),
prisma.course.count({ where }),
]);
const totalPages = Math.ceil(total / COURSES_PER_PAGE);
return (
<div className="max-w-6xl mx-auto px-8 py-10">
<h1 className="text-3xl font-bold tracking-tight mb-10">Browse Courses</h1>
<form className="mb-10 flex flex-col sm:flex-row gap-4">
<input
type="text"
name="q"
defaultValue={q}
placeholder="Search courses..."
className="flex-1 px-5 py-3.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-secondary)]"
/>
<select
name="category"
defaultValue={category}
className="px-5 py-3.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--color-text-primary)]"
>
<option value="">All Categories</option>
{CATEGORIES.map((c) => (
<option key={c} value={c}>
{c.split("_").map(w => w.charAt(0) + w.slice(1).toLowerCase()).join(" ")}
</option>
))}
</select>
<button type="submit" className="px-8 py-3.5 rounded-lg bg-[var(--color-accent)] text-white font-semibold hover:bg-[var(--color-accent-hover)]">
Search
</button>
</form>
{courses.length === 0 ? (
<p className="text-[var(--color-text-secondary)] text-center py-20">No courses found.</p>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{courses.map((course) => {
const avgRating =
course.reviews.length > 0
? course.reviews.reduce((sum, r) => sum + r.rating, 0) / course.reviews.length
: 0;
const lessonCount = course.sections.reduce(
(sum, s) => sum + s._count.lessons,
0
);
return (
<Link
key={course.id}
href={`/courses/${course.slug}`}
className="group rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] overflow-hidden hover:shadow-lg hover:shadow-black/20 hover:border-[var(--color-surface-elevated)]"
>
<div className="relative aspect-video bg-[var(--color-surface-elevated)]">
{course.thumbnailUrl && (
<img
src={course.thumbnailUrl}
alt={course.title}
className="w-full h-full object-cover"
/>
)}
<span className="absolute top-3 right-3 px-3 py-1.5 rounded-lg text-xs font-semibold bg-black/70 text-white backdrop-blur-sm">
{formatPrice(course.price)}
</span>
</div>
<div className="p-5">
<h3 className="font-semibold text-[15px] leading-snug line-clamp-2 mb-2 group-hover:text-[var(--color-accent)]">
{course.title}
</h3>
<p className="text-sm text-[var(--color-text-secondary)] mb-3">
{course.creator.user.name || "Instructor"}
</p>
<div className="flex items-center gap-3 text-xs text-[var(--color-text-secondary)]">
{avgRating > 0 && (
<span className="flex items-center gap-1">
<Star className="w-3.5 h-3.5 fill-[var(--color-warning)] text-[var(--color-warning)]" />
{avgRating.toFixed(1)} ({course.reviews.length})
</span>
)}
<span className="flex items-center gap-1">
<Users className="w-3.5 h-3.5" />
{course._count.enrollments}
</span>
<span>{lessonCount} lessons</span>
</div>
</div>
</Link>
);
})}
</div>
)}
{totalPages > 1 && (
<div className="flex justify-center gap-2 mt-12">
{Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
<Link
key={p}
href={`/courses?${new URLSearchParams({
...(q && { q }),
...(category && { category }),
page: String(p),
})}`}
className={`px-4 py-2 rounded-lg text-sm font-medium ${
p === page
? "bg-[var(--color-accent)] text-white"
: "bg-[var(--color-surface)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
}`}
>
{p}
</Link>
))}
</div>
)}
</div>
);
}import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { requireAuth } from "@/lib/auth";
import { formatPrice, formatDuration } from "@/lib/utils";
import { Star, Clock, Play, Lock, Users, BookOpen } from "lucide-react";
import type { Metadata } from "next";
export async function generateMetadata({
params,
}: {
params: Promise<{ slug: string }>;
}): Promise<Metadata> {
const { slug } = await params;
const course = await prisma.course.findUnique({ where: { slug } });
if (!course) return { title: "Course Not Found" };
return {
title: `${course.title} | Courstar`,
description: course.description.slice(0, 160),
openGraph: {
title: course.title,
description: course.description.slice(0, 160),
images: course.thumbnailUrl ? [course.thumbnailUrl] : [],
},
};
}export default async function CourseDetailPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const course = await prisma.course.findUnique({
where: { slug },
include: {
creator: { include: { user: true } },
sections: {
orderBy: { order: "asc" },
include: { lessons: { orderBy: { order: "asc" } } },
},
reviews: { include: { user: true }, orderBy: { createdAt: "desc" }, take: 10 },
_count: { select: { enrollments: true } },
},
});
if (!course || course.status !== "PUBLISHED") notFound();
const user = await requireAuth({ redirect: false });
let isEnrolled = false;
if (user) {
const enrollment = await prisma.enrollment.findUnique({
where: { userId_courseId: { userId: user.id, courseId: course.id } },
});
isEnrolled = !!enrollment;
}
const avgRating = course.reviews.length > 0
? course.reviews.reduce((sum, r) => sum + r.rating, 0) / course.reviews.length : 0;
const totalLessons = course.sections.reduce((sum, s) => sum + s.lessons.length, 0);
const totalDuration = course.sections.reduce(
(sum, s) => sum + s.lessons.reduce((ls, l) => ls + (l.duration || 0), 0), 0);
// ... render (described below)
}{isEnrolled ? (
<Link href={`/courses/${course.slug}/learn`}
className="block w-full text-center py-3 rounded-lg bg-[var(--color-success)] text-white font-semibold hover:opacity-90 transition-opacity">
Start Learning
</Link>
) : user ? (
course.price > 0 && course.whopCheckoutUrl ? (
<a href={course.whopCheckoutUrl}
className="block w-full text-center py-3.5 rounded-lg bg-[var(--color-accent)] text-white font-semibold hover:bg-[var(--color-accent-hover)] transition-colors">
Enroll Now
</a>
) : (
<form action={`/api/courses/${course.id}/enroll`} method="POST">
<button type="submit" className="w-full py-3.5 rounded-lg bg-[var(--color-accent)] text-white font-semibold hover:bg-[var(--color-accent-hover)] transition-colors">
Enroll for Free
</button>
</form>
)
) : (
<Link href="/sign-in"
className="block w-full text-center py-3.5 rounded-lg bg-[var(--color-accent)] text-white font-semibold hover:bg-[var(--color-accent-hover)] transition-colors">
Sign in to Enroll
</Link>
)}import { NextResponse } from "next/server";
import { requireAuth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { rateLimit } from "@/lib/rate-limit";
import { headers } from "next/headers";
export async function POST(
_request: Request,
{ params }: { params: Promise<{ courseId: string }> }
) {
const { courseId } = await params;
const headersList = await headers();
const ip = headersList.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
const limited = rateLimit(`enroll:${ip}`, { interval: 60_000, maxRequests: 10 });
if (limited) return limited;
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const course = await prisma.course.findUnique({ where: { id: courseId } });
if (!course || course.status !== "PUBLISHED")
return NextResponse.json({ error: "Course not found" }, { status: 404 });
if (course.price > 0)
return NextResponse.json({ error: "This course requires payment" }, { status: 400 });
const existing = await prisma.enrollment.findUnique({
where: { userId_courseId: { userId: user.id, courseId } },
});
if (existing) return NextResponse.json({ error: "Already enrolled" }, { status: 400 });
await prisma.enrollment.create({ data: { userId: user.id, courseId } });
return NextResponse.json({ success: true });
}import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { getWhop } from "@/lib/whop";
export async function POST(request: NextRequest) {
const bodyText = await request.text();
const headerObj = Object.fromEntries(request.headers);
const whop = getWhop();
type WhopEvent = { type: string; id: string; data: Record<string, unknown> };
let webhookData: WhopEvent;
try {
webhookData = whop.webhooks.unwrap(bodyText, {
headers: headerObj,
}) as unknown as WhopEvent;
} catch {
return NextResponse.json({ error: "Invalid signature" }, { status: 401 });
}
const existing = await prisma.webhookEvent.findUnique({ where: { id: webhookData.id } });
if (existing) return NextResponse.json({ received: true });
await prisma.webhookEvent.create({ data: { id: webhookData.id, source: "whop" } });
if (webhookData.type === "payment.succeeded") {
const payment = webhookData.data as {
id: string;
plan?: { id: string };
user?: { id: string; email?: string };
metadata?: Record<string, string>;
};
let course = payment.plan?.id
? await prisma.course.findFirst({ where: { whopPlanId: payment.plan.id } })
: null;
if (!course && payment.metadata?.courstar_course_id) {
course = await prisma.course.findUnique({
where: { id: payment.metadata.courstar_course_id },
});
}
if (course) {
const whopUserId = payment.user?.id;
let user = whopUserId
? await prisma.user.findFirst({ where: { whopUserId } })
: null;
if (!user && payment.user?.email) {
user = await prisma.user.findFirst({ where: { email: payment.user.email } });
}
if (user) {
await prisma.enrollment.upsert({
where: { userId_courseId: { userId: user.id, courseId: course.id } },
update: { whopPaymentId: payment.id },
create: { userId: user.id, courseId: course.id, whopPaymentId: payment.id },
});
}
}
}
return NextResponse.json({ received: true });
}import { NextResponse } from "next/server";
import { requireAuth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { z } from "zod";
import { MAX_REVIEW_COMMENT } from "@/lib/constants";
const reviewSchema = z.object({
rating: z.number().int().min(1).max(5),
comment: z.string().max(MAX_REVIEW_COMMENT).optional().or(z.literal("")),
});
export async function POST(
request: Request,
{ params }: { params: Promise<{ courseId: string }> }
) {
const { courseId } = await params;
const user = await requireAuth({ redirect: false });
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const enrollment = await prisma.enrollment.findUnique({
where: { userId_courseId: { userId: user.id, courseId } },
});
if (!enrollment)
return NextResponse.json({ error: "Must be enrolled to review" }, { status: 403 });
const body = await request.json();
const parsed = reviewSchema.safeParse(body);
if (!parsed.success)
return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
const review = await prisma.review.upsert({
where: { userId_courseId: { userId: user.id, courseId } },
update: { rating: parsed.data.rating, comment: parsed.data.comment || null },
create: { userId: user.id, courseId, rating: parsed.data.rating, comment: parsed.data.comment || null },
});
return NextResponse.json({ review });
}vercel env pull .env.localimport Mux from "@mux/mux-node";
let _mux: Mux | null = null;
export function getMux(): Mux {
if (!_mux) {
_mux = new Mux({
tokenId: process.env.MUX_TOKEN_ID!,
tokenSecret: process.env.MUX_TOKEN_SECRET!,
jwtSigningKey: process.env.MUX_SIGNING_KEY_ID,
jwtPrivateKey: process.env.MUX_SIGNING_PRIVATE_KEY,
});
}
return _mux;
}
export async function signPlaybackId(playbackId: string): Promise<string> {
const mux = getMux();
return mux.jwt.signPlaybackId(playbackId, { expiration: "4h" });
}import { NextResponse } from "next/server";
import { requireAuth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { signPlaybackId } from "@/lib/mux";
import { rateLimit } from "@/lib/rate-limit";
import { headers } from "next/headers";
export async function GET(
_request: Request,
{ params }: { params: Promise<{ playbackId: string }> }
) {
const { playbackId } = await params;
const headersList = await headers();
const ip = headersList.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
const limited = rateLimit(`playback:${ip}`, { interval: 60_000, maxRequests: 30 });
if (limited) return limited;
const lesson = await prisma.lesson.findFirst({
where: { muxPlaybackId: playbackId },
include: { section: { include: { course: true } } },
});
if (!lesson) {
return NextResponse.json({ error: "Not found" }, { status: 404 });
}
if (lesson.isFree) {
const token = await signPlaybackId(playbackId);
return NextResponse.json({ token });
}
const user = await requireAuth({ redirect: false });
if (!user)
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const enrollment = await prisma.enrollment.findUnique({
where: {
userId_courseId: {
userId: user.id,
courseId: lesson.section.course.id,
},
},
});
if (!enrollment) {
return NextResponse.json({ error: "Not enrolled" }, { status: 403 });
}
const token = await signPlaybackId(playbackId);
return NextResponse.json({ token });
}"use client";
import { useEffect, useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import MuxPlayer from "@mux/mux-player-react";
export function VideoPlayer({
playbackId,
lessonId,
isEnrolled,
}: {
playbackId: string;
lessonId?: string;
isEnrolled?: boolean;
}) {
const router = useRouter();
const [token, setToken] = useState<string | null>(null);
useEffect(() => {
fetch(`/api/playback/${playbackId}`)
.then((res) => res.json())
.then((data) => {
if (data.token) setToken(data.token);
})
.catch(console.error);
}, [playbackId]);
const handleEnded = useCallback(async () => {
if (!lessonId || !isEnrolled) return;
try {
await fetch(`/api/lessons/${lessonId}/progress`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ completed: true }),
});
router.refresh();
} catch {
}
}, [lessonId, isEnrolled, router]);
if (!token) {
return (
<div className="w-full aspect-video bg-black flex items-center justify-center">
<div className="w-8 h-8 border-2 border-[var(--color-accent)] border-t-transparent rounded-full animate-spin" />
</div>
);
}
return (
<MuxPlayer
playbackId={playbackId}
tokens={{ playback: token }}
accentColor="#14B8A6"
className="w-full aspect-video"
onEnded={handleEnded}
/>
);
}import Link from "next/link";
import { redirect, notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { requireAuth } from "@/lib/auth";
import { formatDuration } from "@/lib/utils";
import { CheckCircle, Circle, ChevronLeft, ChevronRight } from "lucide-react";
import { VideoPlayer } from "@/components/video-player";
import { MarkCompleteButton } from "@/components/mark-complete-button";
export default async function LessonPage({
params,
}: {
params: Promise<{ slug: string; lessonId: string }>;
}) {
const { slug, lessonId } = await params;
const course = await prisma.course.findUnique({
where: { slug },
include: {
sections: {
orderBy: { order: "asc" },
include: { lessons: { orderBy: { order: "asc" } } },
},
},
});
if (!course) notFound();
const currentLesson = course.sections
.flatMap((s) => s.lessons)
.find((l) => l.id === lessonId);
if (!currentLesson) notFound();
const user = await requireAuth({ redirect: false });
let isEnrolled = false;
let completedLessonIds = new Set<string>();
if (user) {
const enrollment = await prisma.enrollment.findUnique({
where: { userId_courseId: { userId: user.id, courseId: course.id } },
});
isEnrolled = !!enrollment;
if (isEnrolled) {
const progress = await prisma.progress.findMany({
where: { userId: user.id, completed: true, lesson: { section: { courseId: course.id } } },
select: { lessonId: true },
});
completedLessonIds = new Set(progress.map((p) => p.lessonId));
}
}
if (!currentLesson.isFree && !isEnrolled) {
redirect(`/courses/${slug}`);
}
const allLessons = course.sections.flatMap((s) => s.lessons);
const currentIndex = allLessons.findIndex((l) => l.id === lessonId);
const prevLesson = currentIndex > 0 ? allLessons[currentIndex - 1] : null;
const nextLesson = currentIndex < allLessons.length - 1 ? allLessons[currentIndex + 1] : null;
const totalLessons = allLessons.length;
const completedCount = allLessons.filter((l) => completedLessonIds.has(l.id)).length;
const progressPercent = totalLessons > 0 ? Math.round((completedCount / totalLessons) * 100) : 0;
return (
<div className="h-full flex flex-col lg:flex-row">
<div className="flex-1 flex flex-col min-w-0">
<div className="bg-black aspect-video w-full">
{currentLesson.muxPlaybackId && currentLesson.videoReady ? (
<VideoPlayer
playbackId={currentLesson.muxPlaybackId}
lessonId={currentLesson.id}
isEnrolled={isEnrolled}
/>
) : (
<div className="w-full h-full flex items-center justify-center text-[var(--color-text-secondary)]">
Video not available
</div>
)}
</div>
<div className="p-6">
<h1 className="text-xl font-semibold mb-4">{currentLesson.title}</h1>
<div className="flex items-center gap-3">
{prevLesson ? (
<Link
href={`/courses/${slug}/learn/${prevLesson.id}`}
className="flex items-center gap-1 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
>
<ChevronLeft className="w-4 h-4" /> Previous
</Link>
) : (
<span />
)}
{isEnrolled && (
<MarkCompleteButton
lessonId={currentLesson.id}
isCompleted={completedLessonIds.has(currentLesson.id)}
/>
)}
{nextLesson ? (
<Link
href={`/courses/${slug}/learn/${nextLesson.id}`}
className="flex items-center gap-1 text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] transition-colors ml-auto"
>
Next <ChevronRight className="w-4 h-4" />
</Link>
) : (
<span className="ml-auto text-sm text-[var(--color-success)]">Last lesson</span>
)}
</div>
</div>
</div>
<aside className="w-full lg:w-80 border-l border-[var(--color-border)] bg-[var(--color-surface)] overflow-y-auto">
<div className="p-5 border-b border-[var(--color-border)]">
<Link href={`/courses/${slug}`} className="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]">
← {course.title}
</Link>
{isEnrolled && (
<div className="mt-3">
<div className="flex justify-between text-xs text-[var(--color-text-secondary)] mb-1">
<span>Progress</span>
<span>{progressPercent}%</span>
</div>
<div className="h-1.5 bg-[var(--color-border)] rounded-full overflow-hidden">
<div
className="h-full bg-[var(--color-success)] rounded-full transition-all"
style={{ width: `${progressPercent}%` }}
/>
</div>
</div>
)}
</div>
{course.sections.map((section) => (
<div key={section.id}>
<div className="px-4 py-2.5 text-xs font-semibold text-[var(--color-text-secondary)] uppercase tracking-wide bg-[var(--color-surface-elevated)]">
{section.title}
</div>
{section.lessons.map((lesson) => (
<Link
key={lesson.id}
href={`/courses/${slug}/learn/${lesson.id}`}
className={`flex items-center gap-2 px-4 py-2.5 text-sm border-l-2 transition-colors ${
lesson.id === lessonId
? "border-[var(--color-accent)] bg-[var(--color-accent)]/10 text-[var(--color-text-primary)]"
: "border-transparent hover:bg-[var(--color-surface-elevated)]"
}`}
>
{completedLessonIds.has(lesson.id) ? (
<CheckCircle className="w-4 h-4 text-[var(--color-success)] flex-shrink-0" />
) : (
<Circle className="w-4 h-4 text-[var(--color-text-secondary)] flex-shrink-0" />
)}
<span className="flex-1 truncate">{lesson.title}</span>
{lesson.duration && (
<span className="text-xs text-[var(--color-text-secondary)]">{formatDuration(lesson.duration)}</span>
)}
</Link>
))}
</div>
))}
</aside>
</div>
);
}import { NextResponse } from "next/server";
import { requireAuth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
export async function POST(
_request: Request,
{ params }: { params: Promise<{ lessonId: string }> }
) {
const { lessonId } = await params;
const user = await requireAuth({ redirect: false });
if (!user)
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const lesson = await prisma.lesson.findUnique({
where: { id: lessonId },
include: { section: { include: { course: true } } },
});
if (!lesson)
return NextResponse.json({ error: "Lesson not found" }, { status: 404 });
const enrollment = await prisma.enrollment.findUnique({
where: {
userId_courseId: {
userId: user.id,
courseId: lesson.section.course.id,
},
},
});
if (!enrollment) {
return NextResponse.json({ error: "Not enrolled" }, { status: 403 });
}
const progress = await prisma.progress.upsert({
where: { userId_lessonId: { userId: user.id, lessonId } },
update: { completed: true, completedAt: new Date() },
create: {
userId: user.id,
lessonId,
completed: true,
completedAt: new Date(),
},
});
return NextResponse.json({ progress });
}"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { CheckCircle, Circle } from "lucide-react";
export function MarkCompleteButton({
lessonId,
isCompleted,
}: {
lessonId: string;
isCompleted: boolean;
}) {
const [completed, setCompleted] = useState(isCompleted);
const [loading, setLoading] = useState(false);
const router = useRouter();
async function handleClick() {
if (completed || loading) return;
setLoading(true);
try {
const res = await fetch(`/api/lessons/${lessonId}/progress`, {
method: "POST",
});
if (res.ok) {
setCompleted(true);
router.refresh();
}
} catch {
} finally {
setLoading(false);
}
}
if (completed) {
return (
<span className="flex items-center gap-1.5 text-sm text-[var(--color-success)]">
<CheckCircle className="w-4 h-4" /> Completed
</span>
);
}
return (
<button
onClick={handleClick}
disabled={loading}
className="flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-lg border border-[var(--color-border)] hover:border-[var(--color-accent)] transition-colors disabled:opacity-50"
>
<Circle className="w-4 h-4" />
{loading ? "Saving..." : "Mark as Complete"}
</button>
);
}import { redirect, notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { requireAuth } from "@/lib/auth";
export default async function LearnRedirectPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const user = await requireAuth();
if (!user) redirect("/sign-in");
const course = await prisma.course.findUnique({
where: { slug },
include: {
sections: {
orderBy: { order: "asc" },
include: { lessons: { orderBy: { order: "asc" } } },
},
},
});
if (!course) notFound();
const enrollment = await prisma.enrollment.findUnique({
where: { userId_courseId: { userId: user.id, courseId: course.id } },
});
if (!enrollment) redirect(`/courses/${slug}`);
const completedLessonIds = new Set(
(
await prisma.progress.findMany({
where: { userId: user.id, completed: true },
select: { lessonId: true },
})
).map((p) => p.lessonId)
);
const allLessons = course.sections.flatMap((s) => s.lessons);
const firstIncomplete = allLessons.find((l) => !completedLessonIds.has(l.id));
const target = firstIncomplete || allLessons[0];
if (!target) redirect(`/courses/${slug}`);
redirect(`/courses/${slug}/learn/${target.id}`);
}<div className="flex">
{Array.from({ length: 5 }).map((_, i) => (
<Star
key={i}
className={`w-3.5 h-3.5 ${
i < review.rating
? "fill-[var(--color-warning)] text-[var(--color-warning)]"
: "text-[var(--color-border)]"
}`}
/>
))}
</div>import Link from "next/link";
import { redirect } from "next/navigation";
import { requireAuth, getCreatorProfile } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { formatPrice } from "@/lib/utils";
import { PLATFORM_FEE_PERCENT } from "@/lib/constants";
import { Plus, BookOpen, Users, DollarSign } from "lucide-react";
import { DeleteCourseButton } from "@/components/delete-course-button";
export default async function TeachDashboardPage() {
const user = await requireAuth();
if (!user) redirect("/sign-in");
const profile = await getCreatorProfile(user.id);
if (!profile) redirect("/teach");
if (!profile.kycComplete) redirect("/teach");
const courses = await prisma.course.findMany({
where: { creatorId: profile.id },
include: {
_count: { select: { enrollments: true } },
},
orderBy: { createdAt: "desc" },
});
const totalStudents = courses.reduce((sum, c) => sum + c._count.enrollments, 0);
const totalEarnings = courses.reduce(
(sum, c) => sum + c.price * c._count.enrollments * ((100 - PLATFORM_FEE_PERCENT) / 100),
0
);
return (
<div className="max-w-6xl mx-auto px-8 py-10">
<div className="flex items-center justify-between mb-8">
<h1 className="text-3xl font-bold tracking-tight">Instructor Dashboard</h1>
<Link
href="/teach/courses/new"
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--color-accent)] text-white font-semibold hover:bg-[var(--color-accent-hover)] transition-colors"
>
<Plus className="w-4 h-4" /> New Course
</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
{[
{ icon: DollarSign, label: "Total Earnings", value: formatPrice(Math.round(totalEarnings)) },
{ icon: Users, label: "Total Students", value: String(totalStudents) },
{ icon: BookOpen, label: "Courses", value: String(courses.length) },
].map((stat) => (
<div key={stat.label} className="p-7 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)]">
<stat.icon className="w-5 h-5 text-[var(--color-accent)] mb-2" />
<p className="text-sm text-[var(--color-text-secondary)]">{stat.label}</p>
<p className="text-2xl font-bold">{stat.value}</p>
</div>
))}
</div>
<h2 className="text-xl font-semibold mb-4">Your Courses</h2>
{courses.length === 0 ? (
<p className="text-[var(--color-text-secondary)]">No courses yet. Create your first one!</p>
) : (
<div className="space-y-3">
{courses.map((course) => (
<div key={course.id} className="flex items-center justify-between p-4 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)]">
<div>
<h3 className="font-semibold">{course.title}</h3>
<div className="flex items-center gap-3 mt-1 text-sm text-[var(--color-text-secondary)]">
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
course.status === "PUBLISHED"
? "bg-[var(--color-success)]/15 text-[var(--color-success)]"
: "bg-[var(--color-warning)]/15 text-[var(--color-warning)]"
}`}>
{course.status}
</span>
<span>{course._count.enrollments} students</span>
<span>{formatPrice(course.price)}</span>
</div>
</div>
<div className="flex items-center gap-2">
<Link
href={`/teach/courses/${course.id}/edit`}
className="text-sm px-5 py-2.5 rounded-lg border border-[var(--color-border)] hover:bg-[var(--color-surface-elevated)] font-medium"
>
Edit
</Link>
<DeleteCourseButton courseId={course.id} courseTitle={course.title} />
</div>
</div>
))}
</div>
)}
</div>
);
}import Link from "next/link";
import { redirect } from "next/navigation";
import { requireAuth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { BookOpen } from "lucide-react";
export default async function StudentDashboardPage() {
const user = await requireAuth();
if (!user) redirect("/sign-in");
const enrollments = await prisma.enrollment.findMany({
where: { userId: user.id },
include: {
course: {
include: {
creator: { include: { user: true } },
sections: { include: { lessons: true } },
},
},
},
orderBy: { createdAt: "desc" },
});
const completedLessonIds = new Set(
(
await prisma.progress.findMany({
where: { userId: user.id, completed: true },
select: { lessonId: true },
})
).map((p) => p.lessonId)
);
const enriched = enrollments.map((e) => {
const totalLessons = e.course.sections.reduce(
(sum, s) => sum + s.lessons.length, 0
);
const completedCount = e.course.sections.reduce(
(sum, s) => sum + s.lessons.filter((l) => completedLessonIds.has(l.id)).length, 0
);
const percent = totalLessons > 0 ? Math.round((completedCount / totalLessons) * 100) : 0;
return { ...e, totalLessons, completedCount, percent };
});
return (
<div className="max-w-6xl mx-auto px-8 py-10">
<h1 className="text-3xl font-bold tracking-tight mb-10">My Learning</h1>
{enriched.length === 0 ? (
<div className="text-center py-16">
<BookOpen className="w-12 h-12 text-[var(--color-text-secondary)] mx-auto mb-4" />
<p className="text-[var(--color-text-secondary)] mb-4">You haven't enrolled in any courses yet.</p>
<Link href="/courses" className="px-8 py-3.5 rounded-lg bg-[var(--color-accent)] text-white font-semibold hover:bg-[var(--color-accent-hover)] transition-colors">
Browse Courses
</Link>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{enriched.map((e) => (
<Link
key={e.id}
href={`/courses/${e.course.slug}/learn`}
className="group rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] overflow-hidden hover:shadow-lg hover:shadow-black/20 hover:border-[var(--color-surface-elevated)]"
>
<div className="relative aspect-video bg-[var(--color-surface-elevated)]">
{e.course.thumbnailUrl && (
<img src={e.course.thumbnailUrl} alt={e.course.title} className="w-full h-full object-cover" />
)}
<div className="absolute bottom-0 left-0 right-0 h-1 bg-[var(--color-border)]">
<div className="h-full bg-[var(--color-success)] transition-all" style={{ width: `${e.percent}%` }} />
</div>
</div>
<div className="p-5">
<h3 className="font-semibold line-clamp-2 group-hover:text-[var(--color-accent)] transition-colors">{e.course.title}</h3>
<p className="text-sm text-[var(--color-text-secondary)] mt-1">{e.course.creator.user.name}</p>
<p className="text-xs text-[var(--color-text-secondary)] mt-2">
{e.percent === 100 ? (
<span className="text-[var(--color-success)]">Completed</span>
) : (
`${e.percent}% complete`
)}
</p>
</div>
</Link>
))}
</div>
)}
</div>
);
}import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { formatPrice } from "@/lib/utils";
import {
BookOpen, DollarSign, Users, GraduationCap, Star, ArrowRight,
Code, Briefcase, Palette, Megaphone, Camera, Music, Heart, Sparkles,
Database, Brain, Shield, Cloud, Smartphone, Gamepad2, TrendingUp,
Rocket, ClipboardList, Target, PenTool, Video, Clapperboard,
Building2, Wrench, FlaskConical, Calculator, Languages, CookingPot,
Dumbbell, Baby, School,
} from "lucide-react";
const CATEGORY_META: Record<string, { icon: typeof Code; label: string }> = {
DEVELOPMENT: { icon: Code, label: "Development" },
BUSINESS: { icon: Briefcase, label: "Business" },
DESIGN: { icon: Palette, label: "Design" },
MARKETING: { icon: Megaphone, label: "Marketing" },
PHOTOGRAPHY: { icon: Camera, label: "Photography" },
MUSIC: { icon: Music, label: "Music" },
HEALTH: { icon: Heart, label: "Health" },
LIFESTYLE: { icon: Sparkles, label: "Lifestyle" },
DATA_SCIENCE: { icon: Database, label: "Data Science" },
ARTIFICIAL_INTELLIGENCE: { icon: Brain, label: "Artificial Intelligence" },
CYBERSECURITY: { icon: Shield, label: "Cybersecurity" },
CLOUD_COMPUTING: { icon: Cloud, label: "Cloud Computing" },
MOBILE_DEVELOPMENT: { icon: Smartphone, label: "Mobile Development" },
GAME_DEVELOPMENT: { icon: Gamepad2, label: "Game Development" },
FINANCE: { icon: TrendingUp, label: "Finance" },
ENTREPRENEURSHIP: { icon: Rocket, label: "Entrepreneurship" },
PROJECT_MANAGEMENT: { icon: ClipboardList, label: "Project Management" },
PERSONAL_DEVELOPMENT: { icon: Target, label: "Personal Development" },
WRITING: { icon: PenTool, label: "Writing" },
VIDEO_PRODUCTION: { icon: Video, label: "Video Production" },
ANIMATION: { icon: Clapperboard, label: "Animation" },
ARCHITECTURE: { icon: Building2, label: "Architecture" },
ENGINEERING: { icon: Wrench, label: "Engineering" },
SCIENCE: { icon: FlaskConical, label: "Science" },
MATHEMATICS: { icon: Calculator, label: "Mathematics" },
LANGUAGE: { icon: Languages, label: "Language" },
COOKING: { icon: CookingPot, label: "Cooking" },
FITNESS: { icon: Dumbbell, label: "Fitness" },
PARENTING: { icon: Baby, label: "Parenting" },
TEACHING: { icon: School, label: "Teaching" },
};
export default async function HomePage() {
const [popularCourses, courseCount, studentCount, instructorCount] = await Promise.all([
prisma.course.findMany({
where: { status: "PUBLISHED" },
include: {
creator: { include: { user: true } },
_count: { select: { enrollments: true } },
reviews: { select: { rating: true } },
sections: { include: { _count: { select: { lessons: true } } } },
},
orderBy: { enrollments: { _count: "desc" } },
take: 6,
}),
prisma.course.count({ where: { status: "PUBLISHED" } }),
prisma.user.count(),
prisma.creatorProfile.count({ where: { kycComplete: true } }),
]);
// Get categories with course counts
const rawCounts = await prisma.course.groupBy({
by: ["category"],
where: { status: "PUBLISHED" },
_count: true,
});
const countMap = Object.fromEntries(rawCounts.map(({ category, _count }) => [category, _count]));
const allCategories = Object.keys(CATEGORY_META).map((cat) => ({
category: cat,
_count: countMap[cat] || 0,
}));
return (
<div className="min-h-full bg-[var(--color-background)]">
<main>
{/* Hero */}
<section className="max-w-6xl mx-auto px-8 py-24 md:py-32 text-center">
<h1 className="text-5xl md:text-7xl font-extrabold tracking-tight leading-[1.08] mb-8">
Learn from the best
<br />
<span className="text-[var(--color-accent)]">creators on the internet</span>
</h1>
<p className="text-lg md:text-xl text-[var(--color-text-secondary)] max-w-2xl mx-auto mb-12 leading-relaxed">
A marketplace where expert instructors share video courses and students pay to learn. The platform handles everything.
</p>
<div className="flex items-center justify-center gap-5 mb-16">
<Link
href="/courses"
className="px-8 py-3.5 rounded-lg bg-[var(--color-accent)] text-white font-semibold hover:bg-[var(--color-accent-hover)]"
>
Browse Courses
</Link>
<Link
href="/teach"
className="px-8 py-3.5 rounded-lg border border-[var(--color-border)] text-[var(--color-text-primary)] font-semibold hover:bg-[var(--color-surface)]"
>
Start Teaching
</Link>
</div>
{/* Social proof */}
<div className="flex items-center justify-center gap-8 md:gap-12 text-sm text-[var(--color-text-secondary)]">
<div>
<p className="text-2xl font-bold text-[var(--color-text-primary)]">{courseCount}+</p>
<p>Courses</p>
</div>
<div className="w-px h-8 bg-[var(--color-border)]" />
<div>
<p className="text-2xl font-bold text-[var(--color-text-primary)]">{studentCount}+</p>
<p>Students</p>
</div>
<div className="w-px h-8 bg-[var(--color-border)]" />
<div>
<p className="text-2xl font-bold text-[var(--color-text-primary)]">{instructorCount}+</p>
<p>Instructors</p>
</div>
</div>
</section>
{/* Popular courses */}
{popularCourses.length > 0 && (
<section className="max-w-6xl mx-auto px-8 py-16">
<div className="flex items-center justify-between mb-8">
<h2 className="text-2xl font-bold tracking-tight">Popular Courses</h2>
<Link
href="/courses"
className="flex items-center gap-1.5 text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)]"
>
View all <ArrowRight className="w-4 h-4" />
</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{popularCourses.map((course) => {
const avgRating = course.reviews.length > 0
? course.reviews.reduce((s, r) => s + r.rating, 0) / course.reviews.length
: 0;
const lessonCount = course.sections.reduce((s, sec) => s + sec._count.lessons, 0);
return (
<Link
key={course.id}
href={`/courses/${course.slug}`}
className="group rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] overflow-hidden hover:shadow-lg hover:shadow-black/20 hover:border-[var(--color-surface-elevated)]"
>
<div className="relative aspect-video bg-[var(--color-surface-elevated)]">
{course.thumbnailUrl && (
<img src={course.thumbnailUrl} alt={course.title} className="w-full h-full object-cover" />
)}
<span className="absolute top-3 right-3 px-3 py-1.5 rounded-lg text-xs font-semibold bg-black/70 text-white backdrop-blur-sm">
{formatPrice(course.price)}
</span>
</div>
<div className="p-5">
<h3 className="font-semibold text-[15px] leading-snug line-clamp-2 mb-2 group-hover:text-[var(--color-accent)]">
{course.title}
</h3>
<p className="text-sm text-[var(--color-text-secondary)] mb-3">
{course.creator.user.name || "Instructor"}
</p>
<div className="flex items-center gap-3 text-xs text-[var(--color-text-secondary)]">
{avgRating > 0 && (
<span className="flex items-center gap-1">
<Star className="w-3.5 h-3.5 fill-[var(--color-warning)] text-[var(--color-warning)]" />
{avgRating.toFixed(1)}
</span>
)}
<span className="flex items-center gap-1">
<Users className="w-3.5 h-3.5" />
{course._count.enrollments}
</span>
<span>{lessonCount} lessons</span>
</div>
</div>
</Link>
);
})}
</div>
</section>
)}
{/* Categories */}
{allCategories.length > 0 && (
<section className="max-w-6xl mx-auto px-8 py-16">
<h2 className="text-2xl font-bold tracking-tight mb-8">Browse by Category</h2>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
{allCategories.map(({ category, _count }) => {
const meta = CATEGORY_META[category] || { icon: BookOpen, label: category };
const Icon = meta.icon;
return (
<Link
key={category}
href={`/courses?category=${category}`}
className="group p-5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] hover:bg-[var(--color-surface-elevated)] hover:border-[var(--color-accent)]/30"
>
<div className="w-10 h-10 rounded-lg bg-[var(--color-accent)]/10 flex items-center justify-center mb-3 group-hover:bg-[var(--color-accent)]/20">
<Icon className="w-5 h-5 text-[var(--color-accent)]" />
</div>
<p className="font-medium text-sm">{meta.label}</p>
<p className="text-xs text-[var(--color-text-secondary)] mt-1">{_count} courses</p>
</Link>
);
})}
</div>
</section>
)}
{/* Features */}
<section className="max-w-6xl mx-auto px-8 py-16 border-t border-[var(--color-border)]">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-10">
{[
{ icon: BookOpen, title: "Expert Courses", desc: "Structured video lessons from industry professionals" },
{ icon: DollarSign, title: "Fair Revenue", desc: "Instructors keep 80% of every sale" },
{ icon: Users, title: "Growing Community", desc: "Join thousands of students and instructors" },
{ icon: GraduationCap, title: "Track Progress", desc: "Pick up where you left off, every time" },
].map((item) => (
<div key={item.title} className="text-center">
<item.icon className="w-6 h-6 text-[var(--color-accent)] mx-auto mb-3" />
<h3 className="font-semibold text-sm mb-1">{item.title}</h3>
<p className="text-xs text-[var(--color-text-secondary)] leading-relaxed">{item.desc}</p>
</div>
))}
</div>
</section>
{/* Instructor CTA */}
<section className="max-w-6xl mx-auto px-8 py-16">
<div className="rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] p-10 md:p-16 text-center">
<h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
Share your expertise with the world
</h2>
<p className="text-[var(--color-text-secondary)] max-w-xl mx-auto mb-8 leading-relaxed">
Create video courses, set your own price, and earn money from every student enrollment. We handle payments, hosting, and payouts — you focus on teaching.
</p>
<div className="flex items-center justify-center gap-6 text-sm text-[var(--color-text-secondary)] mb-8">
<span>80% revenue share</span>
<span className="w-1 h-1 rounded-full bg-[var(--color-border)]" />
<span>No upfront costs</span>
</div>
<Link
href="/teach"
className="inline-flex items-center gap-2 px-8 py-3.5 rounded-lg bg-[var(--color-accent)] text-white font-semibold hover:bg-[var(--color-accent-hover)]"
>
Become an Instructor <ArrowRight className="w-4 h-4" />
</Link>
</div>
</section>
</main>
<footer className="border-t border-[var(--color-border)] mt-8">
<div className="max-w-6xl mx-auto px-8 py-10 text-center text-sm text-[var(--color-text-secondary)]">
© {new Date().getFullYear()} Courstar. All rights reserved.
</div>
</footer>
</div>
);
}DATABASE_URL="your-production-unpooled-url" npx prisma migrate deploy