📚 WT Drive

Interactive Web Technologies Learning Platform

Welcome to WT Drive, an interactive learning portal specifically developed to help students learn the Web Technologies subject.

This platform centralizes educational resources, providing both a dynamic code execution sandbox for hands-on learning and a repository of cloud materials.

---

🎥 Quick Demo

A quick visual walkthrough of the platform's core features: Learning Track and Cloud Resources.

Home Page

Learning Page

Learning Page With Interactive SandBoxes

Cloud Resources

---

🛠️ Tech Stack & Key Technologies

Frontend

• HTML5 & Vanilla CSS3: For semantic structure and custom glassmorphic aesthetics.
• Vanilla JavaScript (ES6+): Handles dynamic DOM manipulation and asynchronous API fetching (app.js) without heavy frameworks.
• Bootstrap 5: Used for rapid, responsive grid layouts.

Backend

• Node.js & Express.js: Powers the backend API routing (/api/units, /api/run-code) and serves the static frontend assets.
• SQLite (better-sqlite3): A serverless SQL database used to store the hierarchical curriculum structure (Units > Topics > Questions).

Deployment

• Render Blueprint (render.yaml): Automated Configuration as Code (IaC) for seamless cloud deployment.

---

🏗️ Architecture & Flowcharts

1. Curriculum Data Delivery

graph TD;
    A[Client Browser] -->|Requests /api/all| B(Express Server);
    B -->|Queries| C[(SQLite learning.db)];
    C -->|Returns Rows| B;
    B -->|Parses to JSON| A;
    A -->|Vanilla JS Renders UI| D[Interactive Accordions];

Loading

2. Code Sandbox Execution Flow

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    User->>Frontend: Types Code & Clicks 'Run'
    Frontend->>Backend: POST /api/run-code { code, lang }
    alt is HTML/CSS
        Backend-->>Frontend: Returns Raw Code
        Frontend->>Frontend: Injects into Sandboxed Iframe
    else is JavaScript
        Backend->>Backend: Executes in Isolated 'new Function()'
        Backend-->>Frontend: { output, error }
    else is PHP
        Backend->>Backend: Regex Translation to JS -> Executes
        Backend-->>Frontend: { output, error }
    end
    Frontend-->>User: Displays Output in UI

Loading

---

⚙️ How It Works (Key Concepts)

1. Modular Architecture: The codebase separates concerns across src/routes, src/controllers, and src/config to keep the logic scalable and production-ready.
2. In-Browser Execution Engine: The platform features a custom lightweight sandbox. It evaluates user-submitted JavaScript by securely intercepting console.log streams, and elegantly handles HTML/CSS by injecting it into an auto-resizing iframe.
3. Database Initialization: The SQLite database is dynamically populated on the first boot using a raw seed_data.json file.
4. Static & Dynamic Hybrid: While the HTML shells (index.html, resources.html) are served statically, the Learn page relies on asynchronous fetch() calls to populate a dynamic curriculum tree.

---

🤝 Contributing

If you want to contribute to this project or develop new features, feel free to clone the repository and raise a Pull Request!

When submitting a Pull Request, please make sure to include your details and a clear description of the changes you've made directly in the request. All contributions are highly appreciated!