GuardianEye

Real-time child safety alerts for parents who can't watch a screen all day.

Comment

## Inspiration

My 8-year-old daughter received an explicit image on Snapchat. She told me — but only after she'd already seen it. It was too late. Existing tools like Bark catch things — but often with a 48-hour lag. By the time the alert reaches you, the moment has passed. I wanted something that tells me now, so I can have a calm, informed conversation with my daughter instead of a reactive one two days later.

## What it does GuardianEye is a real-time parent dashboard that monitors a child's digital activity and sends push notifications the moment something flagged happens.

  • Alert feed — urgent events (self-harm signals, explicit content) surface in red at the top; warnings in yellow below
  • Event detail — full conversation thread in the original language (Macedonian Cyrillic, Serbian, English), sender info, first-contact flag
  • Weekly report — activity grouped by category so you can have an informed conversation, not a surveillance debrief
  • Push notifications — urgent events push directly to your phone within seconds via Web Push API
  • Child simulator — fires mock events so you can test the full loop without a real monitoring agent ---

## How we built it Next.js 15 App Router + TypeScript + Tailwind CSS v4. No database — React context + localStorage for state, a module-level in-memory store for the API layer. Real-time delivery via client-side polling every 3 seconds. Push notifications via the Web Push API (web-push package) with VAPID keys — no Firebase, no vendor dependency. Deployed on Vercel (HTTPS required for both PWA install and Web Push). Installable as a PWA on Android from Chrome. The entire project was spec-driven: learner profile → scope → PRD → technical spec → build checklist, before a single line of code was written.

## Challenges we ran into

  • Web Push end-to-end — getting the full loop working (simulator → API → push send → phone notification → tap → correct alert detail) required careful coordination across the service worker, VAPID keys, subscription storage, and Vercel cold-start re-subscribe workaround
  • Next.js 15 + TypeScript strict mode — several patterns that work in looser configs (setState in effects, Uint8Array.from() return types, server/client boundary crossings) required proper fixes
  • Multilingual rendering — Macedonian Cyrillic, Serbian Latin, and English all in the same conversation thread; had to ensure no stripping or encoding corruption anywhere in the stack ---

## Accomplishments that we're proud of

  • Push notification arrives on your phone within 3 seconds of a simulator event firing — the core promise of the app, working end-to-end
  • Built and deployed a full PWA with a working spec-driven process, starting from scratch with no prior greenfield experience
  • The project story (the Snapchat incident → the 48-hour lag problem → real-time awareness) is real, personal, and holds together as a coherent product argument ---

## What we learned

Writing a spec before building is not overhead — it's the thing that prevents the build from becoming a debugging session. Every component I built already knew what data it needed, where it came from, and what it was responsible for. The checklist meant I was never asking "what do I do next?" Also: Web Push API is more capable than I expected, and doesn't need Firebase.

## What's next for GuardianEye

  • Real monitoring agent (Android) — currently the child-side is simulated; a real agent that hooks into notification APIs is v2
  • PC/Mac monitoring client — the mock data includes PC events; a real desktop agent would close that gap
  • Multi-child support — the data model is single-child; extending to siblings is straightforward
  • Contact allow-listing with the child — turning the approved contacts list into a co-managed feature the child participates in, not just something the parent controls

Built With

Share this project:

Updates