LMS (learning platform) on React Router v8, MySQL 8 and Clerk

import { drizzle } from "drizzle-orm/mysql2";
import mysql from "mysql2/promise";

// ponytail: single module-level pool; the runtime + mysql2's pool handle concurrency,
// so no globalThis singleton dance needed.
const pool = mysql.createPool(process.env.DATABASE_URL!);

export const db = drizzle({ client: pool });

// ponytail: Clerk is hosted — set the publishable + secret keys in the env
// (React Router reads VITE_CLERK_PUBLISHABLE_KEY client-side; CLERK_SECRET_KEY
// server-side). ClerkProvider + rootAuthLoader pick them up automatically.

// Root route for React Router v8 (framework mode). <ClerkProvider> makes
// Clerk's hooks/components available client-side; rootAuthLoader hydrates the auth
// state from the request on the server; clerkMiddleware attaches the Auth object to
// the request context so protected loaders can gate via getAuth() — the RR7 analog
// of Next's clerkMiddleware proxy + auth.protect().
import { ClerkProvider } from "@clerk/react-router";
import { clerkMiddleware, rootAuthLoader } from "@clerk/react-router/server";
import type { LoaderFunctionArgs } from "react-router";
import { Outlet, useLoaderData } from "react-router";

// RR7 route middleware: runs on every request and populates Clerk's auth context.
// Protected routes call getAuth(args) in their loader and redirect signed-out users —
// equivalent gating to the Next branch's isProtectedRoute + auth.protect().
export const middleware = [clerkMiddleware()];

export async function loader(args: LoaderFunctionArgs) {
  return rootAuthLoader(args);
}

export default function Root() {
  const loaderData = useLoaderData<typeof loader>();
  return (
    <ClerkProvider loaderData={loaderData}>
      <Outlet />
    </ClerkProvider>
  );
}

// === file: app/db/schema.ts ===
import { relations, sql } from "drizzle-orm";
import {
  check,
  index,
  int,
  mysqlTable,
  text,
  timestamp,
  unique,
  varchar,
} from "drizzle-orm/mysql-core";
// Better Auth owns identity; we only reference its `user` table by id.
import { user } from "./auth-schema";

export type CourseStatus = "draft" | "published" | "archived";
export type LessonContentType = "video" | "text" | "quiz";
export type ProgressStatus = "not_started" | "in_progress" | "completed";

/** Catalog root. Each course has one instructor (a Better Auth user). */
export const courses = mysqlTable(
  "courses",
  {
    id: varchar("id", { length: 36 }).primaryKey(),
    slug: varchar("slug", { length: 255 }).notNull().unique(),
    title: text("title").notNull(),
    // Better Auth's user.id is text — match it as varchar(255).
    instructorId: varchar("instructor_id", { length: 255 })
      .notNull()
      .references(() => user.id, { onDelete: "cascade" }),
    status: varchar("status", { length: 32 })
      .$type<CourseStatus>()
      .notNull()
      .default("draft"),
    createdAt: timestamp("created_at").notNull().defaultNow(),
  },
  (t) => [
    index("idx_course_slug").on(t.slug),
    index("idx_course_instructor").on(t.instructorId),
    check(
      "courses_status_check",
      sql`${t.status} in ('draft','published','archived')`,
    ),
  ],
);

/** Ordered sections within a course. position drives curriculum order. */
export const modules = mysqlTable(
  "modules",
  {
    id: varchar("id", { length: 36 }).primaryKey(),
    courseId: varchar("course_id", { length: 36 })
      .notNull()
      .references(() => courses.id, { onDelete: "cascade" }),
    title: text("title").notNull(),
    position: int("position").notNull().default(0),
    createdAt: timestamp("created_at").notNull().defaultNow(),
  },
  (t) => [index("idx_module_course").on(t.courseId, t.position)],
);

/** Leaf content unit. contentType selects how the lesson renders/plays. */
export const lessons = mysqlTable(
  "lessons",
  {
    id: varchar("id", { length: 36 }).primaryKey(),
    moduleId: varchar("module_id", { length: 36 })
      .notNull()
      .references(() => modules.id, { onDelete: "cascade" }),
    title: text("title").notNull(),
    position: int("position").notNull().default(0),
    contentType: varchar("content_type", { length: 32 })
      .$type<LessonContentType>()
      .notNull()
      .default("text"),
    createdAt: timestamp("created_at").notNull().defaultNow(),
  },
  (t) => [
    index("idx_lesson_module").on(t.moduleId, t.position),
    check(
      "lessons_content_type_check",
      sql`${t.contentType} in ('video','text','quiz')`,
    ),
  ],
);

