Back to portfolio
E-Learning Platform logoLearning product

E-Learning Platform

Next.js course marketplace and learning platform with marketplace, student, instructor, studio, and admin workflows.

Next.jsReactTypeScriptEducationAdmin

The e-learning platform uses the Next.js implementation, not the earlier Vite prototype. It presents a complete learning product around HadiLearn: public marketplace, course catalog, category and instructor discovery, wishlist/cart/checkout, student learning, course player, lesson completion, instructor course management, curriculum authoring, creator studio content, admin moderation, order/review governance, analytics scaffolds, and mock role-based access.

The presentation focuses on the product architecture and main workflows instead of showing every captured screen. The written sections below map to the documented App Router route groups: marketplace, student, instructor, studio, admin, and auth.

The live demo runs as a real Next.js app behind the portfolio demo URL, so routes, metadata, branded assets, and app behavior stay aligned with the source application rather than a copied static bundle.

Presentation

Mockups

HadiLearn student course discovery mockup
HadiLearn student dark marketplace mockup
HadiTeach instructor dashboard mockup
HadiTeach instructor curriculum studio mockup
HadiControl admin overview mockup
HadiControl admin analytics mockup
HadiControl admin management mockup
HadiControl admin dark operations mockup
Details

App presentation

Next.js Learning Platform

Marketplace, student, instructor, studio, and admin workflows from the Next.js app.

A full Next.js App Router e-learning product built around the HadiLearn brand. It covers public marketplace discovery, commerce intent, fake checkout/enrollment, student dashboards, course and lesson players, certificate eligibility, student settings, instructor dashboards, course forms, curriculum mutation flows, quiz planning, creator studio pages, articles, reels, collaborators, admin dashboards, user/course/category/order/review moderation, analytics scaffolds, mock login/registration, role switching, protected access helpers, and branded feedback pages.

  • Public marketplace routes cover homepage, searchable course catalog, course details, category directory, category landing pages, instructor directory, and instructor profiles.
  • Commerce state includes local wishlist, local cart, student-only fake checkout, checkout success, and cookie-backed fake enrollment.
  • Student routes cover dashboard, my learning, certificates, settings, course player, lesson player, and mock completion progress.
  • Instructor routes cover dashboard, course list, validated new/edit course forms, curriculum builder, quiz planner, and course analytics.
  • Studio routes cover creator dashboard, reels, articles, article draft form, and collaborator management.
  • Admin routes cover dashboard, users, course moderation, categories, orders/payments, reviews, and analytics.
  • Auth and access infrastructure includes mock login, registration, role switching, role-aware navigation filtering, `requireRoles`, unauthorized fallback, loading, error, and not-found routes.
  • The demo keeps the correct HadiLearn logo, page metadata, and base-path-aware links while being opened from the portfolio URL.

Marketplace

  • Marketplace shell powers the public homepage, `/courses`, `/courses/[slug]`, `/categories`, `/categories/[slug]`, `/instructors`, and `/instructors/[instructorId]`.
  • Course catalog supports search, category filters, level filters, published-course lookup, and slug normalization through the commerce/marketplace service layer.
  • Course detail pages include syllabus context, wishlist actions, cart actions, pricing/enrollment entry, and instructor context.
  • Instructor directory and instructor profile routes present expertise tags, catalog metrics, teaching snapshot, bio, and linked published courses.
  • Local wishlist and cart pages let public visitors collect courses before checkout without requiring a production backend.

Learner Experience

  • Student-only checkout and checkout-success routes create fake enrollments through server actions and short-lived cookies.
  • Student dashboard summarizes learning progress, enrolled courses, and next learning actions.
  • `/student/my-learning` lists enrolled courses from fake enrollment state.
  • `/learn/[courseSlug]` provides a course player shell for enrolled courses.
  • `/learn/[courseSlug]/lessons/[lessonId]` provides lesson playback with module navigation and cookie-backed completion actions.
  • Certificates route scaffolds eligibility behavior and settings include local mock learning data reset.

Instructor And Studio

  • Instructor dashboard reads studio course data and presents teaching performance, course status, and operational summaries.
  • Course management includes course list, validated new-course Server Action, validated edit Server Action, and Zod-backed form rules.
  • Curriculum builder supports mock lesson add, edit, delete, move, readiness, resource, quiz-planning, markdown, and image URL planning fields.
  • Quiz planner route summarizes lesson quiz prompts for a course.
  • Course analytics route scaffolds instructor-facing analytics for individual courses.
  • Studio area includes `/studio`, `/reels`, `/articles`, `/articles/new`, and `/collaborators` for creator content and collaboration workflows.

Admin Operations

  • Admin dashboard and `/admin/dashboard` provide platform overview entry points.
  • User management scaffold covers platform user governance.
  • Course moderation supports approve, request changes, and reject actions.
  • Category management scaffold supports marketplace taxonomy operations.
  • Fake order ledger supports refund and paid-status actions.
  • Review moderation supports publish, flag, and hide actions, with analytics routes for platform-level reporting.

Technical Notes

  • Next.js App Router uses route groups for marketing, student, instructor, studio, admin, and auth surfaces.
  • Route-group layouts include metadata templates and shared shell boundaries.
  • Server presenters, services, repositories, typed models, shared UI primitives, role-aware navigation, and `requireRoles` keep the app backend-ready.
  • Tests cover auth permissions, protected helpers, navigation filtering, studio presenters, access fallback UI, role switcher UI, shared UI, commerce, learning, and instructor services.
  • Runs as a real Next.js app behind the portfolio rewrite instead of being flattened into static files.
  • Base-path-aware metadata, icons, and internal links keep the URL and logo correct inside the portfolio demo.