🎓 E-Learning Classroom - Flutter Frontend

A comprehensive e-learning platform built with Flutter for web, featuring real-time messaging, course management, assignments, quizzes, and analytics.

🎯 Features

🔐 Secure Authentication - JWT-based auth with token refresh
🌐 Real-time Updates - WebSocket integration for live updates
🎨 Dark/Light Mode - Theme switching support
🔔 Notifications - Real-time notifications for important events
📁 File Management - Upload and manage course materials
🤖 AI Chatbot - AI-powered assistance for students and instructors

For Students

📚 Course Enrollment - Browse and enroll in courses
📝 Assignments - Submit assignments with file uploads
🎯 Quizzes - Take quizzes with instant feedback
💬 Real-time Chat - Message instructors in real-time
📊 Progress Tracking - View grades and performance
📱 Responsive Design - Works on desktop and mobile browsers

For Instructors

👨‍🏫 Course Management - Create and manage courses
📋 Assignment Creation - Create assignments with deadlines
🎓 Quiz Builder - Build quizzes with multiple question types
📊 Analytics Dashboard - Track student performance
💬 Student Communication - Chat with students
📈 Grade Management - Grade submissions and provide feedback

Core Features (36/36)

Authentication & User Management

✅ User registration (student/instructor)
✅ Login with JWT authentication
✅ Profile management with avatar upload
✅ Role-based access control (RBAC)

Course Management

✅ Create, edit, delete courses
✅ Course enrollment system
✅ Upload/download course materials
✅ Course announcements
✅ Course groups

Assignment System

✅ Create assignments with deadlines
✅ Submit assignments with file upload
✅ Grading system
✅ View submission history
✅ Late submission tracking

Quiz System

✅ Create quizzes with multiple question types
✅ Multiple choice, true/false, short answer
✅ Take quizzes with timer
✅ Auto-grading
✅ Quiz statistics and analytics
✅ Question bank management

Real-time Features

✅ WebSocket-based chat system
✅ Real-time notifications
✅ Online/offline status
✅ Typing indicators
✅ Message read receipts

Analytics & Reports

✅ Student performance dashboard
✅ Course enrollment statistics
✅ Quiz performance charts
✅ Grade distribution analysis
✅ Activity tracking

File Management

✅ Upload files (PDF, images, documents)
✅ Download files
✅ File preview
✅ File size validation

UI/UX

✅ Responsive design (mobile, tablet, desktop)
✅ Dark/Light theme toggle
✅ Smooth animations
✅ Loading states
✅ Error handling

Bonus Features (6+)

AI Question Generator
- Generate quiz questions from text content
- Support for multiple question types
- CSV export functionality
Real-time Chat with WebSocket
- Instant messaging
- Online status indicators
- Typing indicators
- Message history
Advanced Analytics
- Interactive charts (FL Chart)
- Student activity tracking
- Quiz difficulty analysis
- Performance trends
Progressive Web App (PWA)
- Installable on desktop and mobile
- Offline capability
- App-like experience
Dark Mode
- System-wide theme switching
- Persistent theme preference
- Smooth transitions
Fully Responsive Design
- Optimized for all screen sizes
- Adaptive layouts
- Touch-friendly interface

🛠️ Tech Stack

Frontend

Framework: Flutter 3.35.1
Language: Dart 3.9.0
State Management: Provider pattern
Routing: go_router
HTTP Client: http package
WebSocket: socket_io_client
Charts: fl_chart
Storage: flutter_secure_storage

Backend

Framework: NestJS
Database: PostgreSQL
Authentication: JWT
Real-time: Socket.IO
File Storage: Local filesystem

Deployment

Frontend: Firebase Hosting
Backend: elearningspace.online
CI/CD: GitHub Actions

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Flutter SDK (3.0.0 or higher)
```
flutter --version
```
Download from: https://flutter.dev/docs/get-started/install
Git
```
git --version
```
Download from: https://git-scm.com/downloads
Chrome (for web development)
Firebase CLI (for deployment)
```
npm install -g firebase-tools
```

Installation

Clone the repository

git clone https://github.com/thanhnhanzxc/elearning_classroom_firebase.git
cd elearning_classroom_firebase

Install dependencies
```
flutter pub get
```
Configure API endpoint

Open lib/core/constants/api_client.dart and update the backend URL:
```
static const String baseUrl = "https://your-backend-url.com";
```
Run the application

For web (Chrome):
```
flutter run -d chrome
```
For web with custom port:
```
flutter run -d chrome --web-port 63742
```

🏗️ Project Structure

lib/
├── core/
│   ├── config/          # App configuration
│   ├── constants/       # Constants and API client
│   ├── routes/          # Navigation and routing
│   ├── services/        # Core services (WebSocket, etc.)
│   ├── storage/         # Local storage (tokens, etc.)
│   ├── utils/           # Utility functions
│   └── widgets/         # Reusable widgets
├── features/
│   ├── auth/            # Authentication (login, signup)
│   ├── assignments/     # Assignment management
│   ├── chat/            # Real-time messaging
│   ├── courses/         # Course management
│   ├── dashboard/       # Dashboard screens
│   ├── layout/          # App layouts
│   ├── materials/       # Course materials
│   ├── messages/        # Message models and services
│   ├── notifications/   # Notification system
│   ├── profile/         # User profile
│   ├── quizzes/         # Quiz system
│   ├── semesters/       # Semester management
│   ├── submissions/     # Assignment submissions
│   └── users/           # User management
└── main.dart            # App entry point

🔧 Configuration

Environment Setup

Backend API Configuration

