The platform employs a modern, component-based frontend built on React with Next.js, utilizing CSS Modules (.module.scss) for scoped, maintainable styling. The pageComponents/ directory structure isolates page-level components from shared UI elements, enabling independent feature development without style conflicts between the login portal and core learning modules.
The architecture serves both teacher and student accounts with distinct interface requirements. CSS Modules prevent authentication-specific styling — mascot positioning, age-selection buttons, responsive form layouts — from leaking into Dashboard, Course Adventure, Vocabulary Builder, or Live Translation features. This encapsulation is critical for educational software where interface clarity directly impacts learning outcomes.
🔑 Key Takeaway: Every technical decision — from CSS Modules to mascot state management — serves the pedagogical promise: understanding learners before learning begins.
Image 1 (🎧+🎤+🎬): Headphones + Microphone + Film Reel represents Live Translation and Conversation Role Play modules, indicating active listening/speaking modes with video content integration.
Image 6 (🥽+🎮): VR Goggles + Controller indicates immersive scenario training for virtual presentation and debate environments.
Image 10 (🎧+🪙): Headphones + Coin represents the Gamification Layer and Vocabulary Builder with in-platform currency/point systems.
Image 8 (🌍+🏢): Globe + Building represents the global classroom aspect of Live Translation supporting multilingual classrooms and international Group Discussion.
Image 10 Podium variant: Public Speaking & Debate specialization for Think & Speak Speech & Debate Course Adventure in structured academic speaking contexts.
The shy, seated blue character represents the "Struggling Learner State" — triggered when the AI Coach detects hesitation during speaking modules. This mascot appears alongside speech bubbles after failed authentication attempts, providing empathetic feedback that reduces anxiety through non-verbal reassurance. Aligned with Krashen's Affective Filter theory.
CSS custom properties cascade throughout the interface. When a student selects "Age 9–11" during assessment, the entire interface shifts to teal theming — form borders, button hovers, mascot halos, and Live Translation cohort indicators all adopt the age-group color.
The age-group color system extends to Live Translation cohort indicators where color coding helps students instantly identify their assigned learning cohort during real-time sessions.
The same color system applies to heatmap indicators and engagement tracking visualizations throughout the Dashboard, maintaining visual cohesion from authentication through Course Adventure progression.
The [data-age-group] attribute selectors ensure that a 9-year-old encountering the login page experiences consistent teal accents, while a 17-year-old receives orange-tinted UI elements appropriate for DSE exam preparation.
White rounded-rectangle containers implement conversational UI patterns supporting dynamic welcome messages and contextual help. Directional tails pointing toward the mascot use CSS clip-path or ::after pseudo-elements, allowing JavaScript to dynamically reposition tails based on mascot location within the viewport.
Generous padding and min-height specifications ensure CJK character sets (Mandarin and Cantonese) with greater line-height requirements render without visual containment breakage. Line-height values are inflated to 1.6–1.8 for CJK glyph vertical complexity.
The [dir="rtl"] qualifications and logical CSS properties (margin-inline-start rather than margin-left) future-proof for potential Arabic or Hebrew language support.
Comprehensive font stack ensuring optimal Chinese character rendering across all supported browsers and operating systems. Fluid typography using rem units and clamp() functions ensures that when grandparents assist primary students with login (common in Hong Kong family structures), the interface remains readable at higher zoom levels without breaking mascot-inclusive layouts.
.languageToggle positioned absolutely within login containers allows interface language switching without page reloads. CSS transitions morph button shapes and flag indicators. The auto-routing is intelligent: English defaults to Cantonese translation, while both Chinese inputs route to English — reflecting the primary use case of supporting English language acquisition for Chinese native speakers.
Assessment content is embedded via iframe with encrypted authentication tokens. The postMessage API enables secure cross-origin communication while maintaining strict origin checking — preventing XSS injection of false assessment results. This architecture means assessment content can be updated without redeploying the main application.
The "Welcome → Assessment → Results" flow uses React useState for isDialogOpen boolean, featuring a mascot-driven narrative (blue "Go For It" mascot) that psychologically prepares learners and reduces test anxiety per Krashen's Affective Filter theory. The getMascotByScore utility maps percentage scores to emotional mascot responses.
The AI Coach philosophy centers on personalized emotional support — understanding not just what the learner knows, but how they feel about learning. The worried mascot appears alongside speech bubbles after failed authentication, reducing frustration through empathetic feedback.
The sleepy mascot demonstrates proactive wellness management: detected via client-side time APIs, it gently suggests break reminders before users even access the Dashboard — potentially reducing study fatigue and eye strain during HKDSE preparation.
Production (https://app.thinkandspeak.com) uses vibrant growth themes while UAT (https://uat-app.thinkandspeak.com) uses muted desaturated modes. Subtle background gradient shifts distinguish sandbox from live environments, preventing accidental data modification during teacher training sessions.
Input field micro-animations use phoneme-level color coding: orange for warning/instruction, green for valid/ready — mirroring pronunciation feedback in Conversation Role Play.
Brand-protection visual hashes using unique gradient patterns and mascot positioning (Image 18 "confidence pose") appear only on legitimate domains, helping users verify authentic sites before entering credentials. Critical for school deployments where phishing prevention is essential.
grid-template-columns: 60% 40% prioritizing "Live Learning Feedback & Heatmap preview." Left panel shows Live Translation Session Preview with simulated classroom heatmaps and Broadcast & Group Teaching Tools.
grid-template-columns: 100% for full-screen mascot immersion (Image 16 backpack student). Immediate Assessment phase styling with yellow/orange variants reducing anxiety during "Age group and learning stage" data collection.
Touch targets: 48px minimum for young primary students. Bilingual placeholder text animations alternating English and Chinese (Images 19/20) subconsciously reassure multilingual users of translation capabilities.
content-visibility: auto for off-screen mascot illustrations enables rapid login interface loading while deferring heavier character animations. Particularly beneficial for schools with limited bandwidth in rural areas where initial page load time directly impacts user perception of platform quality.
contain: layout style paint isolates authentication form from browser reflows caused by dynamic font loading for Chinese character sets. Prevents input lag during credential entry — frustrating for students attempting to log in quickly before class begins.
will-change: transform optimizations maintain 60fps mascot animations (floating, parallax, entrance) on school-issued devices with limited GPU capabilities. Common in 1:1 tablet programs where animation smoothness directly impacts perceived professionalism.
📊 Asset Delivery Pipeline: image-set() or Next.js <Image> serves optimized WebP/AVIF formats with PNG fallbacks. Transparent alpha backgrounds enable layered compositing where mascot poses are absolutely positioned within login containers for parallax effects.
.focusVisible polyfill ensuring tab navigation through age-selection badges remains visually prominent for motor control considerations.@media (prefers-reduced-motion) queries respecting user preferences while maintaining mascot communicative function through static pose variations..interactionZone wrappers with :focus-within logging hesitation data for learning motivation analysis while maintaining clear visual feedback.♿ Summary: These accessibility features directly support the platform's promise to serve every learner regardless of ability level, ensuring all students benefit from personalized English language instruction.
.returning-user modifiers trigger faster transitions (reduced from 600ms to 300ms) for students who completed Assessment previously. .new-user classes enable elaborate mascot introduction animations — first impressions matter for platform adoption.
The login interface observes interaction patterns — hover time on age badges, mascot preference clicks — to pre-configure Vocabulary Builder difficulty curves and Conversation Role Play scenario selections before the Dashboard fully renders.
localStorage and secure cookies remember user preferences, enabling seamless daily access for spaced practice vocabulary review sessions across devices. Authentication state management enables tracking of Words vocabulary collections, AI Coach interaction histories, and Course Adventure milestones.
Students can start a lesson on school computers, continue on tablets at home, and review on phones during MTR commute — progress syncs in real-time.
.sessionCode styling positions session code inputs prominently for quick teacher entry, displayed in monospace font within bordered containers. .languageToggle allows interface language switching (English ↔ Mandarin ↔ Cantonese) without page reloads.
The auto-routing is intelligent: English defaults to Cantonese translation, both Chinese inputs route to English — reflecting the primary use case of supporting English language acquisition for Chinese native speakers.
Color-coded theming (matching age-group palette) helps students identify their assigned learning cohort during real-time sessions. The same color system applies to heatmap indicators and engagement tracking visualizations throughout the Dashboard.
Indicator badges show "Class In Progress" or "Group Session Active" positioned alongside authentication fields, utilizing the orange "presenter" mascot variant when group discussion features are active.
CSS Grid template-areas accommodate login interface alongside Live Translation preview windows or engagement heatmaps. .mode--individual and .mode--group modifier classes reconfigure the layout.
🌍 "Turn every class into a learning ecosystem"
🔑 The Platform Promise: From the moment users enter credentials, they are immersed in a responsive, gamified learning ecosystem that adapts to their cognitive stage, emotional state, and linguistic background.
The Live Learning Feedback & Heatmap shows real-time visualization of student engagement signals during Vocabulary Builder and Reading Comprehension. Color-coded heatmap: green = understand, yellow = neutral, red = has question.
The AI Coach intervention system detects hesitation in speaking modules — teacher notification when students activate "question" status button enables immediate intervention before frustration builds.
Historical performance graphs showing vocabulary mastery over time, reading comprehension improvement trends, conversation fluency development metrics. All data feeds from the same Redux state driving student-facing features.
Simultaneous content delivery to entire class for vocabulary introduction, grammar explanation, or cultural context. "Targeted Assignment" sends differentiated tasks to student subgroups based on assessment levels.
Live Translation session setup for multilingual classroom activities with English↔Chinese and English↔Cantonese support. Real-time translation during collaborative speaking activities. Session Recording captures Live Translation for student playback and parent-teacher conference evidence.
Feature-based component organization enables independent updates without disrupting learning activities. CSS Modules prevent style conflicts between Dashboard, Course Adventure, and Live Translation modules.
Iframe-based evaluation captures 8 proficiency dimensions for personalized learning path generation. NOT a test — a preference profile driving all subsequent personalization.
The 20 mascot variants reduce cognitive load by communicating learning modes instantly. Emotional states provide empathetic feedback transcending language barriers.
Teacher and Student experiences optimized independently — dashboard monitoring versus immersive learning. Same platform, different purposes.
Assessment results propagate to Vocabulary, Reading, Conversation, and Translation modules automatically. The platform adapts to each student's needs continuously — like a GPS recalculating routes based on traffic.
✨ "Teach with Confidence. Learn without Limits." ✨
Think & Speak — See Change AI English · Contact: support@seechange-edu.com · URL: app.thinkandspeak.com
Welcome to the Think & Speak technical workshop. Today we'll explore the frontend architecture that powers this AI English learning platform.