Solace

A daily self-love and self-compassion practice, in the browser. No install, no account, no tracking — just you and a few minutes a day.

Built as a lightweight, installable web app (PWA). Works offline-first after the first load, stores everything locally on-device, and is available in 7 languages.

---

What it does

• Daily affirmations — a new one each visit, with an option to browse the full set
• Belief reframing — pairs a limiting belief with an empowering one
• 5-minute guided exercises — short, evidence-informed practices (mirror work, self-compassion touch, gratitude, letter-writing, body scan), each with a built-in timer and a one-line explanation of why it works
• Daily journal — a private, freeform space to write, with automatic RTL/LTR text direction detection
• Self-love goals — a simple weekly checklist
• Streak tracking — counts consecutive days of any activity
• Time-of-day visuals — the home screen background changes across morning / afternoon / evening / night, each with its own photo and a soft animated light-glint overlay
• Ambient music — four generated ambient tracks (Web Audio API, no external files), plus a field to paste a link to your own track
• 7 languages — Persian, English, German, Arabic, Italian, Spanish, Serbian
• Personalized greetings — greets the user by name, with a rotating warm adjective, matched to the real time of day
• Installable — "Add to Home Screen" on iOS/Android turns it into a full-screen app icon

Tech stack

• React 18 (UMD build, no bundler) + Babel Standalone (in-browser JSX transform)
• Tailwind CSS (via CDN)
• Web Audio API for the ambient music engine
• All background photos are embedded directly in the code as base64 — nothing is fetched from an external server, so it works reliably offline and inside sandboxed previews
• Data persistence: localStorage in the standalone build (falls back to Claude's window.storage API when run as a Claude artifact)
• No backend, no database, no build step — it's a single index.html you can open directly

Getting started

Locally: open index.html in any modern browser. No installation needed.

Hosted (GitHub Pages): push this repo, then enable Pages in Settings → Pages → Deploy from branch → main → /root. Share the resulting URL — anyone who opens it gets their own private, local instance (nobody's data is shared between visitors).

Adding real music (no code changes needed)

The app now automatically looks for real audio files before falling back to the synthesized placeholder. To switch a track from placeholder to real music:

1. Get a royalty-free track. Pixabay Music is a good free source — search for a mood (e.g. "calm", "dreamy", "uplifting acoustic", "night meditation"), preview a few, and click Free Download on the one you like. No attribution required, free for this kind of use.
2. Rename the downloaded file to match the track it should replace:
   • music/calming.mp3 → the "Calming" track
   • music/dreamy.mp3 → the "Dreamy" track
   • music/uplifting.mp3 → the "Uplifting" track
   • music/night-calm.mp3 → the "Night Calm" track
3. Create a music folder next to index.html and drop the file(s) in.
4. Push to GitHub (or just refresh locally). The app checks for these files first automatically — any track you've added plays for real; any you haven't yet still falls back to the gentle synthesized placeholder. No code edits required, and you can add them one at a time.

Known limitations

Being upfront about where this stands today:

• Music defaults to placeholders until you add real files. The four built-in tracks are simple synthesized ambient pads generated in-browser — pleasant, but not produced music. The app will automatically switch to real audio the moment you drop correctly-named mp3 files into a music/ folder (see "Adding real music" above) — no code changes needed, but that step hasn't been done yet for this deployment.
• No account or cross-device sync. Everything is stored in that one browser, on that one device. Clearing browser data or switching phones means starting over. There's no login and no server — by design, for privacy — but that also means no backup.
• No automated tests. The app has been manually tested across the main flows (all 4 time-of-day states, all 7 languages, journal/goals/streak persistence), but there's no test suite guarding against regressions.
• Single large file. Because the photos are embedded as base64 rather than loaded from a CDN, index.html is large (~450KB+). That's a reasonable trade-off for reliability (works offline, no broken links, no CORS issues), but it's not how a production app at scale would typically ship images.
• Limited browser/device testing. Verified on recent Chrome and Safari. Older browsers, or less common ones, haven't been checked.
• Time-of-day is device-clock-based. There's no manual override, so if a device's clock or timezone is wrong, the visuals/greeting will be too.
• Accessibility hasn't been audited. Basic semantics (buttons, labels) are in place, but there's been no screen-reader or keyboard-navigation testing.

Roadmap ideas

• A small library of real, licensed ambient tracks instead of synthesized placeholders
• Optional cloud sync (would require adding a backend)
• Automated visual regression tests across time-of-day states and languages
• Accessibility audit and fixes

Credits

Designed and developed by Mahbube bejam.

This project was created as part of my software engineering portfolio.