Build a Udemy Clone with Strapi and Next.js (Part 1)

Copycopy code to clipboard
mkdir udemy-clone && cd udemy-clone

Copycopy code to clipboard
npx create-strapi-app@rc backend --quickstart

Copycopy code to clipboard
{
    "data": {
        "name": SECTION_NAME,
        "course": {
            "connect": [DOCUMENT_ID_OF_THE_COURSE]
        }
    }
}

Copycopy code to clipboard
{
    "data": null,
    "error": {
        "status": 403,
        "name": "ForbiddenError",
        "message": "Forbidden",
        "details": {}
    }
}

Copycopy code to clipboard
[        {
            "id": 2,
            "documentId": "lqhace5xsr85ljkaq42zlwps",
            "title": "Python Fundamentals",
            "description": "Designed for beginners who want to learn the basics of Python programming. ",
            "slug": "python-fundamentals",
            "thumbnail": "https://www.mooc.org/hubfs/python-applications.jpg",
            "createdAt": "2024-09-14T19:48:28.552Z",
            "updatedAt": "2024-09-14T19:48:28.552Z",
            "publishedAt": "2024-09-14T19:48:28.730Z",
            "locale": null,
            "category": "Python"
        }]

Copycopy code to clipboard
npx create-next-app@latest frontend
npm i axios
cd frontend && npm run dev

Copycopy code to clipboard
@media (prefers-color-scheme: light) {

Copycopy code to clipboard
"use client";
import React, { useState, useEffect } from "react";
import axios from "axios";
import Link from "next/link";

const AllCoursesPage = () => {
  const [courses, setCourses] = useState([]);
  const [categories, setCategories] = useState({});
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchCourses = async () => {
      try {
        const response = await axios.get("http://localhost:1337/api/courses");
        const fetchedCourses = response.data.data;

        const groupedCourses = fetchedCourses.reduce((acc, course) => {
          const category = course.category || "Uncategorized";
          if (!acc[category]) {
            acc[category] = [];
          }
          acc[category].push(course);
          return acc;
        }, {});

        setCourses(fetchedCourses);
        setCategories(groupedCourses);
        setIsLoading(false);
      } catch (error) {
        console.error("Error fetching courses:", error);
      }
    };

    fetchCourses();
  }, []);

  if (isLoading) {
    return (
      <div className="flex flex-col justify-center items-center h-screen">
        <div className="animate-spin rounded-full h-32 w-32 border-t-4 border-b-4 border-blue-500"></div>
        <div className="text-2xl font-bold mt-6">Loading...</div>
      </div>
    );
  }

  return (
    <div className="flex flex-col p-24">
      <div>
        <Link href="/">Home</Link>
      </div>
      {!isLoading && courses.length === 0 ? (
        <div>There are no courses available</div>
      ) : (
        <div>
          {Object.keys(categories).map((category) => (
            <div key={category} className="mt-12">
              <h2 className="text-2xl font-semibold text-gray-800">{category}</h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
                {categories[category].map((course) => (
                  <a
                    href={`/course/${course.slug}`}
                    key={course.id}
                    className="group block"
                  >
                    <div className="border border-gray-200 rounded-lg overflow-hidden cow-lg hover:shadow-xl transition-shadow duration-300">
                      <div className="relative w-full h-auto">
                        <img
                          src={course.thumbnail}
                          alt={course.title}
                          className="group-hover:scale-105 transition-transform duration-300"
                        />
                      </div>
                      <div className="p-4">
                        <p className="text-lg font-semibold group-hover:text-blue-600">
                          {course.title}
                        </p>
                        <p className="text-sm text-gray-600 mt-2">
                          {course.description}
                        </p>
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default AllCoursesPage;

Copycopy code to clipboard
"use client";
import { useState } from 'react';

const Accordion = ({ course,secondsToHMS }) => {
  const [openSectionIndex, setOpenSectionIndex] = useState(0);

  const toggleSection = (index) => {
    setOpenSectionIndex(openSectionIndex === index ? null : index);
  };

  return (
    <div className='border border-gray-300 mt-2'>
      {course.sections.length > 0 &&
        course.sections.map((section, index) => {
          const isOpen = openSectionIndex === index;
          return (
            <div key={section.id}>
              <div
                className="flex justify-between items-center cursor-pointer bg-gray-100 p-4 border-b border-gray-300"
                onClick={() => toggleSection(index)}
              >
                <h3 className="text-xl font-semibold text-gray-800">
                  {section.title}
                </h3>
                <span className={`text-sm text-gray-600 transition-transform duration-300 ${isOpen ? 'rotate-180' : 'rotate-0'}`}>
                  ▼
                </span>
              </div>
              {isOpen && (
                <ul className="list-disc text-gray-700">
                  {section.lectures.length > 0 &&
                    section.lectures.map((lecture) => (
                      <li key={lecture.id} className="flex justify-between mt-1 py-6 px-12">
                        <span> {lecture.title}</span>
                        <span className="text-sm text-gray-500">
                          {secondsToHMS(lecture.duration)}
                        </span>
                      </li>
                    ))}
                </ul>
              )}
            </div>
          );
        })}
    </div>
  );
};

export default Accordion;

Copycopy code to clipboard
"use client";
import axios from "axios";
import Accordion from "@/components/Accordion";
import Link from "next/link";

async function getCourseBySlug(slug) {
  try {
    const response = await axios.get("http://127.0.0.1:1337/api/courses", {
      params: {
        filters: {
          slug: {
            $eq: slug,
          },
        },
        populate: {
          sections: {
            populate: "lectures",
          },
        },
      },
    });
    const course = response.data.data[0];
    return course || null;
  } catch (error) {
    console.error("Error fetching course:", error);
    return null;
  }
}

export default async function Page({ params }) {
  const course = await getCourseBySlug(params.slug);
  if (!course) {
    return (
      <div>
        <h1>We can’t find the page you’re looking for</h1>
        <a href="/">Go back</a>
      </div>
    );
  }

  const getTotalLectures = () => {
    return course.sections.reduce(
      (total, section) => total + section.lectures.length,
      0,
    );
  };

  const getTotalLecturesDuration = () => {
    const totalSeconds = course.sections.reduce((total, section) => {
      console.log(section.lectures, "section");
      const sectionDuration = section.lectures[0]?.duration;
      return total + sectionDuration;
    }, 0);
    return secondsToHMS(totalSeconds);
  };

  function secondsToHMS(duration) {
    const hours = Math.floor(duration / 3600);
    const minutes = Math.floor((duration % 3600) / 60);
    const seconds = duration % 60;

    const hoursStr = hours > 0 ? `${hours}:` : "";
    const minutesStr =
      minutes > 0 || hours > 0 ? String(minutes).padStart(2, "0") + ":" : "";
    const secondsStr = String(seconds).padStart(2, "0");

    return `${hoursStr}${minutesStr}${secondsStr}`;
  }

  return (
    <main className="flex flex-col p-24">
      <Link href="/" className="text-blue-500 hover:underline">
        Home
      </Link>
      <div className="max-w-5xl w-full p-8">
        <div>
          <h1 className="text-4xl mb-6 font-bold text-gray-900">
            {course.title}
          </h1>

          <p className="text-lg text-gray-700 mb-8">{course.description}</p>

          <h2 className="text-2xl font-bold mt-8 text-gray-800 pb-2">
            Course Content
          </h2>

          <ul className="flex gap-6 items-center text-sm text-gray-800 mt-4">
            <li className="list-none">
              {`${course.sections.length} sections`}
            </li>
            <li className="list-disc">{`${getTotalLectures()} lectures`}</li>
            <li className="list-disc">
              {`${getTotalLecturesDuration()} total length`}
            </li>
          </ul>

          <Accordion course={course} secondsToHMS={secondsToHMS} />
        </div>
      </div>
    </main>
  );
}

Copycopy code to clipboard
npx shadcn@latest init
npx shadcn@latest add avatar button
npm i lucide-react

Copycopy code to clipboard
"use client";
import React, { useState } from "react";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";

const NavAvatar = ({ userData }) => {
  const router = useRouter();
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => setIsHovered(true);
  const handleMouseLeave = () => setIsHovered(false);

  const handleLogout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    router.push("/login");
  };

  const initials = userData.email.slice(0, 2).toUpperCase();

  return (
    <div
      className="relative flex items-center space-x-4"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <Avatar className="h-12 w-12">
        <AvatarImage src="" alt={`${initials} Avatar`} />
        <AvatarFallback className="bg-blue-500 text-white">
          {initials}
        </AvatarFallback>
      </Avatar>

      {isHovered && (
        <div
          className="absolute top-12 right-0 bg-white border border-gray-200 rounded-md shadow-lg p-4 w-64 z-10"
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <div className="flex flex-col items-center">
            <Button onClick={handleLogout}>Logout</Button>

            <span className="text-gray-500 block">{userData.username}</span>
            <span className="text-gray-500 block"> {userData.email}</span>
          </div>
        </div>
      )}
    </div>
  );
};

export default NavAvatar;

Copycopy code to clipboard
"use client";
import { useState, useEffect } from "react";
import NavAvatar from "@/app/components/NavAvatar";
import { ShoppingCart } from "lucide-react";
import Link from "next/link";

const Navbar = () => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const userData = localStorage.getItem("user");
    if (userData) {
      setUserData(JSON.parse(userData));
    }
  }, []);

  return (
    <div className="flex items-center justify-between gap-12">
      <div className="flex gap-4">
        <Link href="/">Home</Link>
      </div>
      <Link
        href="/cart"
        className="flex items-center space-x-2 p-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors duration-200"
        aria-label="View Cart"
      >
        <div className="relative flex items-center">
          <ShoppingCart size={24} className="text-gray-700" />
        </div>
      </Link>
      {userData && <Link href="/my-learning">My learning</Link>}
      {userData && <Link href="/manage-courses">Manage Courses</Link>}
      {userData ? (
        <NavAvatar userData={userData} />
      ) : (
        <div className="flex gap-4">
          <Link href="/login">Login</Link>
          <Link href="/register">Register</Link>
        </div>
      )}
    </div>
  );
};

export default Navbar;

Copycopy code to clipboard
import React, { useEffect } from 'react';
import { useRouter } from 'next/navigation';

const AuthCheck = () => {
  const router = useRouter();

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      router.push('/');
    }
  }, [router]);

  return null;
};

export default AuthCheck;

Copycopy code to clipboard
npx shadcn@latest add card input
npm i js-cookie

Copycopy code to clipboard
"use client";
import React, { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
import axios from 'axios';
import AuthCheck from '@/components/AuthCheck';
import { useRouter } from 'next/navigation';

const RegisterPage = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const router = useRouter();


  const handleRegister = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post('http://localhost:1337/api/auth/local/register', {
        username: username,
        email: email,
        password: password,
      });

      const { jwt, user } = response.data;

      localStorage.setItem('token', jwt);
      localStorage.setItem('user', JSON.stringify(user));

      setSuccess('Registration successful! You can now log in.');
      setError('');
      setUsername('');
      setEmail('');
      setPassword('');
      router.push('/');

    } catch (error) {
      console.error('Registration failed:', error);
      setError('Registration failed. Please try again.');
    }
  };

  return (
    <div className="flex items-center justify-center h-screen">
      <AuthCheck/>
      <Card className="w-full max-w-md p-8">
        <CardHeader>
          <CardTitle>Register</CardTitle>
          <CardDescription>Create a new account by filling in the information below.</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleRegister}>
            <div className="mb-4">
              <Input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                required
              />
            </div>
            <div className="mb-4">
              <Input
                type="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
            </div>
            <div className="mb-4">
              <Input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>
            {error && <p className="text-red-500 text-sm mb-4">{error}</p>}
            {success && <p className="text-green-500 text-sm mb-4">{success}</p>}
            <Button type="submit" className="w-full bg-blue-500 text-white">
              Register
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
};

