SkillPath - Cloud & DevOps Learning Platform

A modern learning platform built with Next.js 15, featuring user authentication, role-based access control, and a beautiful UI powered by shadcn/ui.

🚀 Features

• ✅ Authentication System - NextAuth.js v5 with multiple providers
• ✅ OAuth Support - Login with Google and GitHub
• ✅ Email/Password Auth - Traditional authentication with bcrypt
• ✅ Role-Based Access Control - User, Moderator, and Administrator roles
• ✅ Protected Routes - Server-side route protection on each page
• ✅ MongoDB Integration - Pure MongoDB (no ORM)
• ✅ Responsive Design - Mobile-first with Tailwind CSS
• ✅ Smooth Animations - Framer Motion for delightful UX
• ✅ Modern UI Components - shadcn/ui component library

📋 Prerequisites

• Node.js 18+
• MongoDB (local or cloud)
• npm or yarn or pnpm

🔧 Installation

1. Clone the repository

git clone <repository-url>
cd SkillPath

2. Install dependencies

npm install

3. Set up environment variables

Copy .env.example to .env.local and fill in your values:

cp .env.example .env.local

Required environment variables:

• NEXTAUTH_SECRET - Secret for JWT encryption
• NEXTAUTH_URL - Your app URL (http://localhost:3000 for dev)
• GOOGLE_CLIENT_ID & GOOGLE_CLIENT_SECRET - Google OAuth
• GITHUB_CLIENT_ID & GITHUB_CLIENT_SECRET - GitHub OAuth
• MONGODB_URI - MongoDB connection string

📖 See OAUTH_SETUP.md for detailed OAuth configuration instructions.

4. Start MongoDB & MinIO

Option A: Docker (Recommended - Easiest) 🐳

# Uruchom MongoDB + MinIO z Docker Compose
docker-compose up -d

# Lub użyj skryptu PowerShell
.\start-mongodb.ps1

Usługi będą dostępne:

• MongoDB: localhost:27017
• Mongo Express (MongoDB UI): http://localhost:8081
• MinIO S3 API: http://localhost:9000
• MinIO Console (Web UI): http://localhost:9001 (login: skillpath / skillpath123)

📖 Zobacz DOCKER_MONGODB.md dla szczegółowej dokumentacji Docker.

Option B: Local MongoDB Installation

Make sure MongoDB is running locally or you have a connection string to MongoDB Atlas.

# Windows: MongoDB should be running as a service
# macOS: brew services start mongodb-community
# Linux: sudo systemctl start mongodb

Option C: MongoDB Atlas (Cloud)

Użyj darmowego tier MongoDB Atlas i zaktualizuj MONGODB_URI w .env.local.

5. Run the development server

npm run dev

Open http://localhost:3000 to see the application.

📚 Documentation

• DOCKER_MONGODB.md - Docker setup for MongoDB (Quick Start!)
• AUTHENTICATION_README.md - Complete authentication system documentation
• OAUTH_SETUP.md - OAuth providers configuration guide
• REFACTORING_SUMMARY.md - Code refactoring analysis
• DEVELOPER_GUIDE.md - Quick reference for utilities

🏗️ Project Structure

src/
├── app/
│   ├── api/
│   │   ├── auth/[...nextauth]/ # NextAuth API routes
│   │   └── register/           # User registration endpoint
│   ├── login/                  # Login/Register page
│   ├── profile/                # User profile page (protected)
│   ├── admin/                  # Admin dashboard (admin only)
│   └── layout.tsx              # Root layout with SessionProvider
├── components/
│   ├── ui/                     # shadcn/ui components
│   ├── header.tsx              # Navigation header
│   └── sign-out-button.tsx     # Sign out component
├── lib/
│   ├── constants.ts            # ✨ Centralized constants
│   ├── validation.ts           # ✨ Form validation
│   ├── user-service.ts         # ✨ Database operations
│   ├── format-utils.ts         # ✨ Formatting utilities
│   ├── auth-utils.ts           # ✨ Auth helpers
│   ├── mongodb.ts              # MongoDB connection
│   └── utils.ts                # General utilities
├── hooks/
│   └── use-auth.ts             # ✨ Authentication hook
├── types/
│   └── next-auth.d.ts          # NextAuth type extensions
└── auth.ts                     # NextAuth configuration

✨ = Refactored utilities (see REFACTORING_SUMMARY.md)

🔐 Authentication

Available Routes

• / - Public landing page
• /login - Login/Register page (redirects if authenticated)
• /profile - User profile (requires authentication)
• /admin - Admin dashboard (requires administrator role)

User Roles

• user - Default role for new users
• moderator - Moderator privileges
• administrator - Full admin access

Creating an Administrator

After registration, manually update the user's role in MongoDB:

use skillpath
db.users.updateOne(
  { email: "admin@example.com" },
  { $set: { role: "administrator" } }
)

🎨 UI Components

This project uses shadcn/ui components:

• Avatar
• Badge
• Button
• Card
• Input
• Label

All components follow the design system defined in globals.css with custom color schemes.

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• Authentication: NextAuth.js v5
• Database: MongoDB
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Animations: Framer Motion
• Icons: Lucide React
• Language: TypeScript

🔒 Security Features

• ✅ Password hashing with bcrypt (12 rounds)
• ✅ JWT tokens stored in HTTP-only cookies
• ✅ CSRF protection via NextAuth
• ✅ Server-side role verification on protected pages
• ✅ Server-side authentication checks (no client-side only protection)
• ✅ OAuth with trusted providers

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables in Vercel dashboard
4. Update NEXTAUTH_URL to your production URL
5. Update OAuth callback URLs to production URLs

MongoDB Atlas (Production Database)

1. Create a MongoDB Atlas cluster
2. Get connection string
3. Update MONGODB_URI in environment variables
4. Whitelist Vercel IP addresses

🐛 Troubleshooting

See AUTHENTICATION_README.md for common issues and solutions.

📝 License

This project is for educational purposes.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• NextAuth.js Documentation - authentication library docs.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!