PetCare

A pet care companion connecting pet owners with verified vets — health tracking, emergency SOS, community feed, and pet shop. Everything in one app.

Comment

Inspiration

Pet owners juggle too many apps. One for health records. Another for shopping. A third for vet advice. When emergencies happen — an injured animal, a lost pet, a poisoning — most owners don't know where to turn. And there's nowhere for pet owners and veterinarians to actually talk to each other.

I wanted to fix this. PetCare is my answer: one app that handles health tracking, emergency response, community, and shopping — with a space built specifically for pet owners and verified vets to share knowledge.

What it does

PetCare is a complete pet care companion with five core areas:

Home Dashboard — A personalized greeting card featuring your pet, a weekly paw-print progress tracker, quick stats, and an always-visible Emergency SOS card.

Emergency & Rescue — Report injured, lost, or abused animals with live GPS location detection. Find nearby 24/7 vets and rescue centers. Access six first-aid guides (Choking, Poisoning, Bleeding, CPR, Heat Stroke, Fracture) with step-by-step instructions. Browse urgent foster pets needing immediate help.

Pet Care — Multi-pet health tracking with weight charts, vaccination records, medication reminders, daily care checklists, and a rule-based symptom guidance tool covering six common concerns.

Memories — A community feed where pet owners and verified veterinarians share tips, stories, awareness posts, and questions. Vets get a verified badge, and posts support likes and threaded comments.

Shop — Browse adoption listings, food, and accessories. Live search, filters, wishlist, cart, checkout, and 4-step order tracking.

Users can switch between Pet Owner and Veterinarian roles. Vets complete a license verification form to earn a verified badge in the community.

How I built it

Pure vanilla JavaScript — no frameworks, no build tools, no bundler.

  • HTML5 + CSS3 for a mobile-first responsive layout
  • Vanilla ES6+ JavaScript for all application logic
  • Chart.js for pet weight progress visualization
  • Swiper.js for product carousels
  • Font Awesome for icons
  • Canvas Confetti for delight moments
  • localStorage for offline-first data persistence
  • Swiper, Chart.js, Confetti loaded via CDN — no npm dependencies

The architecture is split into four files:

  • index.html — SPA shell
  • style.css — full stylesheet (~5000 lines)
  • script.js — application logic
  • api.js — backend-ready API layer with a mock mode toggle
  • drawer.js — the hamburger menu system

The API layer is the key architectural decision. Every network call (login, placeOrder, reportEmergency, contactFoster, etc.) goes through api.js. To connect a real backend, you flip one flag (USE_MOCK = false) and update the base URL — no other code changes needed.

Challenges I ran into

Challenges I faced

A very tight deadline — I discovered AnimalHack with only 2 days left before the submission deadline. I had plenty of ideas in my head, but I had to ruthlessly prioritize what was actually achievable. Every feature had to justify itself. Features like a chat system between vets and owners, appointment booking with calendars, and photo uploads with cloud storage had to be cut because there simply wasn't enough time to build them properly.

Real GPS in a browser — Getting navigator.geolocation to work smoothly with a graceful fallback when permissions are denied. I ended up building a detection flow that shows animated "detecting..." dots, then switches to either live coordinates or a fallback location, with a subtle pop animation on success.

State without a framework — Managing cart, wishlist, pets, health logs, notifications, reminders, medications, daily care, memories, and orders — all in vanilla JS — required careful planning. I built small persistence helpers (loadX / saveX) for each data domain, which keeps every feature independent and testable.

Design system consistency — Building a dark-mode-ready theme across five pages, 20+ modals, and dozens of interactive states took several iterations. Every color, radius, shadow, and transition had to work in both themes without breaking.

Making it feel alive — Utility apps can feel dead. I added scrapbook greeting cards, paw-print progress timelines, doodle accents, confetti bursts on successful actions, pulse rings on emergency buttons, and animated first-aid steps. The goal was for PetCare to feel warm and playful, not clinical.

Deploying at the last minute — Getting every file uploaded, GitHub Pages enabled, and the live URL working smoothly right before the deadline. Small things like image path casing broke in production and had to be fixed quickly.

Accomplishments I'm proud of

Building the Memories community feed in under 4 hours. After deploying the initial version of PetCare to GitHub, I realized something was missing — a space where pet owners and veterinarians could actually talk to each other. I had roughly 4 hours left before the deadline, but I refused to let this idea go. In that window, I designed and built the entire Memories feature: photo and text posts, a verification badge system for vets, a license verification form, likes, threaded comments, filter chips (Tips, Stories, Awareness, Questions), and role-based content — all with a clean, warm UI that matched the rest of the app. It's the feature I'm proudest of, and it taught me that time pressure can be a creative accelerator if you're clear about what actually matters.

Building an Emergency SOS system that real people can use. In Bangladesh, when someone sees an injured stray dog or a lost pet on the street, most people have no idea who to call. Vet numbers aren't saved in phones. Rescue teams aren't searchable. The default reaction is to feel helpless and walk away. PetCare's SOS system was built to solve exactly that — a user in distress can open the app, describe the emergency, share their GPS location automatically, and send an alert to nearby rescue teams in seconds. It works for stray animals, pets, and every creature in between. I built it because the problem is real and the solution has to be zero-friction.

Delivering a fully functional app in 2 days as a solo developer. Five pages (Home, Care, Memories, Shop, Profile), 20+ modals, a complete e-commerce system with cart, wishlist, checkout, and order tracking; multi-role authentication with vet verification; pet health tracking with live weight charts; six first-aid emergency guides; rule-based symptom guidance; dark mode; offline-first persistence; and a backend-ready API layer. No frameworks. No team. No build tools. Just vanilla JavaScript, careful planning, and a hard deadline.

Designing a warm, playful interface that doesn't feel clinical. Most pet care apps look like medical dashboards — sterile, blue, and forgettable. I wanted PetCare to feel like a scrapbook: cursive greeting cards, polaroid photos of pets, paw-print progress timelines, doodle accents, confetti bursts, and gentle animations. The goal was for pet owners to open the app and smile, not just complete a task.

Making the app genuinely backend-ready from day one. Even though PetCare runs entirely in the browser today, every network interaction is routed through a clean API service layer (api.js). Flipping a single flag — USE_MOCK = false — and updating a base URL switches the entire app from mock data to a real backend. No code rewrites, no restructuring. This decision means the project isn't just a demo — it's a foundation.

Shipping under pressure without shipping something broken. With 2 days total and 4 hours spent on a feature I refused to cut, I still delivered an app that works end-to-end: login, post, like, comment, add to cart, checkout, track order, log a health entry, view a chart, trigger an SOS, call a vet. Nothing was half-built. Every feature I shipped is complete and polished.

What I learned

Vanilla JavaScript is still powerful. Without React, Vue, or any framework, I built a complete SPA with five pages, 20+ modals, a shopping system, a social feed, and multi-role authentication. It forced me to think carefully about state management, DOM manipulation, and event handling — skills that framework abstractions often hide.

Offline-first changes how you think about data. Every feature in PetCare works without a server. Cart, wishlist, pets, health logs, memories, orders — all persisted to localStorage with small load/save helpers. This constraint taught me to design data domains independently so each feature could stand on its own.

Design polish is not decoration — it's what makes an app feel real. A toast message, a pulse animation on the emergency button, a confetti burst after an order — these small moments carry enormous perceived value. Users remember how an app made them feel, not just what it did.

Scoping is a skill. With only 2 days to build, I had to say no to good ideas (chat system, appointment booking, photo uploads) to say yes to great ones. Shipping something complete and polished beats shipping something half-built every single time.

Clean abstractions pay off later. Setting up the API service layer early — even with a mock mode — means the app is genuinely backend-ready. Flipping one flag (USE_MOCK = false) is all it takes to connect a real server.

Real GPS is harder than it looks. Browser geolocation has permission flows, timeouts, and failure modes that need real UX care. Building a graceful fallback wasn't just a technical fix — it was a product decision about respecting users in edge cases.

The last mile is the hardest. Deployment, path casing, GitHub Pages setup, live URL testing — the final 10% of a project takes as much energy as the first 90%. But it's the part judges and users actually see.

What's next for PetCare

Real backend integration — The API service layer is already written. Connecting a Node.js or Python backend with a real database (MongoDB or PostgreSQL) is the natural next step. Auth tokens, order persistence, and cross-device sync would all come online with one flag change.

Photo uploads with cloud storage — The Memories feed already supports photos, but currently they're stored as base64 in localStorage (which has a 5MB limit). Moving to Cloudinary or AWS S3 would unlock real image posting at scale.

Push notifications — Medication reminders, vaccination schedules, and emergency alerts would benefit enormously from Web Push API integration so users get notified even when the app is closed.

Appointment booking with vets — The vet verification system is built; the next step is a calendar interface where owners can book real consultations and vets can manage their availability.

Real-time chat — Between pet owners and verified vets. A feature I wanted to build but had to cut due to the 2-day deadline. WebSockets or Firebase would make this feasible.

Multi-language support — PetCare currently ships in English. Adding Bengali, Hindi, and other regional languages would make it accessible to a much wider audience.

Progressive Web App (PWA) features — Installability, offline caching via service workers, and home-screen shortcuts. The app already works offline; formalizing it as a PWA is a natural extension.

Vet directory expansion — Currently 3 demo vets. A real integration with Google Places API or a custom vet database would make the "Nearby Emergency Vets" feature genuinely useful.

Analytics dashboard for vets — Verified vets could see how many pet owners viewed their tips, what questions are trending, and where they can help most. A small but meaningful feature for the community side of the app.

Built With

Share this project:

Updates

Submission history