Section 1 — Architecture Overview Think & Speak Technical Workshop

Platform Architecture
Overview

Modular component architecture built on React/Next.js enabling feature isolation and independent deployment across the T&S ecosystem.

⚙️ Technology Stack

React + Next.js frontend with TypeScript strict mode. Redux for global state management. Ant Design component library. SCSS Modules for scoped styling. ECharts + react-circular-progressbar for data visualization. next-i18next for trilingual support.

🧩 Component Hierarchy

pageComponents/ ├── account/ │ └── pages/login/ ├── questionnaire/ └── assessment/
pageComponents/ directory colocates page-level styles with components. CSS Modules prevent leakage between Dashboard, Course Adventure, and Live Translation.

🏗️ Design Philosophy

Dual-interface architecture: Teacher portal (analytics dashboard) and Student portal (immersive learning). Responsive design adapts across desktop, tablet, and mobile. Component-level state isolation. SCSS + Tailwind hybrid styling.

📋 Production URLs & Deployment Architecture ▼

Production: app.thinkandspeak.com — Live student/teacher access
UAT: uat-app.thinkandspeak.com — Testing environment
Test Accounts: Teacher: test_teacher@seechange-edu.com / Student: test_student1@seechange-edu.com (Password: Aa123456)
Framework: Next.js server-side rendering with API routes. Code-splitting via next/dynamic. Barrel exports for tree-shaking. CSS Modules with global :root design tokens.

Section 2 — Visual Identity

Mascot Character System: 20 Variants

Functional UI components communicating learning modes — not mere decoration. Each character reduces cognitive load through consistent visual cues.

🟢

Green — Media & Active

🎧 Live Translation active
🥽 VR Immersive Training
🎧 Vocabulary Gamification
🎒 Student Onboarding state

🔵

Blue — Analytical & Literacy

🔍 Exam Simulation mode
📖 Vocabulary Collection
👓 Teacher Dashboard
💪 Confidence State
簡繁 Chinese Detection

🟡

Yellow — Creative & STEM

🧠 Higher-Order Thinking
🎨 Creative Expression
🎤 Speaking Performance

🔴

Orange/Purple — Comms & Explore

🌐 Global Classroom
🎤 Public Speaking Debate
🔍 Research & Discovery
🫂 Collaborative Learning
😰 Struggling State (AI Coach)

🧠 Emotional States & Color Psychology Theory ▼

Emotional Design: Worried mascot (after failed login) reduces anxiety via empathetic non-verbal reassurance
Time-Aware: Sleepy mascot triggers during late-hour study sessions — suggests breaks before user even accesses Dashboard
Celebratory: Holding stars/certificates/diplomas triggers upon achievement milestones — dopaminergic reinforcement
Krashen's Affective Filter: Color psychology maps to cognitive stages — cooler blues = concrete operational, warmer oranges = abstract reasoning maturity
Implementation: .mascot-state--frustrated, .mascot-state--tired, .mascot-state--celebratory classes dynamically swap via login pattern detection

Section 3 — Gateway Architecture

Login Component: Gateway Styling Layer

The modular SCSS architecture initializes the personalized visual experience and implements security-centric styling aligned with the mascot color system.

🔐 Visual Encryption & Anti-Phishing

Environment-specific visual cues: Production (app.thinkandspeak.com) vs UAT (uat-app.thinkandspeak.com) distinguished by background gradients
Subtle desaturation in sandbox (vibrant for live) prevents accidental data modification
Brand-protection visual hashes: unique gradient patterns + mascot positioning (Image 18 confidence pose) on legitimate domains only
Input field micro-animations with phoneme-level color coding — orange warning/instruction, green valid/ready

👤 Dual-Portal Architecture

Teacher Portal

.teacherPortal — 60/40 grid: analytics preview + auth form. Simulated classroom heatmaps for engagement monitoring.

Student Portal

