Personal project · Household preparedness
Bantay Init.
A household preparedness web app for Filipino families. Check local heat forecasts, track drinking water and food, plan daily tasks, and keep practical guides close by, with English, Filipino, and Cebuano support.
- My role
- Product design · Full-stack development
- Project type
- Personal project · Progressive web app
- Year
- 2026
The challenge
A household needs more than a heat forecast. It needs a way to connect the weather with the water on hand, food in storage, people who need a check-in, and tasks that still need doing. Those everyday decisions also have to stay accessible when the internet is unreliable.
The approach
Start with the household’s location and needs, then bring the next useful actions into one daily view. A React and Vite app keeps household records in the browser and bundles its guides for offline use. Server endpoints handle weather, water-place lookups, and the optional AI assistant. The interface identifies the forecast source and time, and works in English, Filipino, and Cebuano.
- Local heat outlooks with hourly forecasts, provider details, and saved-data states.
- Drinking-water inventory, food and outage records, household supplies, and a food budget.
- Daily tasks, reminders, family contacts, and household copies shared through a link or file.
- A water-place map, practical guides, and an assistant that can answer weather questions or open relevant guides.
- An installable web app with offline guides and household tools in English, Filipino, and Cebuano.
Engineering
- Household appReact · Vite · Tailwind CSS · i18next
- Connected servicesNode.js · Weather APIs · Mapbox · OpenAI
- On-device recordslocalStorage · Workbox · Service worker
- Keep everyday tools on the device
- Household details, inventory, tasks, and saved places live in browser storage. The service worker caches the app and bundled guides so these tools remain available without a connection.
- Show where forecasts come from
- Weather requests pass through a server endpoint that keeps provider credentials out of the browser. Forecasts carry their provider and timestamp, while saved readings and calculated heat index have explicit labels.
- Share a household copy
- A family plan travels through a link or file, with validation and a preview before import. Each phone keeps its own records, so the interface explains that a shared copy does not stay synchronized.
Checks & walkthrough
The project includes automated checks for household records, forecast caching and locations, family sharing, and assistant weather replies.
The outcome
- Before
- Forecasts, stock notes, family contacts, and household tasks are separate pieces of information to keep track of.
- With Bantay Init
- The app brings those pieces into a daily household view, with local records and saved guides available between connections.
What I learned
A tool for unreliable connections has to make the age and source of its information clear. Keeping household records on the device makes the everyday tools dependable, while explicit sharing makes it clear when a family member is receiving a copy of the plan.
Built with
- Web app
- React
- JavaScript
- Vite
- Tailwind CSS
- Offline & local records
- Service Workers
- Workbox
- localStorage
- Weather & maps
- Meteoblue
- Open-Meteo
- Mapbox GL JS
- OpenStreetMap
- Server & assistant
- Node.js
- Vercel Functions
- OpenAI Responses API
- Languages
- i18next
- English
- Filipino
- Cebuano