feat: Add user accounts and progress tracking system#856
feat: Add user accounts and progress tracking system#856Sappymukherjee214 wants to merge 2 commits intosayeeg-11:mainfrom
Conversation
|
@sayeeg-11 I have added the user accounts and progress tracking system. Please label the PR for the issue #833 |
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive user authentication and progress tracking system to transform OpenSource-Compass from a static guide repository into an interactive learning platform. The implementation includes GitHub OAuth integration, email/password authentication, a learner dashboard, and backend progress persistence using MongoDB.
Changes:
- Added user authentication system with GitHub OAuth (Passport.js) and email/password flows using JWT tokens in httpOnly cookies
- Created learner dashboard with glassmorphic UI showing progress visualization, completion stats, and contributor ranking
- Implemented backend progress tracking API to persist completed guides to MongoDB with User model enhancements
Reviewed changes
Copilot reviewed 17 out of 18 changed files in this pull request and generated 21 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/pages/signup.html | New user registration page with form validation and error handling |
| frontend/pages/login.html | New login page supporting both email/password and GitHub OAuth |
| frontend/pages/profile.html | Updated profile settings page with improved styling and backend integration |
| frontend/pages/dashboard.html | New learner dashboard displaying user progress, stats, and guide completion status |
| frontend/pages/guides.html | Added "Mark as Completed" buttons to guide sections for progress tracking |
| frontend/js/auth.js | Refactored authentication logic to use backend API with cookie-based JWT sessions |
| frontend/js/dashboard.js | Dashboard data loading and rendering logic with backend API integration |
| frontend/js/guides.js | Progress tracking functionality for guide completion |
| frontend/js/profile2.js | Updated profile update logic to use backend API |
| frontend/css/style.css | Added authentication UI styles including profile dropdown and progress buttons |
| backend/server.js | Added session middleware, passport initialization, and CORS configuration for credentials |
| backend/routes/authRoutes.js | New authentication routes including GitHub OAuth callbacks and progress tracking |
| backend/package.json | Added dependencies: express-session, passport, passport-github2 |
| backend/models/User.js | Extended User model with githubId field and completedGuides array |
| backend/controllers/authController.js | Added trackGuideCompletion and updateUserProfile functions |
| backend/config/passport.js | New Passport.js GitHub OAuth strategy configuration |
| backend/.env.example | Added required environment variables for GitHub OAuth and sessions |
Files not reviewed (1)
- backend/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@Sappymukherjee214 please resolve merge conflicts |
@sayeeg-11 I have resolved the conflicts. Please merge the PR. |
|
@sayeeg-11 Please review the PR and merge it |
|
@sayeeg-11 you are not seeing into it. Please merge the PR |
2 participants
📋 Description
Implemented a comprehensive User Authentication and Progress Tracking system to transform OpenSource-Compass into an interactive learning platform.
Fixes: #833
Key Changes:
📸 Screenshots (MANDATORY for UI/UX changes)
🚨 If this PR includes any UI/UX changes, screenshots are REQUIRED.
If screenshots are not applicable, explain briefly:
I am currently unable to capture screenshots due to a local environment restriction, but the UI changes include three primary new views: a Login Page, a Signup Page, and a Learner Dashboard. These have been implemented using a premium glassmorphic design system and custom CSS animations that align with the platform's 'Open Source' and 'Golden Compass' aesthetic. The updates also include dynamic 'Mark as Completed' buttons within the guides that provide instant visual feedback (checkmarks and color transitions) upon interaction.