SafeNest

The Challenge

Wildfire risk in Greece pushes families to prepare before evacuation is the only option left. Official guidance exists, but it's scattered. Under stress, long PDFs and emergency portals are hard to use on a phone, especially on a weak connection.

SafeNest tries to turn civil-protection thinking into steps you can actually do at home. A preview is live at safenest.gr while we still wire production pieces.

The Solution

The flow is five quiet steps: tailor a home checklist, pack a go-bag, plan routes and meeting points, print a one-page fridge plan, know what to do during a fire.

Most content is static Astro HTML for speed and SEO. Vue islands only show up where progress, filters, or persistence need reactivity. The checklist saves automatically so families can spread prep over days. Regional fire-danger context uses demo data today; we're hooking official civil-protection feeds next. Print output is meant for the fridge when networks fail. After install, the PWA should work offline, with explicit iOS install notes because Apple still makes that weird. Separate routes cover during-fire behavior, defensive space, and emergency contacts.

Technical Architecture

Astro owns layouts and guide routes. Vue islands handle checklist progress, local storage, and the interactive bits. Tailwind keeps spacing and Greek typography readable under stress.

We didn't ship a SPA. HTML stays crawlable, LCP stays sane, and content updates stay boring in a good way. Islands are scoped widgets with obvious recovery if state gets weird. Service worker and install prompts are in place; some live data paths still carry demo labels until backends land.

SEO-wise each guide section has semantic structure, shareable URLs for checklist, bag, plan, and print flows, and meta aimed at preparedness queries rather than generic marketing copy.

My Role & Contributions

I led front-end architecture for the public experience. That included the five-step story, routes like /checklist, /bag, /plan, /print, /during, /zones, /contacts, and the home risk summary. Vue components cover progress bars and persistence while the document shell stays static. PWA work covers install prompts and offline behavior when connectivity drops. Metadata and heading hierarchy were tuned so the site can show up as a civic resource, not a startup landing page.

Challenges & Learnings

Life-safety copy has to stay calm even when the UI holds non-trivial state. We're not production-complete yet, so feature flags and demo labels mark gaps instead of faking live data. Static prose carries trust; islands stay small and self-contained. So far the split feels right: HTML for what shouldn't break, Vue for the few interactions that do.

Impact & Results

Core flows work for preview and testing on safenest.gr. Official feeds and launch polish are still in flight. The checklist targets roughly eight minutes end to end. Progress and print outputs are designed for the fridge and the go-bag, not just the screen. Early feedback keeps pointing at structure over panic: short steps, saved progress, offline access, something printable when the network dies.