Update lib/core/constants/api_client.dart:

// Development
static const String baseUrl = "http://localhost:3000";

// Production
static const String baseUrl = "https://elearningspace.online";

File Storage Configuration

Update the file storage URL in api_client.dart:

static const String fileStorageBaseUrl = "https://your-cdn-url.com";

Firebase Configuration (for deployment)

Install Firebase CLI
```
npm install -g firebase-tools
```
Login to Firebase
```
firebase login
```
Initialize Firebase
```
firebase init hosting
```
- Select your Firebase project
- Set public directory to: build/web
- Configure as single-page app: Yes
- Don't overwrite index.html: No

Deploy to Firebase

flutter build web --release
firebase deploy --only hosting

Bonus Point (AI for Elearning System using OpenAI API key)

🔥 Deploy Firebase Cloud Functions

If the project has been cleaned before submission (the node_modules folder inside functions/ has been removed), the instructor must reinstall dependencies and redeploy Cloud Functions:

cd functions
npm install
firebase deploy --only functions

These Cloud Functions provide AI-powered features such as interactive AI chat and automatic quiz question generation.

When you use automatic quiz question generation(OOP Question Creation Content). This is content for AI : " Object-Oriented Programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data and code. The four main principles of OOP are: Encapsulation, Inheritance, Polymorphism, and Abstraction. "

🛠️ Development

Running in Development Mode

# Run on Chrome
flutter run -d chrome

# Run with hot reload
flutter run -d chrome --hot

# Run on specific port
flutter run -d chrome --web-port 8080

Building for Production

# Build web release
flutter build web --release

# Build with optimizations
flutter build web --release --web-renderer html

# Build with canvas renderer (better performance)
flutter build web --release --web-renderer canvaskit

Code Quality

# Analyze code
flutter analyze

# Format code
flutter format .

# Run tests
flutter test

📦 Dependencies

Main Dependencies

flutter_secure_storage - Secure token storage
go_router - Navigation and routing
http - HTTP client for API calls
socket_io_client - WebSocket real-time communication
file_picker - File upload functionality
fl_chart - Charts and analytics
intl - Internationalization and date formatting

Dev Dependencies

flutter_lints - Linting rules
flutter_test - Testing framework

See pubspec.yaml for complete list of dependencies.

🔐 Authentication

The app uses JWT-based authentication with automatic token refresh:

Login - User enters credentials
Token Storage - Access and refresh tokens stored securely
Auto Refresh - Tokens automatically refreshed before expiration
Logout - Tokens cleared and user redirected to login

Token Management

Access tokens stored in flutter_secure_storage
Automatic refresh 5 minutes before expiration
WebSocket reconnection on token refresh

🌐 API Integration

REST API

All API calls go through ApiClient class:

// GET request
final response = await ApiClient.get('/courses');

// POST request
final response = await ApiClient.post('/assignments', body: data);

// File upload
final response = await ApiClient.postMultipart(
  '/files/upload',
  fields: {'type': 'material'},
  platformFiles: files,
);

WebSocket

Real-time features use Socket.IO:

// Connect
await WebSocketService().connect();

// Send message
await WebSocketService().sendMessage(
  receiverId: userId,
  content: message,
);

// Listen for messages
WebSocketService().messageStream.listen((message) {
  // Handle incoming message
});

🎨 Theming

The app supports light and dark themes:

// Toggle theme
MyApp.of(context)?.toggleTheme();

// Current theme
final isDark = Theme.of(context).brightness == Brightness.dark;

📱 Responsive Design

The app adapts to different screen sizes:

Desktop (>900px) - Sidebar navigation
Tablet (600-900px) - Drawer navigation
Mobile (<600px) - Bottom navigation

🚢 Deployment

Firebase Hosting

Build the app
```
flutter build web --release
```
Deploy to Firebase
```
firebase deploy --only hosting
```
Access your app
```
https://your-project-id.web.app
```

Custom Domain

Add custom domain in Firebase Console
Update DNS records
Wait for SSL certificate provisioning

🐛 Troubleshooting

Common Issues

Issue: "Failed to load network image"

Check CORS configuration on backend
Verify file storage URL is correct

Issue: "WebSocket connection failed"

Ensure backend WebSocket server is running
Check if JWT token is valid
Verify CORS settings allow WebSocket connections

Issue: "Token expired"

Token refresh should happen automatically
If not, logout and login again

Issue: "Build fails on web"

Clear build cache: flutter clean
Get dependencies: flutter pub get
Rebuild: flutter build web --release

👥 Contributors

Nguyen Thanh Nhan - 522H0051 - Initial work and development
Dang Thanh Nhan - 522H0006 - Initial work and development

🔗 Links

Live Demo: https://elearning-classroom-28e44.web.app
Backend API: https://elearningspace.online
Repository: https://github.com/nhandang02/elearning-classroom

Built with ❤️ using Flutter

Last Updated: December 5, 2025
Version: 1.0.0
Status: Production Ready ✅

Name		Name	Last commit message	Last commit date
Latest commit History 81 Commits
android		android
docs		docs
functions		functions
ios		ios
lib		lib
linux		linux
macos		macos
public		public
test		test
web		web
windows		windows
.gitignore		.gitignore
README.md		README.md
analysis_options.yaml		analysis_options.yaml
devtools_options.yaml		devtools_options.yaml
example-question-import.csv		example-question-import.csv
firebase.json		firebase.json
pubspec.lock		pubspec.lock
pubspec.yaml		pubspec.yaml

nhandang02/elearning-classroom

Folders and files

Latest commit

History

Repository files navigation