.studentPortal — 100% immersive auth with Image 16 (backpack student). Immediate Assessment onboarding.

🔤 Credential Input Psychology & Password Strength ▼

Touch Targets: 48px+ minimum for young primary students on tablets — Vocabulary Builder access optimized
Bilingual Placeholders: Text animations alternate English and Chinese (Images 19/20 variants) to subconsciously reassure multilingual users
Password Strength: Vocabulary Collection metaphor — scattered letters (weak) → structured grid (strong) visually communicates password quality
State Persistence: CSS custom properties persist selected mascot color theme throughout session for visual continuity

Section 4 — Color Psychology

Age-Based Color Psychology System

Calculated color-psychology gradient mirroring cognitive development stages — from warm inviting tones for early childhood to professional seriousness for adult learning.

6-8

Early Childhood

Warm inviting tones. Concrete thinking. Curiosity-driven learning foundations.

9-11

Middle Childhood

Balanced engaging hues. Growing cognitive abilities. Increasing focus.

12-14

Early Adolescence

Calming trustworthy tones. Concrete operational thinking. Systematic learning.

15-17

Mid Adolescence

Energetic mature colors. Abstract reasoning. DSE preparation readiness.

18+

Adult Learning

Professional tones. Academic focus. University and career contexts.

🎨 SCSS Implementation & Cross-Feature Continuity ▼

Implementation: $age-primary-6-8, $age-primary-9-11, etc. SCSS variables cascade via data-age-group attribute selectors
Live Translation Integration: Same color system applied to cohort indicators during real-time classroom sessions — students instantly identify their assigned learning cohort
Assessment → Course Adventure Continuity: Selected age color persists from assessment phase into all subsequent learning modules, creating visual cohesion

Section 5 — Assessment System

Assessment Module: Profile Data Collection

Immediately post-login, users encounter the personalized assessment interface — capturing essential profiling for the AI personalization engine.

🎯

Age Group

Visual badge selection
6-8, 9-11, 12-14, 15-17, 18+

→

📊

Proficiency

Adaptive assessment
Beginner → Advanced

→

❤️

Interests

Topic preferences
11 categories

→

🧠

Learning Style

8 methods detected
Games, Stories, Speak & Act

→

🎓

Dashboard

Personalized interface
generated

📋 Data Captured

Age group & learning stage
English proficiency level (1-10 scale)
Interests: 11 categories incl. Space, Animals, Sports
Learning personas: 9 types (Debate Hero, Story Explorer, etc.)
Curious subjects: 22 academic topics incl. HKDSE-relevant
Motivation factors: 8 categories

⚡ Personalization Output

Vocabulary difficulty curve adjusted to proficiency
Conversation Role Play scenario selection based on interests
Reading Comprehension mode (Guided vs Exam) based on level
AI Coach interaction parameters calibrated to learning style
Content delivery speed adapted to age group
Assessment data feeds Vocabulary Trainer & Course Adventure

Section 6 — Emotional Design

Mascot State Machine: Emotional Intelligence

Dynamic state switching creates personalized emotional support from the first platform interaction — Krashen's Affective Filter theory in action.

😰

Idle State

Image 14 (shy blue)
Gentle pulse animation
Encourages hesitant learners

→

📖

Typing State

Image 3 (reading book)
Lightbulb activates on
.edu.com domain detection

→

💪

Validation State

Image 18 (crossed arms)
Slides in via translateX()
Successful credential check

🎭 Emotional State Library

Worried/Contemplative: Post-failure empathetic reassurance — reduces anxiety
Surprised/Shouting: Dynamic feedback for unexpected events
Sleepy/Relaxed: Late-hour study session — suggests breaks proactively
Celebratory: Achievement milestones — holding stars/certificates
Shy/Confused: Struggling learner state triggers AI Coach intervention

🌍 Language Detection Visuals