export default RegisterPage;

Copycopy code to clipboard
"use client";
import React, { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
import { useRouter } from 'next/navigation';
import axios from 'axios';

const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const router = useRouter();

  const handleLogin = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post('http://localhost:1337/api/auth/local', {
        identifier: email,
        password: password,
      });

      const { jwt, user } = response.data;
      localStorage.setItem('token', jwt);
      localStorage.setItem('user', JSON.stringify(user));

      router.push('/');

    } catch (error) {
      console.error('Login failed:', error);
      setError('Invalid email or password.');
    }
  };

  return (
    <div className="flex items-center justify-center h-screen">
      <Card className="w-full max-w-md p-8">
        <CardHeader>
          <CardTitle>Login</CardTitle>
          <CardDescription>Enter your credentials to access your account.</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleLogin}>
            <div className="mb-4">
              <Input
                type="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
            </div>
            <div className="mb-4">
              <Input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>
            {error && <p className="text-red-500 text-sm mb-4">{error}</p>}
            <Button type="submit" className="w-full bg-blue-500 text-white">
              Login
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
};

export default LoginPage;

Copycopy code to clipboard
"use client";
import Navbar from "@/components/Navbar";
import { useState, useEffect } from "react";
import axios from "axios";
import Link from "next/link";
import { Button } from "@/components/ui/button";

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

  useEffect(() => {
    const fetchCourses = async () => {
      try {
        const response = await axios.get(`http://localhost:1337/api/courses`);

        setCourses(response.data.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchCourses();
  }, []);

  const handleDeleteCourse = async (documentId) => {
    const token = localStorage.getItem("token");
    const config = {
      headers: { Authorization: `Bearer ${token}` },
    };
    try {
      await axios.delete(
        `http://localhost:1337/api/courses/${documentId}`,
        config,
      );
      setCourses(courses.filter((course) => course.documentId !== documentId));
      alert("Course deleted successfully");
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 text-center p-24">
      <Navbar />
      <h1 className="text-3xl font-semibold mb-6">Manage courses</h1>
      <Button className="mb-6">Create new course</Button>
      <div className="flex flex-col items-start gap-6 w-1/2">
        {courses.map((course) => (
          <div className="py-12 pl-6 text-left w-full border text-card-foreground bg-white shadow-md rounded-md">
            <h2 className="text-xl font-semibold mb-4">{course.title}</h2>
            <Link
              href={`/manage-courses/${course.slug}`}
              key={course.documentId}
              className="text-blue-500 mr-6"
            >
              <Button>Edit</Button>
            </Link>
            <Button onClick={() => handleDeleteCourse(course.documentId)}>
              Delete
            </Button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ManageCoursesPage;

Copycopy code to clipboard
npx shadcn@latest add toast

Copycopy code to clipboard
---
success: "success group border-green-500 bg-green-500 text-neutral-50"
---

Copycopy code to clipboard
import { Toaster } from "@/components/ui/toaster"

// below the {children}
<Toaster />

Copycopy code to clipboard
import { useToast } from "@/hooks/use-toast";

const { toast } = useToast();

// replace the alert with
toast({
 title: "Success",
 description: "Course deleted successfully",
 duration: 3000,
 variant: "success",
});

Copycopy code to clipboard
import React from "react";

export default function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
      <div className="bg-white rounded-lg p-6 w-1/3">
        <button
          onClick={onClose}
          className="text-black float-right font-bold"
        >
          &times;
        </button>
        <div>{children}</div>
      </div>
    </div>
  );
}

Copycopy code to clipboard
import Modal from '@/components/Modal';

 const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

 <Button className="mb-6" onClick={handleOpenModal}>Create new course</Button>

<Modal isOpen={isModalOpen} onClose={handleCloseModal}>
       <h1>This is placeholder for modal content</h1>
      </Modal>

Copycopy code to clipboard
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useToast } from "@/hooks/use-toast";
import { useRouter } from 'next/navigation';

export default function CourseForm({ onClose, setCourses, existingCourse }) {
  const router = useRouter();
  const { toast } = useToast();
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    slug: "",
    thumbnail: "",
    sections: [],
  });


  useEffect(() => {
    if (existingCourse) {
      setFormData({
        title: existingCourse.title,
        description: existingCourse.description,
        slug: existingCourse.slug,
        thumbnail: existingCourse.thumbnail,
      });
    }
  }, [existingCourse]);

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };


  const handleSubmit = async (e) => {
    e.preventDefault();
    const token = localStorage.getItem("token");
    const config = {
      headers: { Authorization: `Bearer ${token}` },
    };

    const payload = {
      title: formData.title,
      description: formData.description,
      slug: formData.slug,
      thumbnail: formData.thumbnail,
    }

    try {
      if (existingCourse) {
        const res = await axios.put(
          `http://127.0.0.1:1337/api/courses/${existingCourse.documentId}`,
          { data: payload },
          config,
        );
        toast({
          title: "Success",
          description: "Course updated successfully",
          duration: 3000,
          variant: "success",
        });
        router.push(`/manage-courses`);

      } else {
        const res = await axios.post(
          "http://127.0.0.1:1337/api/courses",
          { data: payload },
          config,
        );
        toast({
          title: "Success",
          description: "Course created successfully",
          duration: 3000,
          variant: "success",
        });
        setCourses((courses) => [...courses, res.data.data]);
        onClose();
      }
    } catch (error) {
      console.error("Error creating/editing course:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Course Name
        </label>
        <input
          type="text"
          name="title"
          value={formData.title}
          onChange={handleChange}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700"
          required
        />
      </div>
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Description
        </label>
        <textarea
          name="description"
          value={formData.description}
          onChange={handleChange}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700"
          required
        />
      </div>
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Slug
        </label>
        <input
          type="text"
          name="slug"
          value={formData.slug}
          onChange={handleChange}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700"
          required
        />
      </div>
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Thumbnail
        </label>
        <input
          type="text"
          name="thumbnail"
          value={formData.thumbnail}
          onChange={handleChange}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700"
        />
      </div>
      <div className="flex justify-end">
        {!existingCourse && (
          <button
            type="button"
            onClick={onClose}
            className="bg-gray-400 text-white px-4 py-2 rounded mr-2"
          >
            Cancel
          </button>
        )}
        <button
          type="submit"
          className="bg-blue-500 text-white px-4 py-2 rounded"
        >
          {existingCourse ? "Update Course" : "Create Course"}
        </button>
      </div>
    </form>
  );
}

Copycopy code to clipboard
import CourseForm from "@/components/CourseForm";


// replace the modal content placeholder with below
<CourseForm onClose={handleCloseModal} setCourses={setCourses}

Copycopy code to clipboard
"use client";
import CourseForm from '@/components/CourseForm';
import Navbar from "@/components/Navbar";
import axios from "axios";

async function getCourseBySlug(slug) {
  try {
    const response = await axios.get("http://127.0.0.1:1337/api/courses", {
      params: {
        filters: {
          slug: {
            $eq: slug,
          },
        },
        populate: {
          sections: {
            populate: "lectures",
          },
        },
      },
    });

    const course = response.data.data[0];
    return course || null;
  } catch (error) {
    console.error("Error fetching course:", error);
    return null;
  }
}

export default async function EditCoursePage({ params}) {
  const course = await getCourseBySlug(params.slug);

  if (!course) {
    return (
      <div>
        <h1>We can’t find the page you’re looking for</h1>
        <a href="/">Go back</a>
      </div>
    );
  }

  return (
    <main className="flex flex-col p-24">
      <Navbar />
      <CourseForm existingCourse={course}/>
    </main>
  );
}