A culturally grounded interactive web experience that turns China's 24 Solar Terms into a four-season journey through a Miao village.
Play the verified production build · Read the full case study · Review the product flow
Tencent Cloud Hackathon · Product Management · Release Readiness · Quality
| Challenge | Make an abstract cultural calendar system discoverable through a coherent, replayable digital experience. |
| Audience | Players curious about Chinese seasonal culture, narrative exploration and lightweight personality experiences. |
| Product shape | Browser-based narrative game: opening perception questions → AI-assisted reflection → four seasonal chapters → personality postcard. |
| My evidenced scope | Final-release stabilization, end-to-end flow integrity, acceptance criteria, regression coverage, deployment readiness and product/technical documentation. |
| Delivered scope | 4 seasonal chapters, 12 locations, 6 composite personality types, 12 gender-specific result-card variants and a stable Vercel release. |
The 24 Solar Terms are rich in cultural meaning, but a static explanation asks users to remember information before they feel any personal relevance. The product opportunity was to make that knowledge experiential: let players notice the weather, meet characters, make choices and only then reveal the seasonal patterns reflected in those choices.
The design challenge was not simply to add content. Four chapters, branching location order, emotional follow-ups and a final personality result create a state-management problem: every path must feel continuous, preserve the player's history and still reach a valid ending.
Cultural learning becomes more memorable when discovery, self-reflection and narrative consequence share one loop.
Solar Village therefore connects three layers:
- Perception — players describe today's atmosphere and guess a solar term.
- Exploration — they travel through four seasonal chapters and interact with three locations in each.
- Reflection — their choices accumulate into a deterministic composite personality result and a downloadable postcard.
AI is used as an enhancement for opening feedback, not as a dependency for the core journey. When a model key or call is unavailable, local rules keep the experience playable.
flowchart LR
A[Welcome] --> B[Perception questions]
B --> C[AI-assisted feedback]
C --> D[Four-season map]
D --> E[Season chapter]
E --> F[3 village locations]
F --> G[Emotion follow-up]
G --> H[Season stamp]
H --> D
D -->|All four complete| I[Composite personality]
I --> J[Downloadable postcard]
Each season is a repeatable product unit:
| Season | Theme | Locations | Completion signal |
|---|---|---|---|
| Beginning of Spring · 立春 | Renewal and first movement | 3 | Seasonal stamp |
| Grain Buds · 小满 | Growth without excess | 3 | Seasonal stamp |
| White Dew · 白露 | Clarity and transition | 3 | Seasonal stamp |
| Winter Solstice · 冬至 | Stillness and return | 3 | Seasonal stamp |
| Beginning of Spring · 立春 | Grain Buds · 小满 |
|---|---|
 |
 |
| White Dew · 白露 | Winter Solstice · 冬至 |
 |
 |
See the journey and state model for entry, recovery and completion rules.
I frame this portfolio around the release phase I can substantiate from the original private repository. A stabilization commit authored under WJune999 (2d2aee7e) records the final four-season integration across 75 files, including the following product outcomes:
- Repaired the complete four-season journey and the transition into the final personality result.
- Resolved blind-spot content overlap and Winter Solstice map interaction issues.
- Added gender selection and bound it to the appropriate result-card variant.
- Constrained the interactive map and scene system to a consistent 800 × 450 canvas.
- Added offline, online and visual regression coverage for the release-critical path.
- Strengthened deployment configuration, environment guidance, change notes and handoff documentation.
This is not a claim of sole authorship. Solar Village is a team project; concept development, cultural content, visual design and the broader codebase are credited collectively. The evidence and attribution note separates repository evidence, team outcomes and portfolio interpretation.
Opening feedback may use an LLM, but deterministic local rules provide a fallback. A cultural experience should not fail because a model key is missing, a request times out or a provider is unavailable.
Map stamps communicate progress; the scoring path determines whether the journey is actually complete. Treating a visual badge as the source of truth caused premature transitions. The release model made the answer path canonical and synchronized map state from it.
An 800 × 450 game canvas keeps map, video and narrative scenes aligned across browsers. Cropping rules and regression assertions protect the authored composition.
Location and emotion choices contribute to separate dimension and seasonal-resonance scores. Tie-breaking is rule-based, and the six possible Top-2 season combinations always map to a valid result card.
The stable release excludes BGM rather than ship unlicensed audio or introduce autoplay and loading failures. The team documented an implementation and acceptance plan for a later iteration.
Read the full decision narrative.
The final release was validated against concrete delivery evidence rather than unverified growth claims:
- A new session can complete the full sequence from welcome to personality result.
- Both gender selections resolve to the intended result-card set.
- All four seasons and 12 locations participate in the completion model.
- Six composite personality combinations have male and female visual variants: 12 result cards in total.
- The serverless build supports a local deterministic fallback when the optional LLM integration is unavailable.
- Visual and end-to-end regression tests cover the most failure-prone paths.
No acquisition, retention or satisfaction metrics were available in the repository, so this case study does not invent them. A future measurement plan is included in the full case study.
Release acceptance focused on the path users would actually experience:
- Fresh-session reset and recovery
- Four-season completion in more than one play order
- Emotion pipeline continuity
- Stamp/scoring synchronization
- Correct personality gating and tie-breaking
- Male and female result-card rendering
- 800 × 450 map, video and scene bounds
- Static-asset availability in Vercel's serverless runtime
- Graceful LLM degradation
The detailed QA and acceptance matrix maps these risks to checks and evidence.
Solar Village is a server-rendered Flask application with a browser interaction layer, SQLite-backed sessions and Vercel serverless deployment.
flowchart TB
UI[Browser UI<br/>HTML · CSS · JavaScript] --> API[Flask routes & SSR]
API --> FSM[Journey state machine]
API --> LOGIC[Scoring · feedback · personality]
FSM --> DB[(SQLite session state)]
LOGIC --> DB
LOGIC -. optional .-> LLM[Zhipu-compatible LLM]
API --> ASSETS[Versioned static assets]
This architecture summary is intentionally high level: the public portfolio is a case study, not a mirror of the team's private source. See technical overview.
| Path | Purpose |
|---|---|
case-study/README.md |
Full product narrative, trade-offs and learnings |
docs/user-journey.md |
User journey, state transitions and recovery rules |
docs/qa-and-acceptance.md |
Risk-based release acceptance matrix |
docs/technical-overview.md |
Recruiter-friendly system overview |
docs/evidence-and-attribution.md |
Evidence boundaries, contribution wording and credits |
assets/README.md |
Visual asset manifest and reuse boundary |
NOTICE.md |
Rights and reuse notice |
- Portfolio owner: WJune999
- Original team repository:
WuKunhuan163/SolarVillage(private; retained as the collaboration and implementation record) - Production demo: solar-village-winter-final-0718.vercel.app
- Project context: Tencent Cloud Hackathon
The original repository has no root software license. This public repository therefore does not republish the private source tree. Its nine project visuals were explicitly supplied by the portfolio owner for case-study display; they remain team-attributed and are not offered for third-party reuse. See NOTICE.