/** course <-> student join. The composite unique is the enrollment identity. */
export const enrollments = mysqlTable(
  "enrollments",
  {
    id: varchar("id", { length: 36 }).primaryKey(),
    courseId: varchar("course_id", { length: 36 })
      .notNull()
      .references(() => courses.id, { onDelete: "cascade" }),
    studentId: varchar("student_id", { length: 255 })
      .notNull()
      .references(() => user.id, { onDelete: "cascade" }),
    enrolledAt: timestamp("enrolled_at").notNull().defaultNow(),
  },
  (t) => [
    unique("enrollments_course_student_unique").on(t.courseId, t.studentId),
    // Drives the learner's "my courses" list.
    index("idx_enrollment_student").on(t.studentId),
  ],
);

/** Per-lesson learner state. The composite unique is one row per student+lesson. */
export const lessonProgress = mysqlTable(
  "lesson_progress",
  {
    id: varchar("id", { length: 36 }).primaryKey(),
    lessonId: varchar("lesson_id", { length: 36 })
      .notNull()
      .references(() => lessons.id, { onDelete: "cascade" }),
    studentId: varchar("student_id", { length: 255 })
      .notNull()
      .references(() => user.id, { onDelete: "cascade" }),
    status: varchar("status", { length: 32 })
      .$type<ProgressStatus>()
      .notNull()
      .default("not_started"),
    completedAt: timestamp("completed_at"),
  },
  (t) => [
    unique("lesson_progress_student_lesson_unique").on(
      t.studentId,
      t.lessonId,
    ),
    // Drives the per-learner progress lookup (student + lesson).
    index("idx_progress_student_lesson").on(t.studentId, t.lessonId),
    check(
      "lesson_progress_status_check",
      sql`${t.status} in ('not_started','in_progress','completed')`,
    ),
  ],
);

export const coursesRelations = relations(courses, ({ one, many }) => ({
  instructor: one(user, {
    fields: [courses.instructorId],
    references: [user.id],
  }),
  modules: many(modules),
  enrollments: many(enrollments),
}));

export const modulesRelations = relations(modules, ({ one, many }) => ({
  course: one(courses, {
    fields: [modules.courseId],
    references: [courses.id],
  }),
  lessons: many(lessons),
}));

export const lessonsRelations = relations(lessons, ({ one, many }) => ({
  module: one(modules, {
    fields: [lessons.moduleId],
    references: [modules.id],
  }),
  progress: many(lessonProgress),
}));

export const enrollmentsRelations = relations(enrollments, ({ one }) => ({
  course: one(courses, {
    fields: [enrollments.courseId],
    references: [courses.id],
  }),
  student: one(user, {
    fields: [enrollments.studentId],
    references: [user.id],
  }),
}));

export const lessonProgressRelations = relations(lessonProgress, ({ one }) => ({
  lesson: one(lessons, {
    fields: [lessonProgress.lessonId],
    references: [lessons.id],
  }),
  student: one(user, {
    fields: [lessonProgress.studentId],
    references: [user.id],
  }),
}));

// === file: app/db/auth-schema.ts ===
import { mysqlTable, text, timestamp, varchar } from "drizzle-orm/mysql-core";

// Local mirror of Clerk identity — the FK target app-type schemas reference as user.
// id = Clerk's user id (varchar(255), matching the app-type user_id FKs), so existing
// user_id foreign keys resolve once the sync runs. This IS the auth-schema slot for Clerk cells.
export const user = mysqlTable("user", {
  id: varchar("id", { length: 255 }).primaryKey(), // = Clerk user id
  email: text("email"),
  firstName: text("first_name"),
  lastName: text("last_name"),
  imageUrl: text("image_url"),
  updatedAt: timestamp("updated_at"), // staleness key (Clerk updated_at)
  createdAt: timestamp("created_at").notNull().defaultNow(),
});

import { and, eq, isNull, lt, or } from "drizzle-orm";
import { user } from "@/db/auth-schema";

export type ClerkUserEvent = {
  type: string;
  data: {
    id: string;
    email_addresses?: { email_address: string }[];
    first_name?: string | null;
    last_name?: string | null;
    image_url?: string | null;
    updated_at?: number;
  };
};

