Build a Learning Management System Using Next.js

Last Updated : 23 Jul, 2025

A Learning Management System (LMS) is a platform for delivering, tracking, and managing educational courses. In this article, we'll guide you through building a simple LMS using Next.js, covering course creation, listing, and basic management features.

Prerequisites

Approach to Build a Learning Management System Using Next.js:

Use create-next-app to initialize a new Next.js project.
Create a reusable Navbar component for navigation.
Create a CourseListing component to list all courses.
Create an AddCourse page with a form to add new courses.
Create a ManageCourse page to manage existing courses, including editing and deleting courses.
Use React’s useState and useEffect hooks to manage the application state, such as the list of courses and form inputs.
Implement functions to handle form submissions, including data validation and storing course data to localstorage.
Utilize bootstrap to style the application.

Steps to Build a Learning Management System Using Next.js:

Step 1: Initialized the Nextjs app.

npx create-next-app@latest news-aggregator

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... No 
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

Step 3: Install the necessary package for your project using the following command.

npm install bootstrap

Project Structure

Dependencies

"dependencies": {
    "bootstrap": "^5.3.3",
    "next": "14.2.5",
    "react": "^18",
    "react-dom": "^18"
  }

Example: Create the required files and write the following code.

JavaScript

// page.js

import React from 'react'
import CourseListing from './components/CourseListing'

const page = () => {
    return (
        <div>
            <CourseListing />
        </div>
    )
}

export default page;

JavaScript

// Navbar.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Link from 'next/link';

function Navbar() {
    return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark shadow">
            <div className="container">
                <Link className="navbar-brand text-light" href="/">LMS Platform</Link>
                <button className="navbar-toggler" type="button" 
                data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNav">
                    <ul className="navbar-nav">
                        <li className="nav-item">
                            <Link className="nav-link text-light" href="/">Home</Link>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link text-light" 
                            href="/AddCourse">Add New Course</Link>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link text-light" 
                            href="/ManageCourses">Manage Courses</Link>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
}

export default Navbar;

JavaScript

// CourseListing.js

'use client'
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from './Navbar';