Image 19 (简体中文): Simplified Chinese detection — zh-CN locale activates
Image 20 (繁體中文): Traditional Chinese detection — zh-HK/zh-TW locale
CSS backdrop-filter blur keeps login form legible during language detection
Language toggle (EN/中文) morphs button shapes and flag indicators

Section 7 — Multilingual UI

Conversational UI & Multilingual Typography

💬 Speech Bubble Architecture

Bubble Styling: border-radius: 24px + filter: drop-shadow() floating dialogue containers
Directional Tails: CSS clip-path or ::after pseudo-element — dynamically repositioned based on mascot location
Multilingual Flexibility: Generous padding & min-height — CJK character sets (Mandarin/Cantonese) with greater line-height requirements render without breakage
Dynamic Injection: React props enable real-time content updates during authentication flow — welcome messages, contextual help

🔤 Font Engineering for Trilingual Support

font-family: system-ui, -apple-system,
  "Segoe UI", Roboto, "Helvetica Neue",
  Arial, "Noto Sans",
  "Noto Sans CJK SC",    /* Simplified */
  "Noto Sans CJK TC",    /* Traditional */
  sans-serif;

CJK Optimization: Line-height 1.6-1.8 for Chinese character stroke clarity
Interface Toggle: .languageToggle — EN ↔ Mandarin ↔ Cantonese without page reload
Future RTL: [dir="rtl"] qualifications for Arabic/Hebrew expansion

Section 8 — Responsive Architecture

Responsive Design for Multi-Device Accessibility

Hong Kong students frequently access content on smartphones during MTR commutes — mobile-first design ensures learning continues anywhere.

📱

Mobile (<768px)

Single-column immersive auth
Touch targets 56px+ minimum
Bottom-sheet modals
Icon-only control modes

📟

Tablet (768-1024px)

Two-column adaptive grid
Collapsible sidebar
Gesture support for drag-drop
BYOD classroom optimized

🖥️

Desktop (1025px+)

Full 3-column layout
20px+ typography
40px desktop title scaling
Teacher dashboard optimized

♿ WCAG 2.1 AA Compliance & Accessibility ▼

High Contrast: All text meets 4.5:1 minimum contrast ratio for body text
Focus States: Visible outline with :focus-visible pseudo-class — 3px solid blue outline
Screen Readers: ARIA labels on all interactive elements. Live regions for dynamic content updates
Reduced Motion: @media (prefers-reduced-motion) respects user motion sensitivity preferences
Touch Targets: 44px minimum (exceeds WCAG) — critical for primary education tablet usage

Section 9 — Onboarding System

Progressive Onboarding Architecture

LocalStorage-based preference memory enables seamless daily access — returning users skip assessment while new users receive guided introduction.

🔄 Returning vs New User Optimization

Returning: .returning-user modifier — faster transitions (600ms→300ms). Previous assessment completed → skip to Dashboard.
New User: .new-user classes — elaborate mascot introduction animations. Full assessment flow activation.
Preference Observation: Hover time on age badges, mascot preference clicks → pre-configure Vocabulary Trainer difficulty curves & Conversation Role Play scenarios
Cross-Device: LocalStorage persists age badge selection and mascot color theme across sessions

🎯 Assessment → Dashboard Flow

Step 1: Authentication — Mascot-guided welcome, role detection

Step 2: Age Selection — Visual badge grid (6-8 through 18+)

Step 3: Profiling — Proficiency level capture + interest selection

Step 4: Dashboard — Personalized interface generated from profile

Section 10 — Live Translation

Live Translation & Group Collaboration

Real-time classroom translation supporting English ↔ Cantonese/Mandarin — turning every class into a learning ecosystem.

🌐 Real-Time Translation Features

Session Codes: Monospace font session ID for quick teacher entry during live classroom setup
Language Toggle: .languageToggle — EN ↔ Mandarin ↔ Cantonese switching without page reload. CSS transitions morph button shapes.
Cohort Colors: Same age-group color system applied to translation cohort indicators — students instantly identify their assigned cohort during real-time sessions
In-Context Capture: Saved sentences store temporal metadata (where in lecture) and semantic context → "Auto Vocabulary → Flashcards" pipeline

