v2

backend/src/db/seeders/20231127130745-sample-data.js

@@ -129,97 +129,188 @@ const CoursesData = [
     
         
         
+        
+
+        
             
+        
                 "description": "Deep dive into hooks, context, performance optimization, and patterns.",
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
-                "status": "archived",
+        
+                "status": "published",
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
+        
                 // type code here for "relation_one" field
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
+        
                 "category": "Web Development",
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
+        
                 "price": 79.99,
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
+        
                 "duration": 360,
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
+        
                 // type code here for "images" field
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
+        
                 "published_at": new Date('2025-12-05T09:00:00Z'),
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
+        
                 "enrollment_count": 64,
+        
             
         
+        
+        
     
+        
     },
+        
     
+        
     {
+        
     
         
         
+        
+        
+        
             
+        
                 "title": "UX for Developers",
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
+        
                 "description": "Design thinking and practical UX techniques for building better interfaces.",
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
-                "status": "archived",
+        
+                "status": "published",
+        
             
         
+        
+        
     
         
         
+        
+        
+        
             
-                // type code here for "relation_one" field
+        
-            
+                // type code here for "relation_one" field            
         
     
         

backend/src/index.js

@@ -15,6 +15,7 @@ const authRoutes = require('./routes/auth');
 const fileRoutes = require('./routes/file');
 const searchRoutes = require('./routes/search');
 const pexelsRoutes = require('./routes/pexels');
+const publicRoutes = require('./routes/public');
 
 const openaiRoutes = require('./routes/openai');
 
@@ -87,6 +88,7 @@ require('./auth/auth');
 app.use(bodyParser.json());
 
 app.use('/api/auth', authRoutes);
+app.use('/api/public', publicRoutes);
 app.use('/api/file', fileRoutes);
 app.use('/api/pexels', pexelsRoutes);
 app.enable('trust proxy');

backend/src/routes/public.js

@@ -0,0 +1,17 @@
+const express = require('express');
+const router = express.Router();
+const CoursesDBApi = require('../db/api/courses');
+
+router.get('/courses', async (req, res) => {
+  try {
+    const publishedCourses = await CoursesDBApi.findAll({
+      where: { status: 'published' },
+    });
+    res.json(publishedCourses);
+  } catch (error) {
+    console.error(error);
+    res.status(500).send('Internal Server Error');
+  }
+});
+
+module.exports = router;

frontend/src/components/Courses/PublicCourseCard.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import Link from 'next/link';
+
+type Props = {
+  course: any;
+};
+
+const PublicCourseCard = ({ course }: Props) => {
+  return (
+    <li className='glass-card-2'>
+      <Link href={`/courses/courses-view/?id=${course.id}`} className={'cursor-pointer'}>
+        <ImageField
+          image={course.cover}
+          className='w-full h-44 rounded-t-lg overflow-hidden'
+          imageClassName='h-full w-full object-cover'
+        />
+        <p className={'px-6 py-4 font-semibold text-white'}>{course.title}</p>
+      </Link>
+    </li>
+  );
+};
+
+export default PublicCourseCard;

frontend/src/components/Courses/PublicCourseList.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import PublicCourseCard from './PublicCourseCard';
+import LoadingSpinner from '../LoadingSpinner';
+
+const PublicCourseList = () => {
+  const [courses, setCourses] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    axios
+      .get('/public/courses')
+      .then((res) => {
+        setCourses(res.data.rows);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <div className='py-10'>
+      <h2 className='text-3xl font-bold text-center text-white mb-8'>Our Courses</h2>
+      {loading && <LoadingSpinner />}
+      <ul role='list' className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'>
+        {!loading &&
+          courses.map((course) => <PublicCourseCard key={course.id} course={course} />)}
+      </ul>
+    </div>
+  );
+};
+
+export default PublicCourseList;

frontend/src/pages/index.tsx

@@ -16,6 +16,7 @@ import {
   mdiLinkedin,
 } from '@mdi/js'
 import BaseIcon from '../components/BaseIcon'
+import PublicCourseList from '../components/Courses/PublicCourseList'
 
 export default function Landing() {
   const textColor = useAppSelector((state) => state.style.linkColor)
@@ -94,6 +95,12 @@ export default function Landing() {
         </div>
       </section>
 
+      <section className="py-20">
+        <div className="container mx-auto px-6">
+          <PublicCourseList />
+        </div>
+      </section>
+
       <footer className="text-white py-10">
         <div className="container mx-auto px-4 text-center">
           <p className="text-sm text-white/70">