Skip to content

README.md

Latest commit

 

History

History
277 lines (182 loc) · 3.9 KB

README.md

File metadata and controls

277 lines (182 loc) · 3.9 KB
Raw

🎓 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