SPECTRE-HUB

Learn Web Development

📖 Table of Contents

• About the Project
• Why Spectre-Hub
• Features
• Tech Stack
• Architecture
• Application Workflow
• AI Review Flow
• Project Structure
• MongoDB Collections
• Backend Responsibilities
• Middleware & API Access
• Why MongoDB
• Future Enhancements
• Back to Top

---

About the Project

Spectre-Hub is an AI-powered web development learning platform designed to teach modern web development — from HTML to Deployment — through an immersive learning experience.

Unlike traditional learning platforms, Spectre-Hub first teaches concepts with detailed explanations, syntax, examples, and quizzes before assessing the learner with hands-on coding challenges. Every submitted solution is reviewed by Gemini AI , providing personalized feedback, improvements, and suggestions.

The platform tracks each learner's progress, allowing them to continue learning seamlessly while building a complete web development roadmap.

🔗 Try the Live Demo →

---

🌟 Why Spectre-Hub

📚 Theory First Every stage begins with complete theory, syntax references, and practical examples before any coding is required.

🧠 AI-Powered Review Submitted code is reviewed by Gemini AI / Grok AI, giving bug detection, best-practice suggestions, and code quality analysis.

📊 Progress Tracking A complete learning history — completed stages, AI review history, and profile progress — all in one place.

---

✨ Features

Category	Details
🔐 Authentication	Firebase Authentication • Email & Password Login • Secure Signup • Persistent User Sessions
🎓 Learning Platform	HTML • CSS • JavaScript • React • Next.js • Node.js • Express.js • MongoDB • Firebase • REST APIs • Deployment
📦 Every Learning Stage Includes	Complete Theory • Syntax Reference • Practical Examples • Interactive Quiz • Coding Assessment • AI Code Review • Personalized Suggestions
🤖 AI Features	Code Review (Gemini AI / Grok AI) • Bug Detection • Best Practice Suggestions • Code Quality Analysis • Learning Feedback
👤 User Features	User Profile • Progress Tracking • Completed Stages • Learning History • AI Review History

---

🧰 Tech Stack

Frontend

Next.js  •  React  •  Tailwind CSS  •  Axios  •  Monaco Editor

Backend

Node.js  •  Express.js

Database

MongoDB  •  Mongoose

Authentication

Firebase Authentication

AI

Gemini API  

---

🏗️ Architecture

graph TD
    A[Frontend - Next.js / React] -->|Axios Requests| B[Backend - Express.js]
    B --> C[(MongoDB - Stages & Progress)]
    B --> D[Gemini AI]
    B --> E[Grok AI]
    A -->|Auth| F[Firebase Authentication]
    F -->|Verified Token| B

    style A fill:#8A2BE2,color:#fff
    style B fill:#4B0082,color:#fff
    style C fill:#2E8B57,color:#fff
    style D fill:#6f42c1,color:#fff
    style E fill:#6f42c1,color:#fff
    style F fill:#FFA500,color:#000

Loading

---

🔄 Application Workflow

flowchart TD
    Start([User Opens Spectre-Hub]) --> LoggedIn{Already Logged In?}
    LoggedIn -- No --> Auth[Signup / Login]
    LoggedIn -- Yes --> Home[Home Page]
    Auth --> FBAuth[Firebase Authentication]
    FBAuth --> Session[User Session Created]
    Session --> Home
    Home --> Select[Select Learning Stage]
    Select --> Request[Frontend Requests Stage]
    Request --> Backend[Express Backend]
    Backend --> DB[(MongoDB)]
    DB --> Content[Return Lesson Content]
    Content --> Display["Frontend Displays:<br/>Theory • Syntax • Examples • Quiz • Code Editor"]
    Display --> Submit[User Submits Code]
    Submit --> Backend2[Express Backend]
    Backend2 --> FetchStage[(Fetch Stage Data - MongoDB)]
    Backend2 --> AIReview[Gemini / Grok Review Code]
    FetchStage --> SaveProgress[Save User Progress]
    AIReview --> SaveProgress
    SaveProgress --> Feedback[Return AI Feedback]
    Feedback --> ShowReview[Display Review]

Loading

---

🧪 AI Review Flow

