Puppalooza
A stray pup was roaming the neighborhood when a local rescue agreed to catch her on the condition that someone step up to foster. An hour later, Willa settled into our home. Over the following weeks, we grew attached to her and also realized something was... off. We prepared ourselves, and before long, we welcomed ten puppies into the world. As they grew, I spun up a website to help them find loving homes. This website wasn't about polish, it was about speed, functionality, and sharing the puppies' stories with prospective adopters.
Sleepy puppy picturesBuilt with
- React
- Next.js
- Tailwind CSS
- TypeScript
- GitHub Pages
- Google Images
Project Purpose
This project started out of necessity, not aesthetics. With ten puppies needing attention (and energy), there was no time for design planning or wireframing. I built the first version fast to get the word out, knowing I could iterate on the visuals later.
Tech Stack & Approach
- React & Next.js: I already knew React from bootcamp, so I quickly ramped up on Next.js to speed up development and simplify deployment.
- Tailwind CSS: Enabled rapid styling without losing time on UI details.
- Static content strategy: Since the site didn't require backend scaling or persistent data, a statically generated approach made the most sense.
- Photo hosting: With so many images (and some videos), GitHub storage wasn't feasible. After researching CDNs, I opted to use Google Photos due to cost-effectiveness and simplicity (free > fancy).
Challenges & Lessons Learned
I leaned heavily on fast decision-making and fundamentals. I navigated:- Ramp-up on Next.js while building under time pressure
- Brushing off rusty TypeScript skills
- Managing large image handling efficiently
- Designing for usability without formal prep
Puppalooza homepage
Kathleen's page
Playtime page