PetCare

Home page
SOS Modal
Foster Modal
Care page, today tab
Memory feed
Shop page, products tab
Pwa install

Inspiration

I don't have a pet yet. But I love animals, and I want to have my own house with pets someday.

Living in Cox's Bazar, Bangladesh, I noticed a real problem: when a pet gets lost or injured, most people don't know who to call. There's no unified system for animal rescue, no emergency hotline, no easy way to find nearby vets. Pet owners juggle between 5+ apps — one for health tracking, one for shopping, one for booking vet appointments, one for community. Vets and small pet store owners have no unified platform to reach their audience.

I also noticed something else: many people rescue kittens and post about it on Instagram stories, hoping someone will adopt them. But most pet lovers who actually want to adopt never see those stories. There's a gap between rescuers and adopters.

I thought: what if I built a small "pet city" — one app that has everything a pet needs? PetCare is my answer.

What it does

PetCare is a Progressive Web App (PWA) that combines 6 apps in one:

Multi-Pet Health Tracking — unlimited pets, weight charts with Chart.js, vaccination records, medication reminders, health logs, custom care items, and a real streak system based on actual daily completion.
E-Commerce — product catalog across 8 categories, shopping cart, multi-method checkout (bKash, Card, COD), 4-stage order tracking, wishlist, and favorite stores.
Vet Appointments — book chat, video, or in-person consultations with history tracking.
Memories (Social Feed) — posts with likes, comments, nested replies, save/share, follow/unfollow, and search across users, posts, and tags.
Emergency SOS — report injured, lost, or abused animals, 5-stage tracking timeline, auto-assign nearest open vet using Haversine formula, plus 6 first-aid emergency guides.
Foster & Adopt — verified rescue organizations with badges, community-listed foster pets, full application workflow (apply, review, accept/reject), donation tracking, and organization profile pages.

Plus a multi-role system (Pet Owner / Vet / Store Owner), light and dark modes, PWA installability, offline support, and a one-click demo mode for judges.

How we built it

I built the entire thing on an Android phone — a Samsung Galaxy A30. No laptop. No desktop. Every line of code was typed on a touchscreen using Acode editor.

Tech stack:

Vanilla JavaScript (ES6+) — no framework
HTML5 + CSS3 with CSS variables, Grid, and Flexbox
LocalStorage for persistence
Service Worker + Web App Manifest for PWA
Chart.js for weight charts
jsPDF for health records export
Canvas Confetti for celebrations
Font Awesome 6 for icons
Hosted on GitHub Pages

Architecture: Three-layer design — Core (app, data, utilities), Features (home, shop, care, foster), and Social/Profile. Each layer depends only on layers above it. Every page render is a pure function that reads state and produces HTML.

Challenges we ran into

1. Building without a laptop. No multi-window, no keyboard shortcuts. Every Ctrl+C was done by tapping. I used Acode editor, Chrome for Android with chrome://inspect for debugging, and GitHub Mobile for commits.

2. Making features feel real, not fake. My first streak system used Math.random() — judges would notice. I rewrote it to read actual care history and count consecutive days with 3+ completed items. Same for SOS tracking (real timeline with persistence) and vet distance (real Haversine calculation).

3. Race conditions in demo mode. User's foster listings were being overwritten on page reload. Fixed with a backup localStorage key and synchronous injection before reload.

4. PWA offline support. My first service worker cached nothing because one failed asset broke the entire cache. Switched from Promise.all() to Promise.allSettled() so individual failures don't break everything.

5. State management without a framework. Data flow between 10+ pages. Solution: single source of truth (localStorage), helper functions shared across modules, and event-driven re-rendering on page switch.

Accomplishments that we're proud of

Built entirely on Android — no laptop used
Installable PWA that works offline
Rich demo mode loading 3 pets, 48 health logs, 10 posts in one click
Real logic for streak, SOS tracking, vet distance, and foster workflow
Multi-role system with vet application and store creation
18,000+ lines of hand-typed code
Zero frameworks — pure vanilla JavaScript
Multi-role posting (post as Pet Owner, Vet, or Store Owner)
Verified rescue organization system with green checkmark badges

What we learned

Technical lessons:

PWA architecture — service workers, caching strategies, install prompts
State management without a framework
Real data models beat fake data every time
Security basics — escapeHtml() prevents XSS in user content
CSS architecture — variables for theming, responsive Grid
Haversine formula for real distance calculation

Non-technical lessons:

Mobile-first development — literally, since I built on mobile
Debugging systematically — console, DevTools, breakpoints
Documenting honestly — mistakes are the most valuable part
Focus beats features — a small app with real logic beats a big app with fake logic

Biggest surprise: I learned more from bugs than from tutorials.

Biggest pride: Building this entire thing on an Android phone without a laptop.