ReactSpring Boot
Yichi
Interactive language learning platform for Chinese learners with dynamic lesson modules.
- Built interactive learning modules
- Integrated APIs for dynamic lesson rendering
Architecture
React handled the learner experience while Spring Boot powered lesson APIs, user progress, and adaptive content delivery.
→
→
→
Chose component-driven lesson blocks so new activity types could be shipped without refactoring the entire interface.
Technical Decisions
- Chose component-driven lesson blocks so new activity types could be shipped without refactoring the entire interface.
- Used API-driven content rendering to keep lesson updates decoupled from frontend deployments.
- Focused on responsive interaction patterns because users spent long sessions on tablets and smaller laptops.
Delivery Challenges
- Balancing rich interactions with performance on long lesson pages.
- Keeping lesson state predictable while users moved between exercises quickly.
- Reducing friction for content editors who needed frequent curriculum updates.
System Flow
- 01Learner selects a lesson path.
- 02Frontend requests lesson modules and progress state.
- 03Backend assembles lesson content and returns activity configuration.
- 04Progress events are persisted so the next session resumes cleanly.
Outcomes
- Created a modular lesson experience that could scale with new content formats.
- Improved the maintainability of the learning UI by standardizing activity rendering.
- Made curriculum delivery faster for the team shipping new lessons.
Screens / Flows
Lesson dashboardInteractive exercise flowProgress summary