sequenceDiagram
    participant U as User
    participant F as Frontend
    participant B as Backend (Express)
    participant P as Prompt Builder
    participant AI as Gemini / Grok
    participant DB as MongoDB

    U->>F: Submit Code
    F->>B: Send Code to Backend
    B->>P: Build AI Prompt
    P->>AI: Send Prompt
    AI-->>B: Return AI Feedback
    B->>DB: Save Progress
    B-->>F: Return AI Feedback
    F-->>U: Display Review

Loading

---

📂 Project Structure

Click to expand full folder tree

spectre-hub/
│
├── frontend/                                  # Next.js Frontend
│
│   ├── app/                                   # Application Pages
│   │
│   │   ├── page.js                            # Landing Page / Home
│   │
│   │   ├── login/
│   │   │     └── page.js                      # User Login
│   │
│   │   ├── signup/
│   │   │     └── page.js                      # User Signup
│   │
│   │   ├── profile/
│   │   │     └── page.js                      # User Profile & Progress
│   │
│   │   └── stages/
│   │         └── [slug]/
│   │               └── page.js                # Dynamic Learning Stage
│   │
│   ├── components/                            # Reusable UI Components
│   │
│   │   ├── Navbar.js                          # Navigation Bar
│   │   ├── Footer.js                          # Footer
│   │   ├── Button.js                          # Reusable Button
│   │   ├── Loader.js                          # Loading Spinner
│   │   ├── Card.js                            # Generic Card Component
│   │   ├── Lesson.js                          # Lesson Viewer
│   │   ├── SyntaxBox.js                       # Syntax Display
│   │   ├── ExampleBox.js                      # Code Examples
│   │   ├── Quiz.js                            # Quiz Component
│   │   ├── CodeEditor.js                      # Monaco Code Editor
│   │   ├── AIReview.js                        # AI Review UI
│   │   └── ProgressBar.js                     # User Progress
│   │
│   ├── context/
│   │     └── AuthContext.js                   # Firebase Authentication Context
│   │
│   └── services/
│         ├── api.js                           # Backend API Calls
│         └── firebase.js                      # Firebase Configuration
│
├── backend/                                   # Express Backend
│
│   ├── server.js                              # Backend Entry Point
│   │
│   ├── config/
│   │     ├── db.js                            # MongoDB Connection
│   │     └── ai.js                            # Gemini / Grok Configuration
│   │
│   ├── models/
│   │     ├── Stage.js                         # Learning Stages Schema
│   │     └── Progress.js                      # User Progress Schema
│   │
│   ├── routes/
│   │     ├── stage.js                         # Stage APIs & AI Review
│   │     └── user.js                          # User Profile & Progress APIs
│   │
│   ├── middleware/
│   │     └── firebaseAuth.js                  # Firebase Token Verification
│   │
│   └── utils/
│         └── promptBuilder.js                 # Builds AI Prompt
│
└── README.md

---

🗄️ MongoDB Collections

📘 Stages Stores all learning content. Title Slug Description Theory Syntax Examples Quiz Starter Code Difficulty XP Reward

📗 Progress Stores every user's learning progress. Firebase UID Stage Submitted Code AI Feedback Score Completed Last Attempt

---

⚙️ Backend Responsibilities

📄 stage.js

• Fetching learning stages
• Returning lesson content
• Receiving submitted code
• Calling Gemini/Grok
• Saving progress

📄 user.js

• Returning profile information
• Returning completed stages
• Returning progress history

---

🔒 Middleware & API Access

Firebase Authentication middleware protects private APIs.

graph LR
    subgraph Protected APIs
    A[Profile]
    B[Progress]
    C[Code Submission]
    end

    subgraph Public APIs
    D[View Stages - Optional]
    E[Landing Page]
    end

    F[Firebase Auth Middleware] --> A
    F --> B
    F --> C

Loading

API Type	Endpoints
🔐 Protected	Profile, Progress, Code Submission
🌍 Public	View Stages (Optional), Landing Page

---

🧭 Why MongoDB?

MongoDB stores all application data except authentication.

It stores:

• Learning Stages
• Lesson Content
• Examples
• Quizzes
• User Progress
• AI Feedback
• Submitted Code

Authentication is completely managed by Firebase Authentication, making the backend simpler and more secure.

---

🚀 Future Enhancements

The following are planned ideas and are not yet implemented.

• Boss Battles
• XP System
• Daily Challenges
• Achievements
• AI Mentor
• Dark Mode Themes
• Streak Tracking
• Coding assessment

---

Learn Web Development. Survive the Curriculum.

⬆ Back to Top