A component-based interface
Moving the existing training and examination UI into React, with camera, assessment and feedback integrations forming part of the frontend work.
CASE 04 / DANZHU · AI SPORTS ASSESSMENT
Real movement.
Real-time feedback.
A TV-based sports examination and training system. I migrated its frontend from jQuery to React and connected live video, AI scoring and synchronized feedback.
IN REGIONAL USE
China’s high-school entrance PE exams.
The system has been used in high-school entrance PE examinations in parts of China, as well as sports-school training and middle-school PE classes.
Explore the interactive demoMY ROLE
Frontend development
jQuery → React migration
TECHNICAL FOCUS
Canvas · Video streams · WebSocket
Multi-person results · Audio-visual synchronization
IN THIS CASE
01 / THE INTERACTIVE LAB
Step onto the training floor.
Start a session, add participants and adjust the scoring delay. Watch movement become individual results.
Interactive recreation · Sample data01 / MOVEMENT → FEEDBACK
Movement→AI result simulation→Waiting for movement
Increase it to see results arrive later.
INDIVIDUAL RESULTSScores appear when the session ends
Student 01Identity tracked separately
0 reps received— / 100sample score
Student 02Identity tracked separately
0 reps received— / 100sample score
Student 03Identity tracked separately
0 reps received— / 100sample score
Try three students, then raise the delay. Movement continues while each student’s results arrive independently. Scores illustrate the interface; they are not official exam criteria.
02 / BEHIND THE INTERFACE
One movement. A connected system.
My work connected camera and scoring integrations with the frontend experience. Select a step to follow the flow.
Capture
CAMERA · VIDEO STREAM
Camera footage enters the assessment pipeline. My frontend work included camera integration and video-stream transmission.
System workflow illustration. AI analysis and face recognition are backend capabilities; my contribution was frontend implementation and integration.
03 / THE SCALING CHALLENGE
More cameras. A harder stability problem.
Increasing the number of cameras brought richer assessment data—and a persistent stream-stalling issue.
Richer data. A persistent stall.
2 → 8
CAMERA INPUTS
When we expanded from two cameras to eight, the system could capture more data. But in certain operating states, the data stream would stall. This became a difficult, long-running issue for the team.
The team eventually resolved the stream-stalling issue after a sustained period of investigation and debugging.
04 / MODERNIZING THE FRONTEND
A new frontend. A very live environment.
I migrated existing jQuery code to React in a system where camera input, scoring updates and visual feedback all meet on one screen.
The work covered the training and examination interfaces alongside Canvas operations, video transmission, WebSocket updates and audio-visual synchronization.
jQueryReact
Several people, individual results
Supporting simultaneous training and examinations, with recognition data connecting each participant to their own scores and feedback.
Feedback you can see and hear
Bringing Canvas presentation, real-time scoring and synchronized audio-visual feedback together, including spoken results after a session.
05 / WHERE IT IS USED
Built for actual school days.
Regional examination use alongside everyday training and PE classes in China.
High-school entrance PE exams
Used in high-school entrance physical-education examinations in parts of China.
Sports-school training
Used in everyday training at sports schools, with scoring and assessment reports.
Middle-school PE
Used in physical-education classes to connect exercise with individual feedback.
ALSO AT DANZHU
Training on a smaller screen.
The student mini-program and teacher dashboard: camera-based exercises, weak-network saving and score reporting.