LBYE LMS

LBYE - Learn Before You Earn

LBYE LMS is a Learning Management System frontend built with Next.js. It lets students browse and enroll in courses, watch course sections, and track completion progress. Teachers can create, update, and delete courses with image and video content.

Live Demo

Live Site: https://lms-poc-eta.vercel.app

Features

For Students

• Browse the public course catalog
• Create an account and sign in as a student
• Enroll in available courses
• View enrolled courses from the My Courses page
• Watch course section videos
• Mark sections as complete and track course progress
• Unenroll from courses
• Share course links through the browser share API

For Teachers

• Create an account and sign in as a teacher
• Access teacher-only course management routes
• Create courses with a title, description, cover image, and one or more sections
• Add section descriptions and videos
• Upload course images and videos through ImageKit, or provide direct media URLs
• Edit existing courses
• Delete courses authored by the signed-in teacher
• View authored courses from the My Courses page

General Features

• Public course browsing and public course preview pages
• Protected dashboard, course details, and user course pages
• Role-based navigation and authorization for teacher and student users
• Credentials authentication with NextAuth.js
• JWT session strategy with access token refresh support
• Sign-up, sign-in, sign-out, and backend sign-out integration
• Local API proxy routes for courses, enrollments, progress, sign-up, and upload auth
• Dark and light theme support with the preference stored in localStorage
• Responsive Material UI interface
• Server-rendered pages using the Next.js App Router
• Loading states for main route groups
• Form validation with React Hook Form and Yup

Tech Stack

• Framework: Next.js 15 with App Router
• Runtime UI: React 19
• Language: TypeScript
• UI Library: Material UI and MUI Icons
• Styling: Emotion
• Authentication: NextAuth.js credentials provider
• Forms and Validation: React Hook Form and Yup
• Media Uploads: ImageKit
• Font: Geist
• Linting: ESLint with the Next.js config

Prerequisites

• Node.js 18 or newer
• npm, yarn, pnpm, or bun
• A running backend API that matches the routes used in src/constants/index.ts
• Environment variables configured as shown below
• ImageKit credentials if you want to use file uploads

Getting Started

Installation

1. Clone the repository:

git clone https://github.com/AbhijeetKumarGupta/learning-management-system-frontend.git
cd learning-management-system-frontend

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Environment Variables

Create a .env.local file in the root directory with the following variables:

# Application URL used by internal server requests and shared course links
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Backend API base URL used by the local API proxy routes
NEXT_PUBLIC_API_URL=http://localhost:8000

# NextAuth configuration
NEXTAUTH_SECRET=your-nextauth-secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SESSION_MAX_AGE_IN_DAYS=30

# ImageKit configuration
NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY=your-imagekit-public-key
IMAGEKIT_PRIVATE_KEY=your-imagekit-private-key
NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your-imagekit-id

NEXTAUTH_SESSION_MAX_AGE_IN_DAYS is optional. If it is not set, the app uses 30 days.

Running the Development Server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser to see the application.

Project Structure

src/
├── app/                    # Next.js App Router pages and API routes
│   ├── (public)/           # Public routes for home, auth, and public course pages
│   ├── (protected)/        # Authenticated routes for dashboard, courses, and course details
│   │   └── (teacher)/      # Teacher-only course management routes
│   └── api/                # Frontend API proxy routes
├── components/             # React components
│   ├── atom/               # Small reusable controls
│   ├── molecule/           # Course cards, drawer, upload, video, and menu components
│   └── organism/           # Forms, layout, providers, top bar, and page-level sections
├── constants/              # Route, role, API, file type, and theme constants
├── context/                # React context providers
├── hooks/                  # Custom React hooks
├── libs/                   # API helpers, auth helpers, services, types, utils, and validation
└── theme/                  # Material UI theme configuration

Main Routes

Route	Access	Purpose
/	Public	Course catalog
/course/[courseId]	Public	Public course preview
/auth/sign-in	Public	Sign in
/auth/sign-up	Public	Create a student or teacher account
/dashboard	Authenticated	Main authenticated course catalog
/my-courses	Authenticated	Enrolled courses for students and authored courses for teachers
/course-details/[courseId]	Authenticated	Full course details, videos, and progress actions
/manage-course	Teacher only	Create a course
/manage-course/[courseId]	Teacher only	Edit a course

Authentication and Authorization

The app uses NextAuth.js with a credentials provider. Sign-in requests are sent to the backend API, and successful responses are stored in a JWT session with the user id, role, access token, refresh token, and access token expiry.

When an access token is close to expiry, the app uses the refresh token endpoint to renew the session. If refresh fails, protected routes redirect the user back to sign in.

Authorization is handled in two places:

• Middleware protects dashboard, my courses, course details, and course management routes.
• The teacher route layout redirects non-teacher users away from course management pages.

API Proxy Routes

The frontend exposes local API routes under /api and forwards requests to the backend configured through NEXT_PUBLIC_API_URL.

Local route	Backend purpose
/api/auth/sign-up	Create a user
/api/auth/[...nextauth]	NextAuth sign-in, session, and sign-out handling
/api/auth/upload	Generate ImageKit upload authentication params
/api/course	List and create courses
/api/course/[courseId]	Get, update, and delete a course
/api/course/progress	Get and update section completion progress
/api/enrollments	Create an enrollment
/api/enrollments/[id]	Delete an enrollment
/api/enrollments/user/[userId]	List enrollments for a user

Course Data

A course contains:

• title
• image
• description
• teacherId
• sections

Each section contains:

• title
• description
• videoUrl

The course form requires a valid image URL and at least one section with a valid video URL. Uploads through ImageKit write the uploaded media URL into those same fields.

Theming

The application supports dark and light themes through Material UI:

• Theme preference is stored in localStorage under theme-config
• The top bar includes a theme switch
• Theme values are defined in src/constants/theme.ts
• Material UI theme options are defined in src/theme/index.ts

Building for Production

npm run build
npm start

Deployment

The easiest way to deploy this Next.js application is using Vercel:

1. Push your code to GitHub.
2. Import the repository in Vercel.
3. Configure the environment variables listed above.
4. Deploy the project.

Make sure the deployed NEXT_PUBLIC_APP_URL, NEXTAUTH_URL, backend API URL, and ImageKit settings match the production environment.

For more details, see the Next.js deployment documentation.

Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm start - Start the production server
• npm run lint - Run ESLint

Contributing

Contributions are welcome. Please open a pull request with a clear description of the change.

License

This project is private and proprietary.

Authors

• Abhijeet Kumar Gupta