Fermi E-Learning Platform (Prototype)

Fermi is a full-stack e-learning platform built with Next.js 15, Sanity Studio (embedded), Clerk authentication, and Stripe payments. It supports student course consumption, creator/admin content management, enrollment and lesson progress tracking, and real-time analytics/monitoring.

Authors: Sadia Afrin Purba & Asif Imtiyaz Chowdhury
Email: purba0101@gmail.com & asif.imch@gmail.com

Co-Authorship: This software is co-authored by both partners, ensuring equal rights and privileges for both authors.

Features (high level)

• Student experience: Browse courses, view detailed outlines, enroll, watch lessons, and track completion progress.
• Creator/admin experience: Embedded Sanity Studio at /studio plus an asset manager at /studio/asset-manager.
• Content model: Courses, categories, modules, lessons, instructors, students, enrollments, lesson completion, and monitoring entities.
• Payments: Stripe checkout session creation and webhook handling for enrollment flow.
• Observability: Monitoring APIs, analytics dashboards, health checks, and Prometheus-compatible metrics endpoints.
• Modern stack: Next.js App Router, React 19, TypeScript, Tailwind CSS 4, Radix UI, shadcn/ui, Jest, ESLint, Prettier.

Screenshot gallery

Browse the UI quickly below. Click any thumbnail to open the full-size image.

Screen 01	Screen 02	Screen 03

Screen 04	Screen 05	Screen 06

Screen 07	Screen 08	Screen 09

Screen 10	Screen 11	Screen 12

Screen 13	Screen 14	Screen 15

Screen 16

Repository layout

Path	Role
src/app/	Next.js App Router pages, layouts, route handlers
src/app/(user)/	Public user-facing pages (/, course pages, search, about, contact, etc.)
src/app/(dashboard)/	Authenticated course dashboard and analytics
src/app/(admin)/studio/	Embedded Sanity Studio and asset manager
src/app/api/	API routes (Stripe, health/metrics, monitoring, analytics, files, draft-mode)
src/actions/	Server actions for enrollments and lesson completion
src/sanity/	Sanity schema types, structure, client/env utilities
src/components/	UI components and feature modules
src/__tests__/	Jest tests
scripts/	Utility scripts for migration, purge, deployment, rollback
monitoring/	Prometheus config and Grafana dashboard JSON

Core routes and modules

User-facing routes

• / homepage with course listing.
• /courses/[slug] course detail and enrollment entry.
• /my-courses enrolled courses view.
• /search, /about, /contact, /privacy-policy.

Dashboard/admin routes

• /dashboard/courses/[courseId] learning dashboard.
• /dashboard/courses/[courseId]/lessons/[lessonId] lesson experience.
• /dashboard/analytics analytics dashboard.
• /studio/[[...tool]] embedded Sanity Studio.
• /studio/asset-manager media/file management.

API surface (selected)

• Payments: /api/stripe/webhook
• Monitoring/analytics: /api/monitoring/*, /api/analytics/*
• Platform health: /api/health, /api/metrics
• Preview/draft mode: /api/draft-mode/enable, /api/draft-mode/disable
• Asset/file delivery: /api/files/[assetId]

Prerequisites

• Node.js 22+ and npm
• Sanity project + dataset
• Clerk application
• Stripe account (for paid enrollment flow)
• Docker + Docker Compose (optional, for containerized local/dev/staging/prod)

Environment setup

Copy and configure environment values:

cp env.example .env.local
cp env.example .env

Required variables

# App
NODE_ENV=development
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# Sanity
NEXT_PUBLIC_SANITY_PROJECT_ID=...
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_TOKEN=...
SANITY_API_ADMIN_TOKEN=...

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=...
STRIPE_SECRET_KEY=...
STRIPE_WEBHOOK_SECRET=...

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=...
CLERK_SECRET_KEY=...

Local development

Install dependencies and run the app:

npm install
npm run dev

Then open:

• App: http://localhost:3000
• Studio: http://localhost:3000/studio
• Asset Manager: http://localhost:3000/studio/asset-manager

Sanity type generation

Run after schema changes:

npm run typegen

Quality checks and tests

npm run lint
npm run type-check
npm run test
npm run test:coverage
npm run format:check

Build and production run

npm run build
npm start

Docker workflows

Development (with Prometheus + Grafana)

npm run docker:dev

Services:

• Next.js: http://localhost:3000
• Sanity: http://localhost:3333
• Prometheus: http://localhost:9090
• Grafana: http://localhost:3001

Staging/production compose flows

npm run docker:staging
npm run docker:production

Deployment/rollback helpers

npm run deploy:staging <tag>
npm run deploy:production <tag>
npm run rollback:staging <tag>
npm run rollback:production <tag>

Monitoring and observability

• Monitoring test page: /test-monitoring
• Health endpoint: /api/health
• Metrics endpoint: /api/metrics
• Additional monitoring endpoints: /api/monitoring/*

For deeper setup and operations:

• MONITORING_README.md
• CI_CD_SETUP.md
• DEVELOPMENT_TOOLS.md

Data model overview

• Course: title, description, price, image, modules, instructor, category
• Module: ordered group of lessons
• Lesson: content, video/media/files, completion state
• Enrollment: student-to-course link and progress tracking
• Student/Instructor: profile and relationship metadata
• Analytics entities: page views, user events, system and performance metrics, error logs

License

See LICENSE.