// Idempotent + concurrency-safe sync of a Clerk user into the local user table (MySQL).
// Keyed on id (= Clerk id, the PK); the staleness guard lives in the UPDATE WHERE. MySQL has no
// RETURNING — affectedRows tells us what happened. The insert path catches the unique-key race (a
// concurrent delivery of the same NEW user) as an idempotent no-op, rethrowing every other error.
// user.deleted removes the row.
export async function recordClerkEvent(
  // ponytail: loosely typed Drizzle client so the emitted core stays portable.
  db: any,
  event: ClerkUserEvent,
): Promise<{ changed: boolean }> {
  const d = event.data;
  if (event.type === "user.deleted") {
    const deleted = await db.delete(user).where(eq(user.id, d.id));
    return { changed: deleted[0].affectedRows > 0 };
  }

  const email = d.email_addresses?.[0]?.email_address ?? null;
  const eventAt = new Date(d.updated_at ?? 0);
  const fields = {
    email,
    firstName: d.first_name ?? null,
    lastName: d.last_name ?? null,
    imageUrl: d.image_url ?? null,
    updatedAt: eventAt,
  };

  const updated = await db
    .update(user)
    .set(fields)
    .where(and(eq(user.id, d.id), or(isNull(user.updatedAt), lt(user.updatedAt, eventAt))));
  if (updated[0].affectedRows > 0) return { changed: true };

  const [existing] = await db.select({ id: user.id }).from(user).where(eq(user.id, d.id)).limit(1);
  if (existing) return { changed: false };

  // The row doesn't exist yet — insert it. A concurrent delivery of the SAME new user can win the
  // race between our SELECT and this INSERT; the PK then rejects ours (ER_DUP_ENTRY) — an idempotent
  // no-op, NOT a change. Any other error is real: rethrow so the webhook fails loud and Clerk retries.
  try {
    await db.insert(user).values({ id: d.id, ...fields });
    return { changed: true };
  } catch (err: any) {
    if ((err?.cause?.code ?? err?.code) === "ER_DUP_ENTRY") return { changed: false };
    throw err;
  }
}

// Clerk identity webhook for React Router v8 (framework mode). A resource
// route (no default component) — React Router invokes `action` for the POST. Clerk
// webhooks are svix: verify the signature, then hand the event to recordClerkEvent.
import type { ActionFunctionArgs } from "react-router";
import { Webhook } from "svix";
import { db } from "@/lib/db";
import { recordClerkEvent, type ClerkUserEvent } from "@/lib/identity/record";

const USER_EVENTS = new Set(["user.created", "user.updated", "user.deleted"]);

export async function action({ request }: ActionFunctionArgs) {
  const secret = process.env.CLERK_WEBHOOK_SECRET;
  if (!secret) return Response.json({ error: "Server misconfigured" }, { status: 500 });

  const raw = await request.text();
  const headers = Object.fromEntries(request.headers.entries());

  let event: ClerkUserEvent;
  try {
    event = new Webhook(secret).verify(raw, headers) as ClerkUserEvent;
  } catch {
    return Response.json({ error: "Invalid signature" }, { status: 403 });
  }

  if (USER_EVENTS.has(event.type)) await recordClerkEvent(db, event);
  return Response.json({ ok: true });
}

import { drizzle } from "drizzle-orm/mysql2";
import mysql from "mysql2/promise";

// Serverless: a small pool per short-lived instance — many instances × a big pool exhausts MySQL.
export const pool = mysql.createPool({ uri: process.env.DATABASE_URL!, connectionLimit: 2 });
export const db = drizzle({ client: pool });

import { drizzle } from "drizzle-orm/mysql2";
import mysql from "mysql2/promise";

// Long-running process: a real, reused pool (mysql2 manages idle recycling).
export const pool = mysql.createPool({ uri: process.env.DATABASE_URL!, connectionLimit: 10 });
export const db = drizzle({ client: pool });

import { drizzle } from "drizzle-orm/planetscale-serverless";
import { Client } from "@planetscale/database";

// Edge/Workers have NO TCP sockets, so mysql2 cannot run here. PlanetScale's HTTP driver
// speaks MySQL over fetch — the client that works on Workers (the MySQL analog of Neon's HTTP driver).
const client = new Client({ url: process.env.DATABASE_URL! });
export const db = drizzle({ client });