full CRUD setup for Courses and Lectures using Express.js (backend), React.js (frontend), and MongoDB. We’ll create Courses and Lectures, where each course can have multiple lectures. I’ll break it down step by step.

1️⃣ Backend: Express.js + MongoDB
Step 1: Setup
mkdir course-management
cd course-management
npm init -y
npm install express mongoose cors body-parser nodemon


Create a server.js:

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");

const app = express();
app.use(cors());
app.use(express.json());

// MongoDB connection
mongoose.connect("mongodb://127.0.0.1:27017/courseDB", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
.then(() => console.log("MongoDB connected"))
.catch(err => console.log(err));

// Models
const LectureSchema = new mongoose.Schema({
  title: String,
  content: String,
});

const CourseSchema = new mongoose.Schema({
  name: String,
  description: String,
  lectures: [LectureSchema],
});

const Course = mongoose.model("Course", CourseSchema);

// Routes

// Get all courses
app.get("/courses", async (req, res) => {
  const courses = await Course.find();
  res.json(courses);
});

// Get a single course
app.get("/courses/:id", async (req, res) => {
  const course = await Course.findById(req.params.id);
  res.json(course);
});

// Create a course
app.post("/courses", async (req, res) => {
  const course = new Course(req.body);
  await course.save();
  res.json(course);
});

// Update a course
app.put("/courses/:id", async (req, res) => {
  const course = await Course.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(course);
});

// Delete a course
app.delete("/courses/:id", async (req, res) => {
  await Course.findByIdAndDelete(req.params.id);
  res.json({ message: "Course deleted" });
});

// Add lecture to a course
app.post("/courses/:id/lectures", async (req, res) => {
  const course = await Course.findById(req.params.id);
  course.lectures.push(req.body);
  await course.save();
  res.json(course);
});

// Update a lecture
app.put("/courses/:courseId/lectures/:lectureId", async (req, res) => {
  const course = await Course.findById(req.params.courseId);
  const lecture = course.lectures.id(req.params.lectureId);
  lecture.set(req.body);
  await course.save();
  res.json(course);
});

// Delete a lecture
app.delete("/courses/:courseId/lectures/:lectureId", async (req, res) => {
  const course = await Course.findById(req.params.courseId);
  course.lectures.id(req.params.lectureId).remove();
  await course.save();
  res.json(course);
});

app.listen(5000, () => console.log("Server running on port 5000"));


✅ Backend is ready!



Frontend: React.js
Step 1: Setup
npx create-react-app course-frontend
cd course-frontend
npm install axios react-router-dom



Let’s set up a clean working structure for your React frontend with correct imports/exports so you won’t see the “Element type is invalid” error.

1️⃣ Folder Structure
src/
  components/
    CourseList.js
    CourseDetail.js
    CreateCourse.js
    UpdateCourse.js
  api.js
  App.js
  index.js

2️⃣ API File (api.js)
import axios from "axios";

const API = axios.create({ baseURL: "http://localhost:5000" });

// Courses
export const getCourses = () => API.get("/courses");
export const getCourse = (id) => API.get(`/courses/${id}`);
export const createCourse = (data) => API.post("/courses", data);
export const updateCourse = (id, data) => API.put(`/courses/${id}`, data);
export const deleteCourse = (id) => API.delete(`/courses/${id}`);

// Lectures
export const addLecture = (courseId, data) => API.post(`/courses/${courseId}/lectures`, data);
export const updateLecture = (courseId, lectureId, data) => API.put(`/courses/${courseId}/lectures/${lectureId}`, data);
export const deleteLecture = (courseId, lectureId) => API.delete(`/courses/${courseId}/lectures/${lectureId}`);


✅ All API calls are default exported via functions.

3️⃣ Components
CourseList.js
import React, { useEffect, useState } from "react";
import { getCourses, deleteCourse } from "../api";
import { Link } from "react-router-dom";

const CourseList = () => {
  const [courses, setCourses] = useState([]);

  useEffect(() => {
    fetchCourses();
  }, []);

  const fetchCourses = async () => {
    try {
      const { data } = await getCourses();
      setCourses(data);
    } catch (err) {
      console.error(err);
    }
  };

  const handleDelete = async (id) => {
    await deleteCourse(id);
    fetchCourses();
  };

  return (
    <div>
      <h1>Courses</h1>
      <Link to="/create">Add Course</Link>
      <ul>
        {courses.map(course => (
          <li key={course._id}>
            <Link to={`/course/${course._id}`}>{course.name}</Link>
            <Link to={`/update-course/${course._id}`}>Edit</Link>
            <button onClick={() => handleDelete(course._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default CourseList;

CourseDetail.js
import React, { useEffect, useState } from "react";
import { useParams, Link } from "react-router-dom";
import { getCourse, addLecture, updateLecture, deleteLecture } from "../api";

const CourseDetail = () => {
  const { id } = useParams();
  const [course, setCourse] = useState({});
  const [lectureTitle, setLectureTitle] = useState("");
  const [lectureContent, setLectureContent] = useState("");
  const [editLectureId, setEditLectureId] = useState(null);

  useEffect(() => {
    fetchCourse();
  }, []);

  const fetchCourse = async () => {
    const { data } = await getCourse(id);
    setCourse(data);
  };

  const handleAddLecture = async () => {
    await addLecture(id, { title: lectureTitle, content: lectureContent });
    setLectureTitle("");
    setLectureContent("");
    fetchCourse();
  };

  const handleEditLecture = (lec) => {
    setEditLectureId(lec._id);
    setLectureTitle(lec.title);
    setLectureContent(lec.content);
  };

  const handleUpdateLecture = async () => {
    await updateLecture(id, editLectureId, { title: lectureTitle, content: lectureContent });
    setEditLectureId(null);
    setLectureTitle("");
    setLectureContent("");
    fetchCourse();
  };

  const handleDeleteLecture = async (lectureId) => {
    await deleteLecture(id, lectureId);
    fetchCourse();
  };

  return (
    <div>
      <h1>{course.name}</h1>
      <p>{course.description}</p>
      <Link to={`/update-course/${course._id}`}>Edit Course</Link>

      <h2>Lectures</h2>
      <ul>
        {course.lectures?.map(lec => (
          <li key={lec._id}>
            {lec.title} - {lec.content}
            <button onClick={() => handleEditLecture(lec)}>Edit</button>
            <button onClick={() => handleDeleteLecture(lec._id)}>Delete</button>
          </li>
        ))}
      </ul>

      <h3>{editLectureId ? "Edit Lecture" : "Add Lecture"}</h3>
      <input placeholder="Title" value={lectureTitle} onChange={e => setLectureTitle(e.target.value)} />
      <input placeholder="Content" value={lectureContent} onChange={e => setLectureContent(e.target.value)} />
      <button onClick={editLectureId ? handleUpdateLecture : handleAddLecture}>
        {editLectureId ? "Update Lecture" : "Add Lecture"}
      </button>
    </div>
  );
};

export default CourseDetail;

CreateCourse.js
import React, { useState } from "react";
import { createCourse } from "../api";
import { useNavigate } from "react-router-dom";

const CreateCourse = () => {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const navigate = useNavigate();

  const handleSubmit = async () => {
    await createCourse({ name, description });
    navigate("/");
  };

  return (
    <div>
      <h1>Create Course</h1>
      <input placeholder="Name" value={name} onChange={e => setName(e.target.value)} />
      <input placeholder="Description" value={description} onChange={e => setDescription(e.target.value)} />
      <button onClick={handleSubmit}>Create</button>
    </div>
  );
};

export default CreateCourse;

UpdateCourse.js
import React, { useEffect, useState } from "react";
import { getCourse, updateCourse } from "../api";
import { useNavigate, useParams } from "react-router-dom";

const UpdateCourse = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");

  useEffect(() => {
    const fetchCourse = async () => {
      const { data } = await getCourse(id);
      setName(data.name);
      setDescription(data.description);
    };
    fetchCourse();
  }, [id]);

  const handleUpdate = async () => {
    await updateCourse(id, { name, description });
    navigate(`/course/${id}`);
  };

  return (
    <div>
      <h1>Update Course</h1>
      <input placeholder="Name" value={name} onChange={e => setName(e.target.value)} />
      <input placeholder="Description" value={description} onChange={e => setDescription(e.target.value)} />
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
};

export default UpdateCourse;

4️⃣ App.js
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import CourseList from "./components/CourseList";
import CourseDetail from "./components/CourseDetail";
import CreateCourse from "./components/CreateCourse";
import UpdateCourse from "./components/UpdateCourse";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<CourseList />} />
        <Route path="/course/:id" element={<CourseDetail />} />
        <Route path="/create" element={<CreateCourse />} />
        <Route path="/update-course/:id" element={<UpdateCourse />} />
      </Routes>
    </Router>
  );
}

export default App;


✅ With this structure:

All imports/exports are consistent.

Full CRUD works for Courses and Lectures.