implemented course fetch functionality

[chiscookeke11]

---

🚀 Pull Request

🔗 Close #272

📋 Description

This PR integrates the Course Listing (coursesPage) with a live backend API, replacing the previous static/mock data implementation.

✅ What This PR Implements

• Connected src/app/coursesPage/page.tsx to fetch real course data via:

  GET /courses?page={page}&limit={limit}
  

• Implemented pagination with infinite scroll using IntersectionObserver

• Added proper loading state handling:

  • Initial page loading state
  • Incremental loading state for pagination

• Prevented duplicate course rendering during pagination

• Implemented graceful handling for:

  • Empty results
  • API errors
  • Non-existent course IDs (404 handling on sub-pages)

• Maintained client-side filtering (search, category, level) on fetched data

---

🧪 How I Tested This

Since a backend was not available in the repository, I:

1. Set up a local NestJS backend

2. Implemented:

   GET /courses?page={page}&limit={limit}
   GET /courses/:id
   

3. Configured proper pagination using:

   • skip: (page - 1) * limit
   • take: limit

4. Seeded the database with 30 course records

5. Verified:

   • Page 1 returns 10 courses
   • Scrolling loads pages 2 and 3 correctly
   • Page 4 returns empty array → infinite scroll stops
   • 404 is returned for non-existent course IDs
   • Frontend handles 404 gracefully

---

🎥 Screen Recording

Loom Demo:
https://www.loom.com/share/31cc25cfc5a8405990e48f11d360f7a3

The recording demonstrates:

• Initial course loading
• Infinite scroll behavior
• Loader placement under existing courses
• Pagination stopping correctly
• Data fetched from live backend
• Filtering working with fetched data

---

📂 Screenshots

(See Loom link above for full walkthrough.)

---

🔍 Additional Notes

• Infinite scrolling is implemented via IntersectionObserver for performance efficiency.

• Loading states are separated into:

  • initialLoading
  • loadingMore

• Duplicate course entries are prevented by ID checks before appending to state.

• No new external dependencies were introduced.

• Backend used for testing was local and not committed to this repository.

Potential Reviewer Attention

• Consider whether server-side filtering should be implemented in the future to avoid large client-side filtering as dataset scales.
• API currently returns array only — could be extended to return { data, totalCount } for improved pagination control.

---

🙏 Thank you for reviewing this implementation!

[Jeffrey0522]

@chiscookeke11 Thanks for your work!

[ndigitals04]

i can type oh. Guess this is opensource. Na you hot this period @chiscookeke11 👏🏽