See your mental load. Act before burnout.

A mobile-first cognitive bandwidth monitor that visualizes mental load in real time — like a heart rate monitor for your mind — and suggests interventions before you hit overload.

• Production URL: https://shadowesu.github.io/Headspace_App/
• Optimized for mobile; best viewed on a phone-sized viewport.

npm i
npm run dev

Open http://localhost:5500/Headspace_App/ — visit / (Onboarding) or /home (dashboard).

The Environment Radar (/environment-radar) fetches live data directly from your browser:

Add optional keys to .env:

VITE_OPENWEATHER_API_KEY=   # Enhanced weather
VITE_NEWS_API_KEY=          # News headlines for stress context

The /hospitals page uses Google Maps Places API:

1. Copy .env.example to .env
2. Get an API key from Google Cloud Console
3. Enable Maps JavaScript API and Places API
4. Add VITE_GOOGLE_MAPS_API_KEY=your_key to .env

The original UI was designed in Figma (Headspace cognitive bandwidth dashboard with bento-style cards, breathing orb, and mobile-first layout).
You can link your file here, for example:

• Figma prototype: add your Figma link here

The app is configured and live at https://shadowesu.github.io/Headspace_App/:

1. Enable GitHub Pages: Settings → Pages → Source: GitHub Actions
2. Push to main — the workflow builds and deploys automatically

Or deploy manually:

npm run build
npm run deploy:gh

1. Import repo at vercel.com
2. Build: npm run build — Output: dist
3. Add env vars for Google Maps, OpenWeather, NewsAPI
4. Deploy

1. Import from Git at netlify.com
2. Build: npm run build — Publish: dist
3. Deploy

npm run build
npm run preview

Opens at http://localhost:4173/Headspace_App/

React 18 · TypeScript · Vite · Tailwind CSS v4 · Motion · shadcn/ui · Recharts

MIT