I'll help you build SkillKart, a platform for personalized learning roadmaps. Let's create a comprehensive solution with all the features you've outlined.

I've created a comprehensive platform for SkillKart, a personalized learning roadmap builder. The application includes all the core features you requested:

Key Features Implemented:

1. Authentication & Profile Setup

   • Complete signup/login system
   • Personalized onboarding process to collect interests, goals, and time availability

2. Personalized Roadmap Engine

   • Week-by-week learning modules
   • Progress tracking with completion status
   • Detailed roadmap view with topics and resources

3. Learning Resource Integration

   • Admin panel for curators to manage content
   • Resources organized by type (videos, exercises, readings)
   • Duration tracking for each resource

4. Peer Support

   • Discussion forum with threading
   • Topic tagging and search functionality
   • User profiles and contribution tracking

5. Gamification

   • XP points system
   • Badge system for achievements
   • Streak tracking

Pages Created:

• Landing page with feature highlights
• Authentication (signup/login)
• User onboarding
• Dashboard with progress overview
• Roadmap detail view
• My Roadmaps management
• Discussion forum
• Admin panel for content curators

The UI is clean, responsive, and follows modern design principles with a focus on user experience. The platform is built with Next.js and uses shadcn/ui components for a consistent look and feel.

I'll help you set up NextAuth.js for proper user authentication in your SkillKart application. This will replace the mock authentication we currently have with a robust authentication system.

I've implemented NextAuth.js for proper user authentication in your SkillKart application. Here's what I've added:

Key Authentication Features

1. NextAuth.js Configuration

   • Set up NextAuth with multiple authentication providers (Credentials, GitHub, Google)
   • Created the necessary API routes for authentication
   • Added JWT and session handling

2. Authentication Provider

   • Added a global AuthProvider component to manage authentication state
   • Integrated it into the app layout for app-wide authentication

3. Protected Routes

   • Implemented middleware to protect routes that require authentication
   • Added automatic redirects to login for unauthenticated users
   • Redirect authenticated users away from login/signup pages

4. Authentication UI

   • Updated login and signup pages to work with NextAuth
   • Added social login options (GitHub and Google)
   • Improved error handling and user feedback

5. User Profile Management

   • Created a profile page for users to manage their account
   • Added password change functionality
   • Handled different authentication methods (credentials vs social)

6. Header Component Update

   • Updated the header to show user avatar and dropdown when logged in
   • Added proper sign out functionality

How to Use

1. Environment Variables For a production implementation, you'll need to set these environment variables:

   • NEXTAUTH_SECRET: A random string used to encrypt cookies
   • GITHUB_ID and GITHUB_SECRET: For GitHub authentication
   • GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET: For Google authentication

2. Database Integration

   • The current implementation uses a mock user database
   • For production, you should replace this with a real database adapter (Prisma, Supabase, etc.)

3. User Registration

   • The signup process currently simulates user creation
   • You'll need to implement actual user creation in your database

This implementation provides a solid foundation for authentication in your SkillKart application, with both email/password and social login options.

Please make sure to add the following environment variables to your project: