Skip to main content
Character frontCharacter back
Social Impact · Web App · Jan 2023 – Jun 2024

Patitas a Casa: a volunteer-built pet adoption platform in React, Express and MongoDB

→ CONTEXT: Volunteer, community-driven non-profit project based in Mendoza, Argentina (2023–2024)

ROLE: Full Stack Developer · Co-founder
TIMELINE: Jan 2023 – Jun 2024
STATUS: Archived
FOR: Patitas a Casa · Volunteer non-profit, Mendoza, Argentina
STACK:
frontend
  • React
  • Vite
  • TypeScript
  • CSS Modules
  • react-hook-form
backend
  • Node.js
  • Express
  • TypeScript
  • MongoDB · Mongoose
services
  • Cloudinary
  • Brevo
  • Vercel
TEAM: 10 people · with LeoPaez, adanj27, Spai26, mauricioMedinaHM, Bynox4, augustobor, rctoa, lizardwine, leapereira
FIG. 01 Adoption listing, one card per pet with shelter and contact

BLOCK // PROBLEM

Stray dogs in Argentina have very low adoption visibility — shelters rely on fragmented social media posts.

BLOCK // SOLUTION

A React, Vite and TypeScript frontend with CSS Modules and react-hook-form, backed by a Node/Express API in TypeScript with MongoDB (Mongoose), Cloudinary for pet photos and Brevo for email. Shelters and individuals publish dogs for adoption and lost-and-found reports with location, photos, search filters and status tracking. The team also explored a parallel .NET API.

BLOCK // CONSTRAINTS

  • A rotating volunteer team of ten, contributing in their spare time
  • No budget: free tiers for hosting, database and media
  • Shelters with little technical experience had to publish on their own
FIG. 02 Home hero with the two main actions: report a pet, adopt a pet
FIG. 03 The listing on mobile
FIG. 04 Lost-and-found module for pets reported missing
Pet Adoption Platform in React, Node & MongoDB: Case Study — Juan David MorenoReact + Vite + TS → Express API (REST); Express API → MongoDB (listings); Express API → Cloudinary (uploads); Express API → Brevo (notifications)RESTlistingsuploadsnotificationsReact + Vite + TSCSS Modules · react-hook-formExpress APITypeScript · JWT · zodMongoDBMongooseCloudinarypet photosBrevoemail
FIG. 05 Where a published pet goes

ENGINEERING IMPACT REPORT

A centralized adoption platform that replaced fragmented social media posts with a unified, accessible space for shelters and individuals — bringing more dogs closer to a home.

ENGINEERING DECISIONS

DECISION_01

react-hook-form for the publication forms

Adoption and lost-pet forms are long. Uncontrolled fields with schema validation kept them fast and consistent across views.

Instead of: Hand-rolled controlled state per field

DECISION_02

Cloudinary for pet photos

Uploads, resizing and delivery are handled by the service, so the API never stores or processes images.

Instead of: Storing uploads on the server

DECISION_03

CSS Modules over a utility framework

Scoped styles let ten contributors work on views in parallel without a shared design-token setup.

Instead of: Tailwind CSS

FIELD NOTES & DEVELOPMENT HIGHLIGHTS

NOTE_01

Led the frontend implementation of the platform's core views and user flows

NOTE_02

Developed shelter-related views to improve visibility for organizations and their available dogs

NOTE_03

Debugged and refined existing frontend behavior to improve stability and consistency

LESSONS LEARNED

  • In a volunteer team, a stable frontend structure matters more than any single feature.
  • Stabilizing existing views was as valuable as shipping new ones: consistency is what kept contributors productive.

CORE SYSTEM PALETTE

DEPLOYED SYSTEM →SOURCE REPOSITORY →← BACK TO BLUEPRINTS

RELATED CASE STUDIES

Josh Wood ColourGatsby • React • Shopify • StoryblokVIEW CASE STUDY →