👥 Group Teaching Support

State Indicators: "Class In Progress" / "Group Session Active" badges alongside auth fields
Split-View: CSS Grid template-areas — login alongside Live Translation preview or heatmap
Broadcast Tools: Simultaneous content delivery to entire class — vocabulary introduction, grammar explanations
Targeted Assignment: Differentiated tasks to student subgroups based on assessment levels
Engagement Heatmap: Real-time comprehension visualization — Green (understand), Yellow (neutral), Red (confused/question)

"Turn every class into a learning ecosystem"

Section 11 — Performance & Security

Performance Optimization & Security

⚡ Performance Strategies

content-visibility: auto

Off-screen mascot illustrations deferred — faster initial load

contain: layout paint

Isolates auth form from reflows caused by CJK font loading

WebP/AVIF + fallback

Next.js Image component — optimized mascot assets

will-change: transform

GPU acceleration for 60fps mascot animations on school devices

🔒 Security Architecture

🔐 JWT Authentication

Encrypted tokens for API security. Role-based access (Teacher/Student)

🏫 School Data Segregation

School Program type disables/lock schoolName field

👶 K12 Privacy

Optional PII fields (sourceOfReferral) — no validation = minimal collection

📧 Secure Onboarding

6-digit verification codes. "Check email and spam box" guidance

📊 Bandwidth Adaptation & Low-Connectivity Strategies ▼

Rural Schools: Image lazy-loading and animation deferral until critical content renders — limited bandwidth environments accommodated
MTR Tunnels: Core translation features load immediately; supplementary practice modules load on demand — essential functionality prioritized
Input Responsiveness: Containment isolation prevents dynamic font loading from causing layout shifts during credential entry on touch devices

Section 12 — Integration

Platform Ecosystem Integration

Assessment data propagates to all learning modules — the closed-loop personalization pipeline.

🔄 Personalization Data Flow

Assessment → Vocabulary: Proficiency determines initial word list difficulty for "Words" and "Vocabulary Builder"
Assessment → Course Adventure: recommendedLevel determines entry point into progressive learning paths
Assessment → Conversation: Proficiency data calibrates Role Play scenario difficulty and topic selection
Assessment → Reading: Determines starting mode — Guided Learning vs Exam Simulation for DSE preparation
Assessment → Live Translation: Establishes baseline language support configuration (EN↔ZH, EN↔Cantonese)

🔗 LMS Integration Potential

Micro-Frontend: iframe-based assessment enables content updates without full app redeployment
SSO Integration: Token passing via URL parameters supports Single Sign-On with school identity providers
Export Capability: Assessment result data accessible via Redux store for institutional reporting tools
API Extensibility: Custom mascot theming for institutional branding. Configurable assessment forms for school-specific benchmarks

The Closed Learning Loop

Assessment → Personalization → Activity → Analytics → Improvement → Reassessment
Listen → Capture → Review → Master — every class becomes a reusable learning asset.

Summary

Key Takeaways

🏗️

Modular Architecture

CSS Modules + component colocation enables independent feature updates without disrupting the learning experience

🎨

Emotional Intelligence

20 mascot variants with dynamic emotional states reduce learner anxiety through empathetic non-verbal feedback

🔄

Closed-Loop Learning

Assessment data flows to all modules — Vocabulary, Course Adventure, Conversation, Reading, and Translation

🌐

Trilingual Support

EN ↔ Cantonese ↔ Mandarin via Noto Sans CJK font stack and next-i18next infrastructure

📱

Device Agnostic

Mobile-first responsive design — students continue learning during MTR commutes and across BYOD classrooms

🔒

Secure & Compliant

JWT auth, K12 privacy compliance, school data segregation — school-ready technology for institutional deployment

Platform ArchitectureOverview