HabitSpark

Home page
habit page
## Inspiration
While juggling coursework, freelance work, and family life, I wanted a **friction-free habit tracker** that:

* works even on spotty Wi-Fi commutes  
* never demands a signup or subscription  
* feels rewarding the moment I tick a box  

The Devpost **One-Shot Bonus** fit perfectly: _Could I ship a polished, offline PWA in just one Bolt.new prompt?_—HabitSpark is that experiment come to life.

---

## What it does
* **Add habits in seconds**—specify a name and frequency, hit Save.  
* **Daily streaks & confetti**—each completion sparks a flame icon and celebratory confetti; every 7-day multiple gets extra fireworks.  
* **Calendar heat-map**—visualise consistency over months.  
* **Dark mode**—one-click toggle that persists.  
* **100 % local data**—localStorage + Workbox keep everything offline; export/import JSON for backups.

---

## How we built it
| Layer          | Tech used                                  |
| -------------- | ------------------------------------------ |
| Framework      | **Vite + React + TypeScript**             |
| UI / Styling   | **Tailwind CSS**, Headless UI              |
| State          | **Zustand**                                |
| Persistence    | **localStorage** via `utils/habitStore.ts` |
| PWA            | **Workbox** service worker + web manifest  |
| Fun factor     | **confetti-js** for celebrations           |
| Data viz       | **d3-calendar-heatmap**                    |
| Testing        | **Vitest** (unit) & **Playwright** (E2E)   |

A single Bolt prompt generated the repo; only two cosmetic bug-fix commits (favicon path, mobile nav overflow) were added—**no new features**—to stay true to the One-Shot rules.

---

## Challenges we ran into
* **Prompt packing:** fitting all requirements—build commands, test scaffolds, PWA config—into one coherent prompt without race conditions.  
* **Timezone edge-cases:** streaks broke at midnight UTC; unit tests revealed the off-by-one and we patched with `startOfDay` synced to user locale.  
* **Service-worker caching:** initial `CacheFirst` strategy stale-dated data; we switched to `NetworkFirst` for JSON freshness.  
* **Mobile confetti lag:** throttled particle count on small screens to keep 60 fps.

---

## Accomplishments that we're proud of
* Shipped a **fully functional PWA** in a single generation pass.  
* Achieved **offline persistence** without any backend or external API.  
* Maintained **100 % TypeScript coverage** and automated tests—even inside the one-shot constraint.  
* Users can export/import their entire habit history with one click.

---

## What we learned
* **Prompt engineering** is half the battle—ordering instructions affects file creation order and post-generation scripts.  
* **Local-only apps** can still feel rich and rewarding with smart use of browser APIs.  
* Lightweight state libraries like **Zustand** pair beautifully with localStorage for tiny PWAs.  
* Confetti can turn mundane habit-tracking into a dopamine micro-hit that keeps users coming back.

---

## What's next for HabitSpark
1. **Local Notifications API**—optional reminders (“Time to meditate!”).  
2. **iCalendar integration**—export milestones to Google Calendar.  
3. **Social share cards**—auto-generate streak screenshots for Twitter/Threads.  
4. **Localization**—add Bengali 🇧🇩, Spanish 🇪🇸, and Arabic.  
5. **Installable desktop build** via Tauri for truly native-feeling offline use.

---

Built with ❤️ in one Bolt.new shot—give it a spin at **https://prismatic-starburst-105cf9.netlify.app**