const CourseListing = () => {
    const [courses, setCourses] = useState([]);
    const [searchTerm, setSearchTerm] = useState('');

    useEffect(() => {
        // Check if `window` is defined (i.e., running in the browser)
        if (typeof window !== 'undefined') {
            // Retrieve courses from local storage
            const storedCourses = localStorage.getItem('courses');
            const allCourses = storedCourses ? JSON.parse(storedCourses) : [];
            setCourses(allCourses);
        }
    }, []);

    const handleSearchChange = (e) => {
        const search = e.target.value;
        setSearchTerm(search);
        const filteredCourses = courses.filter((course) =>
            course.title.toLowerCase().includes(search.toLowerCase())
        );
        setCourses(filteredCourses);
    };

    return (
        <>
            <Navbar />
            <div className="container mt-5">
                <div className="row mb-3">
                    <div className="col-md-6 offset-md-3">
                        <input
                            type="text"
                            className="form-control"
                            placeholder="Search for courses..."
                            value={searchTerm}
                            onChange={handleSearchChange}
                        />
                    </div>
                </div>
                <div className="row">
                    {courses.map((course, index) => (
                        <div key={index} className="col-lg-4 col-md-6 mb-4">
                            <div className="card h-100">
                                <img src={course.imageUrl} className="card-img-top" 
                                alt={course.title} style={{ height: '200px', objectFit: 'cover' }} />
                                <div className="card-body">
                                    <h5 className="card-title">{course.title}</h5>
                                    <p className="card-text">{course.description}</p>
                                    <p className="card-text"><strong>Instructor:</strong> 
                                    {course.instructor}</p>
                                    <p className="card-text"><strong>Duration:</strong>
                                    {course.duration}</p>
                                    <p className="card-text"><strong>Price:</strong> ₹{course.price}</p>
                                    <button className="btn btn-primary w-100">Enroll Now</button>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
            <style jsx>{`
        .card:hover {
          border-radius: 8px;
          transition: box-shadow 0.3s;
          width: 101%;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
      `}</style>
        </>
    );
};

export default CourseListing;

JavaScript

// AddCourse.js

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/app/components/Navbar';

const AddCourse = () => {
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const [price, setPrice] = useState('');
    const [duration, setDuration] = useState('');
    const [instructor, setInstructor] = useState('');
    const [imageUrl, setImageUrl] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        const id = Date.now(); // Generate a unique ID using the current timestamp

        console.log({ id, title, description, price, duration, instructor, imageUrl });

        // Save the form data to local storage
        const courseData = { id, title, description, price, duration, instructor, imageUrl };
        const courses = JSON.parse(localStorage.getItem('courses')) || [];
        courses.push(courseData);
        localStorage.setItem('courses', JSON.stringify(courses));

        // Reset form fields after submission
        setTitle('');
        setDescription('');
        setPrice('');
        setDuration('');
        setInstructor('');
        setImageUrl('');
    };

    return (
        <>
            <Navbar />
            <div className="container" style={{ width: "70%" }}>
                <h2 className="mt-3 mb-4">Add New Course</h2>
                <form onSubmit={handleSubmit}>
                    <div className="mb-3">
                        <label htmlFor="title" className="form-label">Title</label>
                        <input
                            type="text"
                            className="form-control"
                            id="title"
                            value={title}
                            onChange={(e) => setTitle(e.target.value)}
                            required
                        />
                    </div>
                    <div className="mb-3">
                        <label htmlFor="description" className="form-label">Description</label>
                        <textarea
                            className="form-control"
                            id="description"
                            value={description}
                            onChange={(e) => setDescription(e.target.value)}
                            required
                        ></textarea>
                    </div>
                    <div className="mb-3">
                        <label htmlFor="price" className="form-label">Price</label>
                        <input
                            type="text"
                            className="form-control"
                            id="price"
                            value={price}
                            onChange={(e) => setPrice(e.target.value)}
                            required
                        />
                    </div>
                    <div className="mb-3">
                        <label htmlFor="duration" className="form-label">Duration (in hours)</label>
                        <input
                            type="text"
                            className="form-control"
                            id="duration"
                            value={duration}
                            onChange={(e) => setDuration(e.target.value)}
                            required
                        />
                    </div>
                    <div className="mb-3">
                        <label htmlFor="instructor" className="form-label">Instructor</label>
                        <input
                            type="text"
                            className="form-control"
                            id="instructor"
                            value={instructor}
                            onChange={(e) => setInstructor(e.target.value)}
                            required
                        />
                    </div>
                    <div className="mb-3">
                        <label htmlFor="imageUrl" className="form-label">Image URL</label>
                        <input
                            type="text"
                            className="form-control"
                            id="imageUrl"
                            value={imageUrl}
                            onChange={(e) => setImageUrl(e.target.value)}
                            required
                        />
                    </div>
                    <button type="submit" className="btn btn-primary">Add Course</button>
                </form>
            </div>
        </>
    );
};

export default AddCourse;

JavaScript

// ManageCourses.js

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/app/components/Navbar';

const ManageCourses = () => {
    const [courses, setCourses] = useState([]);
    const [editingCourse, setEditingCourse] = useState(null);
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const [price, setPrice] = useState('');
    const [duration, setDuration] = useState('');
    const [instructor, setInstructor] = useState('');
    const [imageUrl, setImageUrl] = useState('');

    useEffect(() => {
        const storedCourses = localStorage.getItem('courses');
        if (storedCourses) {
            setCourses(JSON.parse(storedCourses));
        }
    }, []);

    const handleEdit = (course) => {
        setEditingCourse(course);
        setTitle(course.title);
        setDescription(course.description);
        setPrice(course.price);
        setDuration(course.duration);
        setInstructor(course.instructor);
        setImageUrl(course.imageUrl); // Use imageUrl key
    };

    const handleUpdate = (e) => {
        e.preventDefault();
        const updatedCourses = courses.map((course) =>
            course.id === editingCourse.id
                ? { ...course, title, description, price, duration, instructor, imageUrl } 
                // Use imageUrl key
                : course
        );
        setCourses(updatedCourses);
        localStorage.setItem('courses', JSON.stringify(updatedCourses));
        setEditingCourse(null);
        setTitle('');
        setDescription('');
        setPrice('');
        setDuration('');
        setInstructor('');
        setImageUrl('');
    };

    const handleDelete = (courseId) => {
        const updatedCourses = courses.filter((course) => course.id !== courseId);
        setCourses(updatedCourses);
        localStorage.setItem('courses', JSON.stringify(updatedCourses));
    };

    return (
        <>
            <Navbar />
            <div className="container mt-5">
                <h2 className="mb-4">Manage Courses</h2>
                {editingCourse ? (
                    <form onSubmit={handleUpdate}>
                        <div className="mb-3">
                            <label htmlFor="title" className="form-label">Title</label>
                            <input
                                type="text"
                                className="form-control"
                                id="title"
                                value={title}
                                onChange={(e) => setTitle(e.target.value)}
                                required
                            />
                        </div>
                        <div className="mb-3">
                            <label htmlFor="description" className="form-label">Description</label>
                            <textarea
                                className="form-control"
                                id="description"
                                value={description}
                                onChange={(e) => setDescription(e.target.value)}
                                required
                            ></textarea>
                        </div>
                        <div className="mb-3">
                            <label htmlFor="price" className="form-label">Price</label>
                            <input
                                type="text"
                                className="form-control"
                                id="price"
                                value={price}
                                onChange={(e) => setPrice(e.target.value)}
                                required
                            />
                        </div>
                        <div className="mb-3">
                            <label htmlFor="duration" className="form-label">Duration (in hours)
                            </label>
                            <input
                                type="text"
                                className="form-control"
                                id="duration"
                                value={duration}
                                onChange={(e) => setDuration(e.target.value)}
                                required
                            />
                        </div>
                        <div className="mb-3">
                            <label htmlFor="instructor" className="form-label">Instructor</label>
                            <input
                                type="text"
                                className="form-control"
                                id="instructor"
                                value={instructor}
                                onChange={(e) => setInstructor(e.target.value)}
                                required
                            />
                        </div>
                        <div className="mb-3">
                            <label htmlFor="imageUrl" className="form-label">Image URL</label>
                            <input
                                type="text"
                                className="form-control"
                                id="imageUrl"
                                value={imageUrl}
                                onChange={(e) => setImageUrl(e.target.value)}
                                required
                            />
                        </div>
                        <button type="submit" className="btn btn-primary">Update Course</button>
                        <button type="button" className="btn btn-secondary ms-2" 
                        onClick={() => setEditingCourse(null)}>Cancel</button>
                    </form>
                ) : (
                    <div className="row">
                        {courses.map((course) => (
                            <div key={course.id} className="col-lg-4 col-md-6 mb-4">
                                <div className="card">
                                    {course.imageUrl ? ( // Use imageUrl key
                                        <img src={course.imageUrl} className="card-img-top"
                                        alt={course.title}
                                        style={{ height: '200px', objectFit: 'cover' }} />
                                    ) : (
                                        <div className="card-img-top" 
                                        style={{ height: '200px', backgroundColor: '#f0f0f0', 
                                        display: 'flex', 
                                        alignItems: 'center', justifyContent: 'center' }}>
                                            <span>No Image</span>
                                        </div>
                                    )}
                                    <div className="card-body">
                                        <h5 className="card-title">{course.title}</h5>
                                        <p className="card-text">{course.description}</p>
                                        <p className="card-text">₹{course.price}</p>
                                        <p className="card-text">Duration: {course.duration} hours</p>
                                        <p className="card-text">Instructor: {course.instructor}</p>
                                        <button className="btn btn-primary"
                                        onClick={() => handleEdit(course)}>Edit</button>
                                        <button className="btn btn-danger ms-2"
                                        onClick={() => handleDelete(course.id)}>Delete</button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
            <style jsx>{`
        .card:hover {
          border-radius: 8px;
          transition: box-shadow 0.3s;
          width: 101%;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
      `}</style>
        </>
    );
};

export default ManageCourses;

To start the application run the following comand

npm run dev

Output

React Introduction

yuvrajghule281

Improve

Article Tags :

Build a Learning Management System Using Next.js

Prerequisites

Approach to Build a Learning Management System Using Next.js:

Steps to Build a Learning Management System Using Next.js:

Step 1: Initialized the Nextjs app.

Step 2: It will ask you some questions, so choose as the following.

Step 3: Install the necessary package for your project using the following command.

Project Structure

Dependencies

Output

Similar Reads

React Fundamentals

Components in React

React Hooks

Routing in React

Advanced React Concepts

React Projects

Thank You!

What kind of Experience do you want to share?