Emoted
A simple, accessible app to help kids learn about and check in with their feelings — built to run on web, iOS, and Android from one codebase.
Based on the "Emoted" UX case study (emotion learning for kids, with a friendly read-aloud companion, high-contrast kid-friendly visuals, and emoji-labeled emotions).
Tech stack
- Expo + React Native (TypeScript), using Expo Router for file-based navigation across all three platforms.
- expo-speech for text-to-speech ("read aloud" on every screen) — this is the app's core accessibility feature, standing in for the case study's "friendly pet that reads aloud."
- AsyncStorage for all persistence. Everything (name, age, chosen companion, journal entries, preferences) stays on-device only — no accounts, no backend, nothing sent anywhere.
Getting started
npm install
npm run web # run in the browser
npm run ios # run in iOS Simulator (macOS + Xcode required)
npm run android # run in an Android emulator
Or scan the QR code from npx expo start in the Expo Go app on a physical phone.
App structure
app/
onboarding/ welcome -> name -> age -> companion -> first check-in
(tabs)/
index.tsx Home: mood check-in + quick actions
emotions/ Emotion Library: browse + learn about each feeling
calm/ Calm-down tools: breathing, 5-4-3-2-1 grounding
journal.tsx A private, on-device log of logged feelings
settings.tsx Edit profile, accessibility prefs, reset data
components/ Shared UI: buttons, cards, the read-aloud button, etc.
context/ UserContext (profile+prefs), MoodHistoryContext (journal)
data/ Emotion library content, companions, calm-down scripts
hooks/ useSpeech (read-aloud), useReduceMotion
Onboarding
Per your request, the onboarding flow is: Welcome → name (optional) → age (optional) → pick a companion → first mood check-in (optional). Every question has a visible "Skip" option, and skipping is a first-class path, not a hidden one. Age is only used locally to pick simpler vs. more nuanced wording for emotion descriptions — it's never required, and the app works the same either way ("unknown" age uses the middle-ground reading level).
Accessibility choices
- Read aloud everywhere: every explanation, prompt, and instruction has a speaker button, and the child's chosen companion can read the whole screen. A "read screens out loud automatically" setting is on by default.
- Text always respects the device's OS-level font-scaling setting (nothing disables
allowFontScaling), plus an in-app "Bigger text" toggle on top of that.
- High-contrast color palette; meaning is never carried by color alone — every emotion/mood tile pairs color with an emoji and a text label.
- All touch targets are at least 48×48, with explicit
accessibilityRole/accessibilityLabels throughout.
- A "Reduce animations" setting (plus respecting the OS-level reduce-motion setting) turns off the breathing exercise's animation, leaving the numeric countdown and read-aloud guidance intact.
What's still a placeholder / next steps
- App icons & splash screen are the default Expo placeholders — swap
assets/icon.png, assets/splash-icon.png, etc. with real artwork.
- Emotion library content (11 emotions with body-feelings, coping tips, etc.) is a solid starting set per the case study's "add a greater range of emotions" next step, but a grown-up/clinician review pass before shipping is worth doing.
- No accounts or parental dashboard yet — everything is single-device, local-only by design for this first version.
app.json's ios.bundleIdentifier / android.package (com.emoted.app) are placeholders — change them before submitting to app stores.
