CASE STUDY 12 / Education · Mobile training & administration

Student Sports Mini-Program & Teacher Dashboard

Vue / uni-app student training interfaces and a teacher management dashboard, serving multiple universities and Shanghai primary schools. The product combines running, camera-based exercise counting, weak-network data saving and deferred uploads with student results and report exports.

Commercial work · Used by schools

CONTEXT

Danzhu (淡竹)

MY ROLE

Frontend development · Student mini-program & teacher dashboard

TOOLS & FOCUS

Vue / uni-app · Camera-based exercise tracking · Weak-network resilience · Peak running traffic · Teacher dashboard & exports · Age-specific experiences

PRODUCT SNAPSHOT / VUE + UNI-APP

A running session, on mobile.

Student training, teacher reporting.

I contributed to a sports mini-program built with Vue and uni-app, supporting student running and camera-based free training, with a teacher dashboard for reviewing results and exporting reports. This selected screen from the running mode shows an activity timer, progress, running metrics and in-session controls.

Visit Danzhu’s official website ↗

Company website · For product context

What I can show.

The full screen also includes a route map and checkpoints. Personal identifiers and location details are redacted; the preview focuses on the activity controls.

Many of the commercial interfaces I worked on are not suitable for public display. This selected screenshot complements the written case study; the remaining work is described through my responsibilities and technical approach.

Privacy-redacted running mini-program screen showing a session timer, activity metrics, a lock control and an end-session control. The portrait, title and map are concealed. — Running mini-program · Vue / uni-app
Selected activity controls · AI-assisted privacy redaction.

01 / THE PROBLEM

What needed to work.

Students needed running and free-training tools, while teachers needed a management system to review results and export score reports. Running periods brought high concurrent usage, and weak connectivity required training data to be saved for later upload. University and primary-school versions also needed different movement-assessment criteria and age-appropriate visual and spoken feedback.

CONCEPT / 12

01Student training

02Save + upload results

03Teacher review + export

Illustrative workflow · Not a product screenshot

A summary of my responsibilities and technical approach. This workflow illustration does not reproduce the product UI.

02 / MY CONTRIBUTION

Where I took ownership.

Developed Vue / uni-app student interfaces for running and free training, including running metrics, route maps and checkpoints.
Integrated phone-camera capture for exercise statistics across sit-ups, jumping jacks, squats and other activities.
Worked on weak-network data saving and deferred uploads for student training sessions.
Optimized frontend performance for high concurrent usage during peak student running periods.
Worked on teacher management interfaces for reviewing student results and exporting score reports.
Adapted interface presentation and voice feedback for university and primary-school versions with different AI movement-assessment criteria.

03 / TECHNICAL APPROACH

Decisions in context.

Keep training data through weak connectivity

The mini-program saved training data under weak-network conditions and deferred uploads. This allowed recording and transmission to happen at different times, addressing the connectivity constraints of student training.

04 / DELIVERY & REFLECTION

What I can share.

Delivery.

The mini-program served multiple universities and multiple primary schools in Shanghai. My frontend work covered student training, peak-period performance optimization, weak-network data handling, teacher result management and report exports, with separate university and primary-school experiences. The gallery shows an original, privacy-redacted running-session screenshot.

Have a similar challenge?

Let’s talk ↗