Smart Guardian Band

Elevator Pitch

Keep your loved ones safer and healthier. Smart Guardian Band turns wearable signals into actionable insights and one-tap emergency assistance — all in a delightful, responsive dashboard.

Story (Hackathon style)

Inspiration

Late nights checking on our grandparents made us wonder: could a wearable feel like a guardian angel? We wanted something beyond raw numbers — a humane interface that tells a story: how you slept, when your heart worked hardest, and whether a quick call could make all the difference.

We were inspired by everyday routines — morning walks, afternoon naps, evening exercises — and designed interactions around them: subtle pulses, playful micro-interactions, and informative visualizations that reduce anxiety while increasing awareness.

What it does

Real-time heart rate, blood pressure, sleep, steps, and exercise tracking
One-tap emergency call workflow with visual feedback
Location tracking and alarm center for safety events
Rich visualizations (Area/Line/Bar/Pie, gauges, heatmaps) with responsive layout
Notification and data-update indicators that feel alive, not noisy

How we built it

We layered elegant UI motion (Framer Motion) on top of React + TypeScript, visualized signals via Recharts, and structured UI primitives (Radix, Tailwind). We designed component families (EnhancedAnimations, EnhancedColorTheme, ResponsiveEnhancements) to keep UX consistent and reusable.

We especially struggled with maintaining responsive visual density across mobile/tablet/desktop while keeping charts readable; we resolved it by building ResponsiveContainer, ResponsiveGrid, and adaptive badges, then binding them to real-time streams.

Challenges we ran into

Internationalization of storytelling components without sacrificing motion and feedback cues
Balancing performance with rich animations and real-time data updates
Harmonizing chart theming for accessibility (contrast, color meaning, motion sensitivity)

Accomplishments that we're proud of

A beginner-friendly, yet professional dashboard that remains playful and approachable
Cohesive design primitives that scale across pages and use cases
A frictionless dev experience (Vite + TS paths + ESLint + Tailwind) suitable for rapid iteration

What we learned

UX matters most when systems are safety-critical: clarity, rhythm, and restraint beat raw volume of data
Thoughtful motion design can reduce cognitive load and improve comprehension
Hackathon velocity doesn’t have to compromise code quality with modern tooling

What's next for Untitled

Product: proactive wellness insights, caregiver collaboration, and privacy-first data sharing
Platform: open plugin interface for device vendors and research teams
Business: B2B partnerships with eldercare providers and insurance, plus a freemium family app
Research: anomaly detection in time-series biometrics; we model risk as:

$$\small P(\text{alert}\mid x) \,=\, \sigma\big(w^\top x + b\big) \quad \text{with} \quad x \in \mathbb{R}^d$$

and heart rate variability via RMSSD:

$$\mathrm{RMSSD} = \sqrt{\frac{1}{N-1}\sum_{i=1}^{N-1}\big(RR_{i+1} - RR_i\big)^2}$$

Tech Stack

Core: react@18, typescript@~5.8, vite@^6
UI & Motion: framer-motion, tailwindcss, lucide-react, @radix-ui/react-*
Charts: recharts (Area, Line, Bar, Pie, Gauge, Heatmap)
Routing: react-router-dom@7
State & Utils: zustand, clsx, tailwind-merge
DevX: eslint@9, typescript-eslint, vite-tsconfig-paths

Project Structure

src/
  App.tsx                # App routes & layout
  main.tsx               # Entry point
  index.css              # Tailwind styles
  components/
    Layout.tsx           # Top-level responsive layout & navigation
    EnhancedAnimations.tsx
    EnhancedColorTheme.tsx
    ResponsiveEnhancements.tsx
    EnhancedDataVisualization.tsx
    ModernDesignComponents.tsx
    EnhancedCharts.tsx
    MicroInteractions.tsx
    PageTransition.tsx
  pages/
    Dashboard.tsx        # Overview & quick actions
    HealthMonitor.tsx    # Detailed metrics & charts
    LocationTracking.tsx # Map & movement
    AlarmCenter.tsx      # Alerts
    EmergencyHelp.tsx    # One-tap help
    UserSettings.tsx     # Preferences

Getting Started

Prerequisites: Node.js 18+, pnpm

pnpm install
pnpm run dev

Local: http://localhost:5173 (auto-switched if port busy)

How It Works

Information flow
- Sensors → app state → charts + indicators
- User actions → feedback (haptic/audio/motion) → navigation/routes
- Notifications → responsive badges → visual emphasis without overload
Logic map

[Wearable signals]
      ↓
[App State & Hooks] ── useResponsive / useTheme / streams
      ↓
[Visualization] ── Recharts + Motion + Tailwind
      ↓
[Actions] ── Emergency • Location • Alarms • Settings