🎓 Skill Spark — Online Learning & Management Platform

Skill Spark is a modern, high-performance, and feature-rich Web Application built on the MERN Stack (MongoDB, Express, React, Node.js). The platform is designed to provide a seamless educational ecosystem for Students, Teachers, and Administrators. It features secure JWT-based role authorization, dynamic learning dashboards, Stripe payment gateway integration, and real-time interactive evaluations.

---

🌐 Live Application & Credentials

• Live Demo: https://skill-sparkx.netlify.app
• Demo Administrator Account:

  Role	Email	Password
  Administrator	admin@hero.com	admin1234

---

🛠️ Tech Stack & Badges

---

---

🌟 Key Features

🔒 1. Secure Authentication & Authorization

• Hybrid Authentication: Google Sign-In and traditional Email/Password credentials powered by Firebase Authentication.
• JWT Security: JSON Web Token based secure state transmission and private/protected route management.
• Role-Based Access Control (RBAC): Customized middleware ensuring users access only their authorized views.

🎓 2. Specialized User Dashboards

• Admin Dashboard: Control center to approve/reject teacher applications, manage course listings, verify users, and view platform-wide progress.
• Teacher Dashboard: Course creation suite. Teachers can apply to teach, create new classes, set course structures, post assignments, and track submission progress.
• Student Dashboard: Enrolled course viewer. Students can access class materials, submit assignments, pay for new courses, and submit course reviews.

💳 3. Payment Gateway Integration

• Stripe SDK: Fully integrated secure payment checkouts.
• Real-time Enrollment: Instantly updates student enrollment status and updates transaction ledgers upon successful checkout.

✍️ 4. Teaching Evaluation Report (TER) & Reviews

• Interactive Evaluation: Students can review class content and provide rating feedback (out of 5 stars).
• Feedback Display: Aggregated reviews display dynamically on the home page and individual course detail sections.

⚡ 5. State Management & API Optimization

• React Query (TanStack Query): Robust server-state caching, automatic background revalidation, and mutation management for instant interface updates.
• Axios Interceptors: Streamlined API configuration automatically injecting JWT authorization headers to backend endpoints.

---

🏗️ Architecture & Packages

System Tech Stack

• Frontend Library: React (Vite-powered environment)
• Styling & Theme: TailwindCSS, DaisyUI (Glassmorphism & premium UI components), HeadlessUI
• Animations: Lottie React, Swiper.js, React Fast Marquee
• Icons: React Icons

NPM Dependencies Table

Package	Purpose / Description
@tanstack/react-query	Server-state synchronization, query caching & pagination
axios	Promise-based HTTP client for browser calls
firebase	Client-side user login and third-party login providers
stripe / @stripe/stripe-js	Secure client-side credit card checkout system
react-router	Client-side routing, protected layouts, and query search parameters
react-hook-form	Highly performant form management and validation
sweetalert2 & react-hot-toast	Premium popup dialogues, notifications, and success alerts
react-simple-star-rating	High-fidelity interactive rating stars

---

⚙️ Installation & Setup

Follow these steps to run the complete Skill Spark platform on your local machine.

💻 Prerequisites

• Node.js (v18.x or above recommended)
• npm (v9.x or above)
• MongoDB (Local instance or Atlas cloud account)

---

1. Client Setup (Frontend)

1. Clone the Repository:

   git clone https://github.com/noboKumar/skill-spark-client.git
   cd skill-spark-client

2. Install Project Dependencies:

   npm install

3. Configure Environment Variables: Create a .env.local file in the root directory:

   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id
   VITE_IMGBB_API_KEY=your_imgbb_api_key
   VITE_API_URL=http://localhost:5000
   VITE_STRIPE_PUBLIC_KEY=your_stripe_publishable_key

4. Launch the Development Server:

   npm run dev

   The local development server will be hosted at http://localhost:5173.

---

2. Server Setup (Backend)

1. Clone the Server Repository:

   git clone https://github.com/noboKumar/skill-spark-server.git
   cd skill-spark-server

2. Install Backend Dependencies:

   npm install

3. Configure Environment Variables: Create a .env file in the backend root directory:

   PORT=5000
   MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/skillspark
   JWT_SECRET=your_jwt_signing_secret_key
   STRIPE_SECRET_KEY=your_stripe_secret_key

4. Launch the Server:

   npm start

   For hot-reloading development server:

   npm run dev

   The backend API will run at http://localhost:5000.

---

🎨 Design Decisions & Best Practices

1. Modular Routing: Separate route rules for Public, Private, Student, Teacher, and Administrator layouts.
2. Optimistic UI Updates: Instant user action responses using TanStack Query mutations to avoid unnecessary loader states.
3. Responsive Design System: Flexible CSS grid structures designed with Mobile-First breakpoints.
4. Data Validation: Client-side forms schema validated before API transmission via react-hook-form.

---

📄 License & Status

This project is open-source under the MIT License.

• Developed & Maintained by Nobo Kumar.
• For support or feedback, open an issue or reach out directly via GitHub.