🎓 SkillSphere

A modern online learning platform where learners can explore courses, search by title, discover trending content, and manage their learning experience through a secure and responsive web application.

---

🌐 Live Website

🔗 Live Site: skill-sphere-munaimpro.vercel.app

---

📂 GitHub Repository

🔗 Repository: github.com/munaimpro/skill-sphere

---

🚀 Getting Started

Clone Repository

git clone https://github.com/munaimpro/programming-hero-assignment-8.git

Install Dependencies

npm install

Run Development Server

npm run dev

Open:

http://localhost:3000

in your browser.

---

🎯 Project Overview

SkillSphere is a modern online learning platform designed to help learners discover high-quality courses through an intuitive and engaging interface.

Users can browse courses, search by title, explore trending and top-rated courses, securely authenticate, and manage their personal profiles.

---

👥 User Features

📚 Learners Can

• Browse All Courses
• Search Courses
• View Course Details
• Explore Trending Courses
• Discover Top Rated Courses
• Manage Profile Information

---

✨ Core Features

🔐 Authentication & Authorization

Authentication

• Email & Password Login
• Google Authentication
• Better Auth Integration
• Persistent User Session
• Secure Authentication Flow

Authorization

• Protected Course Details
• Protected Profile Pages
• Callback URL Redirection
• Authenticated User Access

---

📚 Course Management

Users can:

• Browse Available Courses
• Search Courses by Title
• View Detailed Course Information
• Explore Course Curriculum

Course Information

• Course Title
• Instructor
• Rating
• Category
• Course Description
• Curriculum
• Duration

---

🌟 Course Discovery

Features include:

• Search by Course Title
• Trending Courses
• Top Rated Courses
• Dynamic Course Listings

---

👤 User Profile

Users can:

• View Profile
• Update Name
• Update Profile Image
• Maintain Login Session

---

🌐 Public Pages

Home Page

• Hero Banner
• Trending Courses
• Top Courses
• Modern Responsive Design

Courses Page

Features include:

• Browse All Courses
• Search Functionality
• Dynamic Course Cards

Course Details

Displays:

• Complete Course Information
• Curriculum
• Instructor Details
• Course Rating

---

🔄 System Flow

User Registration
        ↓
Authentication
        ↓
Browse Courses
        ↓
Search Courses
        ↓
View Course Details
        ↓
Manage Profile

---

🛡️ Security Features

• Better Auth Authentication
• Protected Routes
• Secure Session Management
• Callback URL Protection
• Environment Variable Protection

---

⚙️ Key Functionalities

• Next.js App Router
• Server & Client Component Architecture
• Dynamic Routing
• Search Functionality
• Responsive UI
• Framer Motion Animations
• Loading States
• Toast Notifications

---

🛠️ Tech Stack

Frontend

• Next.js
• React
• Tailwind CSS
• DaisyUI
• Framer Motion
• React Hook Form
• React Toastify
• Lucide React

Authentication

• Better Auth
• Google OAuth

---

📦 NPM Packages Used

{
  "better-auth": "...",
  "framer-motion": "...",
  "lucide-react": "...",
  "next": "...",
  "react": "...",
  "react-hook-form": "...",
  "react-toastify": "...",
  "tailwindcss": "...",
  "daisyui": "..."
}

---

🎯 Features Implemented

✅ Authentication System

✅ Google Login

✅ Protected Routes

✅ Course Search

✅ Trending Courses

✅ Top Rated Courses

✅ Course Details

✅ Profile Management

✅ Profile Update

✅ Responsive Design

✅ Framer Motion Animations

✅ Loading States

✅ Toast Notifications

---

👨‍💻 Developed By

Munaim Khan

M.Sc. in Computer Science & Engineering

Full Stack Web Developer