chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

1

Browse source
This commit is contained in:
supalerk-ar66 2026-01-13 10:50:42 +07:00
parent 71f0676a62
commit b1aa414190
1 changed files with 87 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

182
docs/elearning_architecture.md
View file

@ -28,21 +28,18 @@
### 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
@ -107,50 +104,52 @@ frontend/
### 2.3 Key Configuration Files
**nuxt.config.ts**
```typescript
export default defineNuxtConfig({
modules: ["nuxt-quasar-ui", "@pinia/nuxt", "@nuxtjs/tailwindcss"],
modules: [
'nuxt-quasar-ui',
'@pinia/nuxt',
'@nuxtjs/tailwindcss'
],
quasar: {
plugins: ["Notify", "Dialog", "Loading"],
plugins: ['Notify', 'Dialog', 'Loading'],
config: {
brand: {
primary: "#3B82F6",
secondary: "#10B981",
accent: "#F59E0B",
},
},
primary: '#3B82F6',
secondary: '#10B981',
accent: '#F59E0B'
}
}
},
runtimeConfig: {
public: {
apiBase: process.env.API_BASE_URL || "http://localhost:3001/api",
},
},
});
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}",
'./components/**/*.{vue,js,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}'
],
theme: {
extend: {
colors: {
primary: "#3B82F6",
secondary: "#10B981",
accent: "#F59E0B",
},
},
},
};
primary: '#3B82F6',
secondary: '#10B981',
accent: '#F59E0B'
}
}
}
}
```
---
@ -160,21 +159,18 @@ module.exports = {
### 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
@ -224,7 +220,6 @@ backend/
├── package.json
└── tsconfig.json
```
---
## 4. Design System & UI Theme
@ -232,7 +227,6 @@ backend/
### 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
@ -242,82 +236,75 @@ backend/
### 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;
--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 */
--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-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-800: #1F2937;
--gray-900: #111827;
```
**Dark Mode**
```css
--dark-bg-primary: #0f172a;
--dark-bg-secondary: #1e293b;
--dark-bg-primary: #0F172A;
--dark-bg-secondary: #1E293B;
--dark-bg-tertiary: #334155;
--dark-text-primary: #f1f5f9;
--dark-text-secondary: #cbd5e1;
--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;
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-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 */
--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;
@ -328,39 +315,38 @@ font-family: "Prompt", "Sarabun", "Inter", sans-serif;
### 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 */
--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 */
--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-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);
```