🧱 App Review: BricksAndBreaths
Dream App Mock · JSON-powered mental wellness dashboard — by Jennifer Cheng
🔗 Loaded SRC URL
LOADED_SRC: https://producingtechnology.com/65-apps/chengjennifer_184757_15200470_dreamapp_mock_corrected.html
DESTINATION: same — no redirect detected
PAGE TITLE: "Loading…" (title stays at loading state; JSON fetch did not complete in static context)
📋 App Behavior Summary
BricksAndBreaths is a LEGO-themed mental wellness dashboard.
It describes itself as a "warm, interactive-looking mental wellness dashboard"
that fetches a remote JSON file from producingtechnology.com to
populate all of its content. The UI is organized into several distinct panels:
-
Today's Snapshot — a header card showing the user's preferred name,
current mood, check-in streak (in days), and check-in date
-
Daily Check-in — a mood scale widget for logging how the user feels
-
Reasons to Stay — a mental wellness anchor section, likely showing
the user's personal motivations or affirmations
-
LEGO-Inspired Builds — the most distinctive feature; uses LEGO
building as a creative metaphor for coping mechanisms or personal growth milestones
-
Grounding Rituals — split into Grounding and
Connection sub-sections, suggesting mindfulness exercises or
social anchoring prompts
-
Support — a section likely surfacing resources or contacts
The app is a single-file HTML mock that pulls all user data from a remote JSON
source rather than a real backend, making it a smart and lightweight proof-of-concept.
⚠️ Things That Didn't Work as Expected
-
Page title stuck on "Loading…" — the JSON fetch never
completed in the static fetch context, leaving the
<title> tag
permanently at its loading state. In a real browser this may resolve, but if the
remote JSON request fails or times out, the whole UI stays blank.
-
All dynamic fields show "—" — preferred name, mood, streak,
check-in date, mood scale, reasons, builds, and support content all render as
dashes when the JSON doesn't load. There's no visible fallback or error message
explaining why.
-
No loading error state — the app says
"Pulling your app data from the JSON file" but has no visible
error UI if that fetch fails. A user hitting a network issue would just see
an empty dashboard with no explanation.
-
Streak shows "0d" as a hard-coded default — this looks broken
rather than intentional; even a placeholder like "—" would be more consistent
with the rest of the loading state.
-
The LEGO metaphor isn't explained — "LEGO-Inspired Builds"
is a creative and distinctive concept but there's no onboarding copy explaining
what a "build" represents in a wellness context. A new user won't know if it means
a habit, a goal, a completed challenge, or something else entirely.
-
"Reasons to Stay" is a high-stakes phrase — in a mental wellness
context, this phrasing carries significant weight (often used in crisis/suicide
prevention). If that's intentional, it deserves careful, trauma-informed UX design.
If it's unintentional, a softer label like "My Anchors" or "What Matters to Me"
may be safer and less alarming for casual users.
-
No interactivity without JSON — the mood scale, check-in,
and grounding sections appear to be display-only mock UI. A user cannot actually
submit a mood or interact with the dashboard, which limits the demo's impact.
-
Single data source, no personalization — because it reads from
one shared JSON file, all users see the same name, streak, and content.
There's no way to personalize the experience without editing the JSON directly.
🧠 Suggested Improvement Prompt
Improve "BricksAndBreaths" — a LEGO-themed mental wellness dashboard that reads
from a remote JSON file. Make the following changes:
1. FETCH ERROR HANDLING
If the JSON fetch fails or times out, replace the loading spinner with a clear
error panel:
[ COULDN'T LOAD YOUR DATA — CHECK YOUR CONNECTION AND REFRESH ]
Never leave users staring at dashes with no explanation.
2. FIX PAGE TITLE ON LOAD
Update document.title dynamically after the JSON loads — e.g., set it to
"BricksAndBreaths — [Preferred Name]'s Dashboard" once data is available.
It should never display "Loading…" as the final title.
3. EXPLAIN THE LEGO BUILDS CONCEPT
Add a short tooltip, subtitle, or intro paragraph under "LEGO-Inspired Builds"
explaining what a "build" is in wellness terms — e.g., a habit stack, a coping
strategy completed, or a personal milestone. The metaphor is great but needs context.
4. REVISIT "REASONS TO STAY" LANGUAGE
Evaluate whether this phrasing is intentionally crisis-informed or accidental.
If intentional, add a small safe messaging notice and a crisis line link in the
Support section. If unintentional, consider softer alternatives like:
"My Anchors", "What Keeps Me Going", or "Things That Matter".
5. ADD A LOCAL FALLBACK / DEMO MODE
Hardcode a small sample JSON object inside the script as a fallback. If the
remote fetch fails, load this demo data instead so the UI always renders
meaningfully, even offline.
6. MAKE THE MOOD CHECK-IN INTERACTIVE
Wire the mood scale to actually register a click/tap and visually confirm
the selection (highlight the chosen mood, show a "Logged!" confirmation).
Even if it doesn't persist to a backend, the micro-interaction makes the
app feel real and complete.
7. PERSONALIZE VIA URL PARAM OR localStorage
Allow a ?user=name URL parameter or a simple name-entry prompt on first load
so the "Preferred name" field reflects the actual visitor rather than the
JSON's hardcoded value.
8. STREAK DISPLAY
Replace the hard-coded "0d" streak default with "—" to match the rest of the
loading state, and once data loads, animate the streak counter for delight
(e.g., count up from 0 to the real value over 0.5 seconds).