feat: implement lesson tracking with real-time progress updates #850
Conversation
Progress API Implementation: - Created /api/lms/progress endpoint with GET and POST methods - GET: Fetch user progress filtered by lessonId, moduleId, or courseId - POST: Mark lessons complete/incomplete and track time spent - Automatic enrollment lastActivity updates on progress changes - Enrollment verification before allowing progress tracking Lesson Page Updates (web-development/[moduleId]/[lessonId].tsx): - Replaced localStorage with real API calls for progress tracking - Fetch lesson completion status on page load - Fetch module progress for real-time sidebar stats - Mark as Complete button now saves to database - Loading states with spinner during save - Dynamic progress bars based on actual completion data - Auto-increment module progress counter on completion Database Integration: - Leverages existing Progress model (userId, lessonId, completed, timeSpent) - Unique constraint ensures one progress record per user per lesson - Tracks startedAt and completedAt timestamps - Updates course enrollment lastActivity on any progress change Student Benefits: - Progress persists across sessions and devices - Real-time progress tracking as lessons are completed - Accurate module completion percentages in sidebar - Foundation for course completion calculations - Enrollment activity tracking for engagement metrics
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive lesson tracking system with real-time progress updates, replacing client-side localStorage with persistent database storage. The implementation introduces a new /api/lms/progress endpoint for fetching and updating lesson completion status, integrated with the lesson page UI to display dynamic progress metrics.
Key Changes:
- Created a new progress API endpoint supporting GET (fetch progress by lesson/module/course) and POST (mark lessons complete/incomplete with time tracking)
- Updated lesson page to fetch real-time progress data on mount and dynamically update UI elements based on actual completion status
- Integrated enrollment verification and automatic lastActivity updates on progress changes
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
src/pages/api/lms/progress/index.ts |
New API endpoint implementing GET/POST methods for progress tracking with enrollment verification and database integration |
src/pages/courses/web-development/[moduleId]/[lessonId].tsx |
Replaced localStorage with API calls, added loading states, and implemented dynamic progress bars with real-time updates |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| setModuleProgress((prev) => ({ | ||
| ...prev, | ||
| completed: prev.completed + 1, | ||
| })); |
There was a problem hiding this comment.
The progress counter increments even if the lesson was already completed, causing incorrect progress counts. Check if completed is currently false before incrementing, or refetch the module progress from the API to ensure accuracy.
| const { courseId, moduleId, lessonId } = req.query; | ||
|
|
||
| // Build where clause for filtering | ||
| const where: any = { userId }; |
There was a problem hiding this comment.
Using any type defeats TypeScript's type safety. Consider using Prisma.ProgressWhereInput or defining a proper interface for the where clause to maintain type safety.
|
|
||
| if (existingProgress) { | ||
| // Update existing progress | ||
| const updateData: any = {}; |
There was a problem hiding this comment.
Using any type bypasses TypeScript's type checking. Use Prisma.ProgressUpdateInput or a properly typed object to ensure type safety for update operations.
|
🔍 Code Quality Score Breakdown:
💡 Recommendations:
|
Progress API Implementation:
Lesson Page Updates (web-development/[moduleId]/[lessonId].tsx):
Database Integration:
Student Benefits: