1

docs/elearning_architecture.md

@@ -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",
+        primary: '#3B82F6',
-        secondary: "#10B981",
+        secondary: '#10B981',
-        accent: "#F59E0B",
+        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}",
+    './components/**/*.{vue,js,ts}',
-    "./layouts/**/*.vue",
+    './layouts/**/*.vue',
-    "./pages/**/*.vue",
+    './pages/**/*.vue',
-    "./plugins/**/*.{js,ts}",
+    './plugins/**/*.{js,ts}'
   ],
   theme: {
     extend: {
       colors: {
-        primary: "#3B82F6",
+        primary: '#3B82F6',
-        secondary: "#10B981",
+        secondary: '#10B981',
-        accent: "#F59E0B",
+        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-50:  #EFF6FF;
---primary-100: #dbeafe;
+--primary-100: #DBEAFE;
---primary-200: #bfdbfe;
+--primary-200: #BFDBFE;
---primary-300: #93c5fd;
+--primary-300: #93C5FD;
---primary-400: #60a5fa;
+--primary-400: #60A5FA;
---primary-500: #3b82f6; /* Main primary */
+--primary-500: #3B82F6;  /* Main primary */
---primary-600: #2563eb;
+--primary-600: #2563EB;
---primary-700: #1d4ed8;
+--primary-700: #1D4ED8;
---primary-800: #1e40af;
+--primary-800: #1E40AF;
---primary-900: #1e3a8a;
+--primary-900: #1E3A8A;
 ```
 
 **Secondary Colors**
-
 ```css
---secondary-500: #10b981; /* Success/Positive */
+--secondary-500: #10B981;  /* Success/Positive */
---accent-500: #f59e0b; /* Warning/Attention */
+--accent-500: #F59E0B;     /* Warning/Attention */
---error-500: #ef4444; /* Error/Danger */
+--error-500: #EF4444;      /* Error/Danger */
 ```
 
 **Neutral Colors**
-
 ```css
---gray-50: #f9fafb;
+--gray-50:  #F9FAFB;
---gray-100: #f3f4f6;
+--gray-100: #F3F4F6;
---gray-200: #e5e7eb;
+--gray-200: #E5E7EB;
---gray-300: #d1d5db;
+--gray-300: #D1D5DB;
---gray-400: #9ca3af;
+--gray-400: #9CA3AF;
---gray-500: #6b7280;
+--gray-500: #6B7280;
---gray-600: #4b5563;
+--gray-600: #4B5563;
 --gray-700: #374151;
---gray-800: #1f2937;
+--gray-800: #1F2937;
 --gray-900: #111827;
 ```
 
 **Dark Mode**
-
 ```css
---dark-bg-primary: #0f172a;
+--dark-bg-primary: #0F172A;
---dark-bg-secondary: #1e293b;
+--dark-bg-secondary: #1E293B;
 --dark-bg-tertiary: #334155;
---dark-text-primary: #f1f5f9;
+--dark-text-primary: #F1F5F9;
---dark-text-secondary: #cbd5e1;
+--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",
+font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
-  Arial, sans-serif;
+             '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-xs:   0.75rem;   /* 12px */
---text-sm: 0.875rem; /* 14px */
+--text-sm:   0.875rem;  /* 14px */
---text-base: 1rem; /* 16px */
+--text-base: 1rem;      /* 16px */
---text-lg: 1.125rem; /* 18px */
+--text-lg:   1.125rem;  /* 18px */
---text-xl: 1.25rem; /* 20px */
+--text-xl:   1.25rem;   /* 20px */
---text-2xl: 1.5rem; /* 24px */
+--text-2xl:  1.5rem;    /* 24px */
---text-3xl: 1.875rem; /* 30px */
+--text-3xl:  1.875rem;  /* 30px */
---text-4xl: 2.25rem; /* 36px */
+--text-4xl:  2.25rem;   /* 36px */
---text-5xl: 3rem; /* 48px */
+--text-5xl:  3rem;      /* 48px */
 ```
 
 **Font Weights**
-
 ```css
 --font-normal: 400;
 --font-medium: 500;
@@ -328,41 +315,40 @@ font-family: "Prompt", "Sarabun", "Inter", sans-serif;
 ### 4.4 Spacing System
 
 **8px base unit system**
-
 ```css
---space-1: 0.25rem; /* 4px */
+--space-1:  0.25rem;  /* 4px */
---space-2: 0.5rem; /* 8px */
+--space-2:  0.5rem;   /* 8px */
---space-3: 0.75rem; /* 12px */
+--space-3:  0.75rem;  /* 12px */
---space-4: 1rem; /* 16px */
+--space-4:  1rem;     /* 16px */
---space-5: 1.25rem; /* 20px */
+--space-5:  1.25rem;  /* 20px */
---space-6: 1.5rem; /* 24px */
+--space-6:  1.5rem;   /* 24px */
---space-8: 2rem; /* 32px */
+--space-8:  2rem;     /* 32px */
---space-10: 2.5rem; /* 40px */
+--space-10: 2.5rem;   /* 40px */
---space-12: 3rem; /* 48px */
+--space-12: 3rem;     /* 48px */
---space-16: 4rem; /* 64px */
+--space-16: 4rem;     /* 64px */
---space-20: 5rem; /* 80px */
+--space-20: 5rem;     /* 80px */
 ```
 
 ### 4.5 Border Radius
 
 ```css
---radius-sm: 0.25rem; /* 4px */
+--radius-sm:  0.25rem;  /* 4px */
---radius-md: 0.5rem; /* 8px */
+--radius-md:  0.5rem;   /* 8px */
---radius-lg: 0.75rem; /* 12px */
+--radius-lg:  0.75rem;  /* 12px */
---radius-xl: 1rem; /* 16px */
+--radius-xl:  1rem;     /* 16px */
---radius-2xl: 1.5rem; /* 24px */
+--radius-2xl: 1.5rem;   /* 24px */
---radius-full: 9999px; /* Circle */
+--radius-full: 9999px;  /* Circle */
 ```
 
 ### 4.6 Shadows
 
 ```css
---shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+--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-md:  0 4px 6px -1px rgb(0 0 0 / 0.1);
---shadow-lg: 0 10px 15px -3px 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-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
+**Last Updated:** December 2024