Class1Team11_MQTT

QuickAula

A high-performance, lightweight web application for a faster student learning experience, featuring a real-time feedback system powered by MQTT.

This project is a prototype developed for the CUH405CMD Activity Led Learning Project. It addresses performance issues faced by students, particularly those in China, with the official "Aula" learning platform. QuickAula provides an optimized alternative by aggregating key course information into a fast-loading dashboard and integrating a real-time student-teacher feedback channel.

✨ Features

High-Performance Dashboard: A clean, fast, and intuitive single-page application built with Vue.js that aggregates course notifications and materials into a unified interface.
Real-Time Feedback System: Enables students to send instant, topic-based feedback directly to instructors using the MQTT protocol. This fosters a more interactive and responsive learning environment.
Reliable Messaging: Ensures feedback messages are delivered reliably to the instructor's client using MQTT QoS 1 ("at least once" delivery).
AI Assistant: An integrated AI Chatbot, powered by the DeepSeek API, provides students with instant, automated assistance for general queries.
Decoupled Architecture: A modern architecture using a Vue.js frontend, a Python Flask backend, and an MQTT broker for seamless and efficient communication.

🛠️ Tech Stack

Tier	Technology	Description
Frontend	`Vue.js`, `Element Plus`	For building a reactive, fast, and intuitive user interface.
Backend	`Python`, `Flask`	A lightweight microservice to handle API requests and publish MQTT messages.
Real-time Comms	`MQTT` (`paho-mqtt`)	The core protocol for the publish-subscribe feedback system.
MQTT Broker	`HiveMQ Public Broker`	The central message hub that routes feedback from students to teachers.
AI Integration	`DeepSeek API`	The external service used to power the AI Chatbot feature.

🏗️ Project Structure

quickaula/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── Dashboard.vue   # Main dashboard UI
│   │   │   └── AIChat.vue      # AI Chatbot component
│   │   └── ...
│   └── package.json
│
├── backend/
│   ├── feedback.py           # Flask API and MQTT publisher
│   └── requirements.txt
│
└── subscriber/
    └── teacher_client.py     # Python script to receive MQTT messages

🚀 How to Run Locally

Prerequisites

Node.js and npm
Python 3.x and pip

1. Backend Setup

The backend is a Flask server that handles API requests and publishes MQTT messages.

# Navigate to the backend directory
cd backend/

# Install Python dependencies
pip install -r requirements.txt

# Run the Flask server
# It will run on http://127.0.0.1:5000
python feedback.py

*The backend uses Flask-CORS to handle requests from the frontend development server. *

2. Frontend Setup

The frontend is a Vue.js single-page application.

# Navigate to the frontend directory
cd frontend/

# Install npm packages
npm install

# Start the development server
# It will be available at http://localhost:5173 (or another port)
npm run dev

3. Teacher's Client (Subscriber)

To see the real-time feedback system in action, run the subscriber client. This script listens for messages published to the MQTT broker.

# Navigate to the subscriber directory
cd subscriber/

# (Assuming paho-mqtt is installed from the backend requirements)
# Run the client
python teacher_client.py

Now, when you submit feedback through the web interface, the message will appear in the console where this script is running.

📝 Notes & Limitations

This project is a functional proof-of-concept and has the following limitations:

Static Data: Course notifications and materials on the dashboard are currently hardcoded for demonstration purposes. A production version would require a dynamic link to a live database or API.
Public MQTT Broker: The project uses a public HiveMQ broker. This is not secure and does not offer performance guarantees. A private, dedicated MQTT broker is recommended for a real-world application.
No Teacher UI: The subscriber (teacher) side is a simple console script. A complete solution would require a dedicated user interface for teachers.
Development Server: The Flask backend runs on its built-in development server, which is not suitable for production.

🏆 Team Contributions

This project was a collaborative effort by Team 11.

Team Member	Responsibilities
Wu Yiqi	Frontend Development (Vue.js), UI/UX Design, Dashboard component (`Dashboard.vue`), AI Chat component (`AIChat.vue`).
Li Minhao	Frontend Development (Vue.js), Styling (CSS/SCSS), Component Integration, Data structures for course materials.
Lin Yuxuan	Backend Development (Python/Flask), API Design (`/api/feedback`, `/api/call_aichat`), MQTT Publisher Logic.
Wang Zifan	Backend Development (Python/Flask), MQTT Integration (`paho-mqtt`), Subscriber Client Script, System Architecture Design.

CUH405CMD2425FEBJUL/Class1Team11_MQTT

About

Resources

Stars

Watchers

Forks

Releases

Languages