Think & Speak Platform
Understanding the frontend infrastructure, mascot-driven visual identity, adaptive assessment system, and responsive design that powers an AI-driven English learning ecosystem for Hong Kong classrooms.
Click anywhere, press → or Space to advance • Press N for speaker notes • Press ? for shortcuts
🔧 CSS Modules & Component Architecture
- path:
src/pageComponents/account/pages/login/index.module.scss - Next.js pageComponents directory colocates styles with components — critical for enterprise-scale educational platform
- .module.scss extension signals scoped styling isolated from global stylesheets
- Multi-role authentication: Teacher (
test_teacher@seechange-edu.com) vs Student (test_student1@seechange-edu.com)
🎨 Style Encapsulation Benefits
▼CSS Modules generate unique hashed class names preventing style conflicts between Dashboard, Course Adventure, Vocabulary Builder, Conversation Role Play, and Live Translation features. Authentication-specific styling (mascot positioning, age-selection buttons, responsive form layouts) remain encapsulated within their contexts — critical for educational software where interface clarity directly impacts learning outcomes.
📁 Component Colocation Strategy
▼The pageComponents directory structure in Next.js colocates styles with their respective components, improving maintainability and enabling distinct visual treatments for different user types (teachers vs students) without style conflicts. This means the Assessment engine styling never bleeds into the Conversation Role Play interface.
- Framework: React + Next.js with TypeScript for type safety
- State: Redux for application-wide data consistency
- UI Library: Ant Design components for professional consistency
- Visualization: ECharts & react-circular-progressbar for data charts
- Internationalization: next-i18next supporting EN/ZH-Mandarin/ZH-Cantonese
- Styling: SCSS Modules + CSS custom properties (design tokens)
🔗 Production URLs
▼Production: app.thinkandspeak.com (Live access)
UAT: uat-app.thinkandspeak.com (Testing & training)
Both environments share identical codebase with environment-specific API endpoints. Visual cues distinguish UAT (desaturated) from Production (vibrant).
🧱 Build-Time Processing
▼CSS Modules are processed at build time, generating scoped class names while preserving original developer-defined names in output. SCSS variables and mixins cascade throughout the component while maintaining local scope — enabling the dynamic theme injection based on age-group data from the Assessment module.
🎭 Mascot Visual Identity System (20 Variants)
- Img 1 (Headphones/Mic/Film): Live Translation & Conversation Role Play — active listening/speaking modes
- Img 6 (VR Goggles/Controller): Immersive Scenario Training — virtual environments for presentations & debates
- Img 10a (Headphones/Coin): Vocabulary Builder Gamification — in-platform currency & point systems
- Img 16 (Backpack/Pencil/Tablet): Student Onboarding state — default avatar during Assessment phase
👥 Collaborative State (Img 4)
▼Two green/blue characters walking together representing collaborative learning modes — Group Discussion features and peer-based language activities in Live Translation classroom settings.
- Img 2 (Detective/Magnifier): Exam Simulation Mode — textual analysis for HKDSE prep
- Img 3 (Book/A-Z/Lightbulb): Vocabulary & Read & Speak — AI-generated insights for pronunciation
- Img 13 (Glasses/Magnifier): Teacher Dashboard — Live Learning Feedback & Heatmap
- Img 18 (Crossed Arms): Confidence/Completion — Vocabulary mastery & Course Adventure milestones
🟡🟠🟣 Remaining Mascot Variants & Age-Based Color System
- Img 5 (Brain/Rocket): Higher-Order Thinking — Analytical Reading & Inference
- Img 9 (Paintbrush/Notebook/Gears): Creative Expression — Personalized Scripts
- Img 15 (Mic/Star): Speaking Performance — phoneme-level pronunciation feedback
- Img 8 (Globe/Building): Global Classroom — Live Translation multilingual support
- Img 10b (Podium/Speech): Public Speaking & Debate — Course Adventure
- Img 12 (Binoculars/Notebook): Research & Discovery — Guided Learning Mode
- Img 14 (Shy/Sad): Struggling Learner — triggers AI Coach intervention
🌐 Language Detection (Img 19/20)
▼Img 19 (简体中文): Simplified Chinese detection — English↔Mandarin translation contexts for Mainland Chinese learners.
Img 20 (繁體中文): Traditional Chinese/Cantonese detection — English↔Cantonese classroom environments for Hong Kong students. CSS dynamically activates correct mascot based on browser locale (zh-CN → 19, zh-HK/zh-TW → 20).
🧠 Cognitive Development Correlation
▼Cool blues indicate concrete operational thinking (ages 6-14). Warm oranges signal abstract reasoning maturity (15-18+). This system cascades via SCSS variables ($age-primary-6-8 etc.) and data-age-group attribute selectors, extending to Live Translation cohort indicators.
📋 Assessment Engine & Personalization Pipeline
- Dynamic content via
${origin}/english-assessment/form/${selectedLevel}/${formId}.html - Base64 JWT token passing (
btoa(token)) for secure iframe authentication - Bi-directional data flow via
window.postMessageAPI - Cross-origin isolation protects student proficiency data (FERPA-compliant)
🔄 Assessment Data Flow
▼1. Welcome State: Mascot-driven psychological preparation (reduces test anxiety per Krashen's Affective Filter theory). 2. Dialog State: Iframe loads with isDialogOpen boolean. 3. Submission State: postMessage validates & dispatches selectedLevelId to Redux store. 4. Feedback State: Success/Failed modal routes based on score thresholds using getMascotByScore utility.
📊 Data Captured
▼Age group & learning stage (6-8 through 18+), English proficiency level (beginner to advanced), Interests & preferred topics for personalized content curation, Learning motivation and style preferences, Academic curiosity subjects. All data flows into Redux via useSelector(selectUser) for cross-module personalization.
- Vocabulary Builder: Assessment proficiency determines initial word list difficulty
- Course Adventure: recommendedLevel output determines entry points
- Conversation Role Play: Proficiency data calibrates scenario difficulty
- Reading Comprehension: Determines Guided Learning vs Exam Simulation mode
- Live Translation: Establishes language support config (EN↔ZH-CN, EN↔ZH-HK)
💾 Gamified Feedback System
▼Success Modal: getMascotByScore maps percentage to celebratory mascot, shows correctPercentage, selectedLevel, formData metadata with green reinforcement.
Failed Modal: Adaptive path correction — "we recommend starting with Level X instead" — reframes outcome as "level mismatch detection" preserving learner self-efficacy. Krashen's theory: anxiety blocks language acquisition; supportive mascot responses maintain engagement.
📱 Responsive Design, Accessibility & Security
Desktop (1920px)
4-column grid, 300px+ mascots, full sidebar for teacher projection. useBreakpoints hook detects viewport.
Tablet (768px)
2-column grid, medium mascots. imgBubbleMobile for BYOD classroom scenarios. Gesture support.
Mobile (480px)
Single-column scroll. 56px touch targets for primary students. Hong Kong MTR commute study.
WCAG 2.1 AA
prefers-reduced-motion support, :focus-visible indicators, 44px minimum touch targets, keyboard navigation.
🖐️ Touch Optimization & Haptics
▼CSS haptic simulation: transform: translateY(2px) + box-shadow reduction 4px→2px on :active. WCAG 2.1 touch targets: py-3 px-8 desktop, py-2 px-6 mobile. whitespace-nowrap prevents accidental touches. Browser language detection switches interface (EN ↔ ZH) without page reload via CSS transitions.
- Iframe sandboxing: Assessment data isolated from main app — FERPA-compliant
- Token authentication: Base64 JWT + environment variables prevent unauthorized access
- postMessage validation: Strict origin checking prevents XSS injection attacks
- Visual hash verification: Unique gradient patterns + Image 18 mascot confirm legitimate domains
- Role separation: Teacher credentials (analytics access) vs Student credentials (learning content)
🔒 Environment Separation
▼Production (app.thinkandspeak.com): Real student data, vibrant color themes. UAT (uat-app.thinkandspeak.com): Sandbox for teacher training, desaturated color scheme. Visual cues (background gradient shifts) prevent accidental production data modification during training.
📋 5W1H Framework & Technical Glossary
WHO
Primary/Secondary/University learners (HKDSE focus). Teachers using Live Translation & Broadcast.
WHAT
AI English proficiency assessment, personalized vocabulary, adaptive reading/comprehension.
WHEN
Live Translation (lessons), Vocabulary Builder (commute), Assessment (placement + monitoring).
WHERE
Web-based app.thinkandspeak.com, mobile-optimized, classroom projection for teachers.
WHY
Krashen's Affective Filter theory, spaced practice intervals, gamification for engagement.
HOW
Login → Assessment → Personalization → Adaptive Content → Continuous Adaptation.
🔄 Platform Ecosystem & Integration Hub
📚 Vocabulary
Proficiency → word list difficulty, spaced practice intervals
📖 Reading
Level → Guided vs Exam Simulation mode for DSE
🎭 Conversation
Proficiency → scenario difficulty calibration
🌍 Translation
Locale → EN↔ZH-CN or EN↔ZH-HK config
🎮 Course Adventure
recommendedLevel → learning path entry point
📊 Dashboard
localStorage → session continuity across devices
- Modular Architecture: Feature isolation enables independent updates without disrupting learning
- Adaptive Assessment: Iframe-based evaluation drives personalized learning paths
- Visual Communication: 20 mascot variants reduce cognitive load via consistent visual cues
- Multi-Role Flexibility: Teacher dashboard monitoring vs student immersive learning — same platform, different experiences
- Continuous Personalization: Every interaction feeds back into the adaptive system
🏫 Institutional Integration Potential
▼Micro-frontend architecture enables SSO integration with school identity providers. Assessment data accessible via Redux store for institutional reporting. Iframe content updates without full app redeployment supports school-specific customization. Pre-authentication personalization reads localStorage for session continuity across the Course Adventure, Vocabulary, and Conversation modules.
✅ Classroom Integration Action Checklist
🔑 Test Accounts
▼Production: app.thinkandspeak.com
UAT: uat-app.thinkandspeak.com
Teacher: test_teacher@seechange-edu.com
Student: test_student1@seechange-edu.com
Password: Aa123456
📊 Assessment Interpretation Tips
▼Parent communication: "Your child was placed at [Level] in our program. This starting point ensures appropriate challenge — not too easy, not too hard. The system continuously adapts to their development."
Key insight: The "failed but recommended level" message reframes assessment as "level mismatch detection" — preserving student self-efficacy while optimizing learning paths.
Teach with Confidence. Learn without Limits.
Production: app.thinkandspeak.com | UAT: uat-app.thinkandspeak.com
Teacher: test_teacher@seechange-edu.com | Student: test_student1@seechange-edu.com
Password: Aa123456