Feature: Implement course rating system

[charlottenguyen05]

📝 Description

Frontend Changes

client/src/components/ui/Star.tsx (New File): Created reusable Star component

client/src/components/ui/StarRating.tsx (New File)

• Created StarRating component that displays 5-star rating interface with readonly (display) and interactive (input) modes
• Implements hover preview functionality for interactive ratings

client/src/components/courses/CoursesPage.tsx

• Added rating display to course cards showing average rating and rating count
• Handles zero ratings gracefully (shows empty text)

client/src/components/courses/CourseDetailPage.tsx

• Added rating state management (rating, averageRating, ratingCount)
• Added toast notifications for rating submission feedback
• Implemented handleRatingSubmit() function with validation
• Implemented fetchUserRating() to load existing user ratings
• Added rating UI in course completion section so that user can submit their rating after completion.
• Shows average rating in course header with star display

client/src/types/index.ts

• Added average_rating: number and rating_count: number to Course interface

client/src/utils/api.ts

• Added rateCourse() API function to submit/update ratings
• Added getCourseRatings() API function to fetch ratings data

Backend Changes

server/prisma/schema.prisma

• Added CourseRating model with fields:
  • id: Unique identifier
  • courseId: Reference to course
  • userId: Reference to user
  • rating: Integer value (1-5)

server/routes/courses.js

• NEW GET /api/courses/:id/rate: Fetch all ratings for a course (See API.md for clear explanation)
• NEW POST /api/courses/:id/rate: Submit or update a course rating (See API.md for clear explanation)
• Modified GET /api/courses/:
  • Calculates and return additionally two key average_rating and rating_count for each course (conform to the new interface of Course in index.ts)
• Modified GET /api/courses/:id:
  • Calculates and return additionally two key average_rating and rating_count for the course with that id (conform to the new interface of Course in index.ts)

Documentation Changes

docs/API.md: Added documentation for GET /api/courses/:id/rate endpoint and POST /api/courses/:id/rate endpoint

🔗 Related Issue

Closes #5

🏷️ Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 📝 Documentation update
• 🎨 Style/UI update
• ♻️ Code refactoring
• ⚡ Performance improvement
• 🧪 Test update

📸 Screenshots (if applicable)

Video demo (this video is done before I swapped the position of sharing button and rating in header in the last commit):
cinnamon-2026-01-05T185512+0100.webm
cinnamon-2026-01-05T185402+0100.webm

✅ Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have tested my changes locally
• Any dependent changes have been merged and published

🧪 Testing

• Tested on Chrome
• Tested on Firefox
• Tested on mobile
• Tested API endpoints (if applicable)

📋 Additional Notes

I'm SWOC 2026 participant. Can you add the label to this PR for me. Thank you so much.

---

SWOC 2026 Participant? Add swoc2026 label to your PR! 🎉

[tarinagarwal]

@charlottenguyen05 ill review it asap