Platform Architecture Overview

Technology Stack

Next.js, React, TypeScript frontend foundation
Redux state management for application-wide data flow
Ant Design component library for consistent UI elements
ECharts and react-circular-progressbar for data visualization
next-i18next for internationalization support
SCSS modules for scoped component styling

Design Philosophy

Modular component design with SCSS modules
Responsive layouts: desktop, tablet, mobile breakpoints
Real-time data visualization throughout dashboard
Professional educational technology deployment
Accessibility considerations for inclusive education
Performance-optimized with skeleton loading states

Core Capabilities

Real-time Progress Tracking — Live updates as students learn
AI-Powered Analytics — Intelligent insights from learning data
Secure Authentication — JWT tokens with role-based access
Multi-Platform URLs: app.thinkandspeak.com (Production)
UAT Environment: uat-app.thinkandspeak.com for testing
Scalable architecture for school-wide deployments

Key Technical Insight

The Think & Speak platform leverages modern JavaScript frameworks to deliver a responsive, visually engaging learning experience. The technology stack enables real-time progress tracking and personalized content delivery based on learner assessment profiles.

Assessment System: 8-Dimension Learner Profiling

1

Age Groups

6-8, 9-11, 12-14, 15-17, 18+ — Adapts content delivery and interface complexity

2

Gender Preferences

Allows customization of avatar and content themes based on preference

3

Interest Topics

11 categories including Space & Science, Animals & Nature, Sports & Games

4

Learning Personas

9 types including Debate Hero, Story Explorer, Game Master

5

Motivation Factors

8 categories including Travel & Explore, Watch Shows/Youtube

6

Learning Styles

8 methods including Play games, Read stories, Speak and act out

7

Proficiency Levels

1-10 scale with detailed descriptors for accurate placement

8

Curious Subjects

22 academic subjects including HKDSE-relevant topics

Learning Impact & Data Output

Creates comprehensive learner profile driving all platform personalization. Adapts content delivery speed based on age and proficiency level. Personalizes topic selection according to stated interests. Tailors teaching methodology to preferred learning styles. Connects English learning to academic subjects for contextual relevance.

Dashboard & Progress Tracking System

8

Assessment Dimensions

22

Academic Subjects

5

Skill Metrics

3

Report Categories

Student Dashboard Features

Visual progress tracking with real-time data fetching
Module guard system ensuring proper access control
State management synchronization between Redux store
Responsive sidebar/main content areas adapting to device

Key Metrics Dashboarded

Study Days: Consecutive learning streak tracking
Study Minutes: Total time invested in learning
Spoken Times: Practice frequency counter
Mastered Words: Vocabulary mastery progress counter
Points System: Gamification rewards for engagement

Achievement Visualization

Circular progress indicators for skill completion
Color-coded performance metrics with indicators
Personalized content delivery based on assessment
Study consistency accountability through tracking

Teacher Dashboard Insight

Students see their OWN progress dashboard—this creates personal investment. The gamification elements (points, mastered words) create dopamine feedback loops that encourage continued practice. Teachers can see AGGREGATE class data in their management view, useful for identifying students who need additional support.