supalerk-ar66 71f0676a62 Website Structure

2026-01-13 10:48:02 +07:00

9 KiB

Raw Blame History

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

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

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

--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

--secondary-500: #10b981; /* Success/Positive */
--accent-500: #f59e0b; /* Warning/Attention */
--error-500: #ef4444; /* Error/Danger */

Neutral Colors

--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

--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

/* 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

--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

--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

4.4 Spacing System

8px base unit system

--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

--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

--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

9 KiB Raw Blame History