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

[charlottenguyen05]

@tarinagarwal Can you check my code please.

[tarin-lgtm]

Changes Requested 🐈

This PR introduces a course rating system with new UI components and backend API endpoints. While the implementation is functional and well-structured, there are significant security concerns regarding authorization checks, missing documentation on key functions, and opportunities for performance and validation improvements.

There are a few things I'd like to see addressed before we merge this:

Before merging

1. Implement authorization checks on the server to ensure only permitted users can rate courses.
2. Add comprehensive JSDoc comments to all new exported functions and components for maintainability.
3. Improve input validation and optimize rating data fetching with caching or aggregation to enhance security and performance.

Findings breakdown (38 total)

5 high / 10 medium / 12 low / 11 info

Confidence: 90%

---

🔗 View Full Review Report — detailed findings, severity breakdown, and agent analysis

_{Reviewed by Looks Good To Meow — AI-powered code review}