Pet Finder
This app helps users browse pets that are up for adoption from local shelters.
In the latest release of "Introduction to React" from Frontendmasters veteran Brian Holt, we rebuild his famous "Pet Finder" app using the latest tech stack (April 12th, 2022) from React, Redux to typescript. This will be my first log where i am writing down my thought as i go through the course rather than waiting till the end of the bootcamp.
The coursework uses Parcel as the bundler for our app, I wanted to try using Create React App since i never really used the framework since 2017 (and all the cool kids were using it). I will admit it is initially refreshing not having to setup my Eslint rules and typescript config from scratch, i could try to rewire some rules in the future but ill leave it as-is, maybe ill learn something new along the way.
The app also uses a provided vanilla CSS stylesheet, so I opted for a CSS-in-JS solution using Chakra UI instead (I love MUI, but Chakra has been gaining traction). This was a intro to react course so the instructor most likely didn't want to teach basic CSS, but I need the CSS exercise 😊. As an extra challenge, I'm going to include a light/dark mode switch on the navbar. the changing contrast ratio should keep me on my toes for ADA compliance.
So far, we have a sample-set of the Petfinder data provided so we can quickly scaffold the search widget and pet display cards. I originally wanted to do a grid display of flush cards and have each card do a 180 flip to reveal a QR code linking to the pet's actual petfinder.com page, but some of the sample images are left with intentional white spacing like they were manually cropped. Hopefully as I move on to the course the real API endpoint wont have unprofessionally cropped images.
I finished the Introduction portion of the bootcamp, no access to the Petfinder API yet. There is an "Intermediate React" course where the intro course leaves off, so there may be more to do with the Petfinder app. Regardless, I already created a Petfinder developer account, got my API Keys and loaded the Javascript client here.
I'm now on the "Intermediate React" bootcamp, so far its just recapping hooks (useState, useEffect, UseReducer, etc..) and tailwind CSS. I think tailwind is a good framework-agnostic way to write and scope CSS, but compared to Chakra UI I get all the benefits of tailwind with type-safe CSS properties and no need for a external pre-processor. I went ahead and scaffolded the Petfinder service/hooks for the react app, Just waiting for the bootcamp to cover the API....
lo and behold, even though the repo is written in typescript they omitted ("forgot") to add type-checking for all the response objects on the Petfinder API. Thankfully I already created a abstract Petfinder API service and included my own typescript types, although the response objects for the real API is drastically different. Since I already included type objects for my react app i can just map properties from the new response object to my existing properties, kind of similar to how DTO's in object-oriented programs work.
I got the project basics up and running, I can query for pets given a city/state location, animal type and breed. I was left on my own to integrate the actual Petfinder API, but the existing response objects i wrote before helped separate the API and UI code.
For each pet card, i have added a QR code to the petfinder URL on the back of each card. you can flip each card to get a unique QR code to go right to the adoption page for the respective pet. I had a though that each user would prefer to use their phone to handle commerce, especially with the presence of google/apple wallets and virtual cards on mobile devices. The idea was you can browse this website form anywhere and the QR codes seamlessly bring the pet adoption menu to your phone in a secure manner.
If you would like to adopt Pets for real, visit https://www.petfinder.com/