354 lines
No EOL
9.1 KiB
Markdown
354 lines
No EOL
9.1 KiB
Markdown
# E-Learning System - Technical Architecture & Design Guide
|
|
|
|
## 1. System Architecture Overview
|
|
|
|
### Technology Stack
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Frontend Layer │
|
|
│ Nuxt 3 + Quasar + Tailwind CSS + TypeScript │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
↓ HTTP/REST API
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Backend Layer │
|
|
│ Node.js + Express + Prisma │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
↓ SQL Queries
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Database Layer │
|
|
│ PostgreSQL 15+ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 2. Frontend Architecture
|
|
|
|
### 2.1 Core Technologies
|
|
|
|
**Nuxt 3 (Vue 3)**
|
|
- SSR/SSG capabilities for better SEO
|
|
- Auto-imports for components and composables
|
|
- File-based routing
|
|
- Built-in state management
|
|
|
|
**Quasar Framework**
|
|
- Rich component library (250+ components)
|
|
- Responsive design out of the box
|
|
- Cross-platform support (Web, Mobile, Desktop)
|
|
- Material Design compliance
|
|
|
|
**Tailwind CSS**
|
|
- Utility-first CSS framework
|
|
- Custom design system
|
|
- Dark mode support
|
|
- Responsive design utilities
|
|
|
|
### 2.2 Project Structure
|
|
|
|
```
|
|
frontend/
|
|
├── assets/
|
|
│ ├── css/
|
|
│ │ └── main.css
|
|
│ └── images/
|
|
├── components/
|
|
│ ├── common/
|
|
│ │ ├── AppHeader.vue
|
|
│ │ ├── AppSidebar.vue
|
|
│ │ └── AppFooter.vue
|
|
│ ├── course/
|
|
│ │ ├── CourseCard.vue
|
|
│ │ ├── CourseList.vue
|
|
│ │ └── CourseDetail.vue
|
|
│ ├── lesson/
|
|
│ │ ├── LessonPlayer.vue
|
|
│ │ └── LessonProgress.vue
|
|
│ └── user/
|
|
│ ├── UserProfile.vue
|
|
│ └── UserAvatar.vue
|
|
├── composables/
|
|
│ ├── useAuth.ts
|
|
│ ├── useCourse.ts
|
|
│ └── useNotification.ts
|
|
├── layouts/
|
|
│ ├── default.vue
|
|
│ ├── auth.vue
|
|
│ └── dashboard.vue
|
|
├── pages/
|
|
│ ├── index.vue
|
|
│ ├── login.vue
|
|
│ ├── courses/
|
|
│ │ ├── index.vue
|
|
│ │ └── [id].vue
|
|
│ ├── dashboard/
|
|
│ │ ├── index.vue
|
|
│ │ ├── courses.vue
|
|
│ │ └── assignments.vue
|
|
│ └── admin/
|
|
│ └── index.vue
|
|
├── plugins/
|
|
│ ├── quasar.ts
|
|
│ └── axios.ts
|
|
├── stores/
|
|
│ ├── auth.ts
|
|
│ ├── course.ts
|
|
│ └── user.ts
|
|
├── middleware/
|
|
│ ├── auth.ts
|
|
│ └── role.ts
|
|
└── nuxt.config.ts
|
|
```
|
|
|
|
### 2.3 Key Configuration Files
|
|
|
|
**nuxt.config.ts**
|
|
```typescript
|
|
export default defineNuxtConfig({
|
|
modules: [
|
|
'nuxt-quasar-ui',
|
|
'@pinia/nuxt',
|
|
'@nuxtjs/tailwindcss'
|
|
],
|
|
|
|
quasar: {
|
|
plugins: ['Notify', 'Dialog', 'Loading'],
|
|
config: {
|
|
brand: {
|
|
primary: '#3B82F6',
|
|
secondary: '#10B981',
|
|
accent: '#F59E0B'
|
|
}
|
|
}
|
|
},
|
|
|
|
runtimeConfig: {
|
|
public: {
|
|
apiBase: process.env.API_BASE_URL || 'http://localhost:3001/api'
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
**tailwind.config.js**
|
|
```javascript
|
|
module.exports = {
|
|
content: [
|
|
'./components/**/*.{vue,js,ts}',
|
|
'./layouts/**/*.vue',
|
|
'./pages/**/*.vue',
|
|
'./plugins/**/*.{js,ts}'
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3B82F6',
|
|
secondary: '#10B981',
|
|
accent: '#F59E0B'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 3. Backend Architecture
|
|
|
|
### 3.1 Core Technologies
|
|
|
|
**Node.js + Express**
|
|
- RESTful API design
|
|
- JWT authentication
|
|
- Middleware for validation
|
|
- File upload handling
|
|
|
|
**Prisma ORM**
|
|
- Type-safe database queries
|
|
- Auto-generated migrations
|
|
- Database introspection
|
|
- Relation handling
|
|
|
|
**PostgreSQL**
|
|
- Relational data integrity
|
|
- JSONB support for flexibility
|
|
- Full-text search
|
|
- Performance optimization
|
|
|
|
### 3.2 Project Structure
|
|
|
|
```
|
|
backend/
|
|
├── prisma/
|
|
│ ├── schema.prisma
|
|
│ └── migrations/
|
|
├── src/
|
|
│ ├── config/
|
|
│ │ ├── database.ts
|
|
│ │ └── jwt.ts
|
|
│ ├── middleware/
|
|
│ │ ├── auth.ts
|
|
│ │ ├── validation.ts
|
|
│ │ └── errorHandler.ts
|
|
│ ├── modules/
|
|
│ │ ├── auth/
|
|
│ │ │ ├── auth.controller.ts
|
|
│ │ │ ├── auth.service.ts
|
|
│ │ │ └── auth.routes.ts
|
|
│ │ ├── users/
|
|
│ │ │ ├── users.controller.ts
|
|
│ │ │ ├── users.service.ts
|
|
│ │ │ └── users.routes.ts
|
|
│ │ ├── courses/
|
|
│ │ │ ├── courses.controller.ts
|
|
│ │ │ ├── courses.service.ts
|
|
│ │ │ └── courses.routes.ts
|
|
│ │ ├── lessons/
|
|
│ │ ├── assignments/
|
|
│ │ ├── quizzes/
|
|
│ │ └── notifications/
|
|
│ ├── utils/
|
|
│ │ ├── logger.ts
|
|
│ │ ├── validator.ts
|
|
│ │ └── fileUpload.ts
|
|
│ ├── types/
|
|
│ │ └── index.ts
|
|
│ ├── app.ts
|
|
│ └── server.ts
|
|
├── tests/
|
|
├── package.json
|
|
└── tsconfig.json
|
|
```
|
|
---
|
|
|
|
## 4. Design System & UI Theme
|
|
|
|
### 4.1 Modern Design Principles
|
|
|
|
**Design Philosophy:**
|
|
- **Clean & Minimal** - Focus on content, remove unnecessary elements
|
|
- **Modern & Professional** - Contemporary look suitable for global audience
|
|
- **Accessible** - WCAG 2.1 AA compliant
|
|
- **Consistent** - Uniform spacing, typography, and interactions
|
|
- **Responsive** - Mobile-first approach
|
|
|
|
### 4.2 Color Palette
|
|
|
|
**Primary Colors**
|
|
```css
|
|
--primary-50: #EFF6FF;
|
|
--primary-100: #DBEAFE;
|
|
--primary-200: #BFDBFE;
|
|
--primary-300: #93C5FD;
|
|
--primary-400: #60A5FA;
|
|
--primary-500: #3B82F6; /* Main primary */
|
|
--primary-600: #2563EB;
|
|
--primary-700: #1D4ED8;
|
|
--primary-800: #1E40AF;
|
|
--primary-900: #1E3A8A;
|
|
```
|
|
|
|
**Secondary Colors**
|
|
```css
|
|
--secondary-500: #10B981; /* Success/Positive */
|
|
--accent-500: #F59E0B; /* Warning/Attention */
|
|
--error-500: #EF4444; /* Error/Danger */
|
|
```
|
|
|
|
**Neutral Colors**
|
|
```css
|
|
--gray-50: #F9FAFB;
|
|
--gray-100: #F3F4F6;
|
|
--gray-200: #E5E7EB;
|
|
--gray-300: #D1D5DB;
|
|
--gray-400: #9CA3AF;
|
|
--gray-500: #6B7280;
|
|
--gray-600: #4B5563;
|
|
--gray-700: #374151;
|
|
--gray-800: #1F2937;
|
|
--gray-900: #111827;
|
|
```
|
|
|
|
**Dark Mode**
|
|
```css
|
|
--dark-bg-primary: #0F172A;
|
|
--dark-bg-secondary: #1E293B;
|
|
--dark-bg-tertiary: #334155;
|
|
--dark-text-primary: #F1F5F9;
|
|
--dark-text-secondary: #CBD5E1;
|
|
```
|
|
|
|
### 4.3 Typography
|
|
|
|
**Font Family**
|
|
```css
|
|
/* Modern, clean, and widely supported */
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
|
|
|
/* Thai font support */
|
|
font-family: 'Prompt', 'Sarabun', 'Inter', sans-serif;
|
|
```
|
|
|
|
**Font Scale**
|
|
```css
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-lg: 1.125rem; /* 18px */
|
|
--text-xl: 1.25rem; /* 20px */
|
|
--text-2xl: 1.5rem; /* 24px */
|
|
--text-3xl: 1.875rem; /* 30px */
|
|
--text-4xl: 2.25rem; /* 36px */
|
|
--text-5xl: 3rem; /* 48px */
|
|
```
|
|
|
|
**Font Weights**
|
|
```css
|
|
--font-normal: 400;
|
|
--font-medium: 500;
|
|
--font-semibold: 600;
|
|
--font-bold: 700;
|
|
```
|
|
|
|
### 4.4 Spacing System
|
|
|
|
**8px base unit system**
|
|
```css
|
|
--space-1: 0.25rem; /* 4px */
|
|
--space-2: 0.5rem; /* 8px */
|
|
--space-3: 0.75rem; /* 12px */
|
|
--space-4: 1rem; /* 16px */
|
|
--space-5: 1.25rem; /* 20px */
|
|
--space-6: 1.5rem; /* 24px */
|
|
--space-8: 2rem; /* 32px */
|
|
--space-10: 2.5rem; /* 40px */
|
|
--space-12: 3rem; /* 48px */
|
|
--space-16: 4rem; /* 64px */
|
|
--space-20: 5rem; /* 80px */
|
|
```
|
|
|
|
### 4.5 Border Radius
|
|
|
|
```css
|
|
--radius-sm: 0.25rem; /* 4px */
|
|
--radius-md: 0.5rem; /* 8px */
|
|
--radius-lg: 0.75rem; /* 12px */
|
|
--radius-xl: 1rem; /* 16px */
|
|
--radius-2xl: 1.5rem; /* 24px */
|
|
--radius-full: 9999px; /* Circle */
|
|
```
|
|
|
|
### 4.6 Shadows
|
|
|
|
```css
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
|
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
```
|
|
|
|
**Version:** 1.0
|
|
**Last Updated:** December 2024 |