Wellbeing Ecosystem
A front-end prototype for a wellbeing platform: structured day-by-day programs, a personalised dashboard, six kinds of activity, reflections, progress tracking, an AI guide with crisis-safety guardrails, and an admin area — all clickable.
A whole wellbeing platform, proven as a working front end
The MVP exists to settle the product questions before any backend is written: what a member sees on day three, how an activity ends, what the guide does when someone is not okay. It runs entirely in the browser with localStorage standing in for the database, so the whole journey can be walked end to end without an account.
Structured programs
Multi-day pathways broken into a day-by-day sequence, so a member always knows what the current day asks of them.
Personalised dashboard
A home screen assembled from onboarding answers — current pathway, the day's activities and streaks in one view.
Six activity types
Read, listen, practise, reflect, habit and reset — each with its own player and its own completion model.
Reflections
Guided prompts captured after an activity or a program day, kept as a private running journal.
Progress tracking
Completion, streaks and pathway progress rolled up over time rather than shown one session at a time.
AI wellbeing guide
A conversational guide with crisis-safety guardrails that route distress signals to support instead of advice.
Admin area
A back-office view over programs, activities and member activity for the team running the platform.
Built with
- React 18
- TypeScript
- Vite
- Tailwind CSS
- framer-motion
- react-router
- TanStack Query
- localStorage persistence
Open the real thing
The full app, deployed and interactive. Nothing is mocked away — the preview below is that same build, embedded. Any progress you make is stored in your own browser and nowhere else.
How it was scoped and drawn
The build plan lives inside the app itself, and the interface was drawn as design canvases before any of it was coded.
The plan — scope, tiers, and what ships when
A route inside the demonstration app, at /ui-wellbeing-ecosystem-complete.
UI design canvases
Each canvas is a self-contained page of artboards covering one surface of the ecosystem.
Every screen, and how to reach it
Paths are relative to /mvp/wellbeing-ecosystem/demonstration. Every one is a deep link — click it to land straight on that screen.
| Screen | Path | Entry point in the app |
|---|---|---|
| Landing | / | — |
| Onboarding | /onboarding | “Get Started” on landing |
| Dashboard | /dashboard | “Home” in the nav |
| Programs list | /programs | “Programs” in the nav |
| Program detail | /program or /program/confidence-reset | Program cards |
| Today's activities | /activity | Dashboard pathway cards |
| Reflection | /reflection | From program/activity screens |
| Progress | /progress | “Progress” in the nav |
| AI Guide | /guide | “Guide” in the nav |
| Admin dashboard | /admin | Shield icon in the nav |