As I'm working through Brian Holt's Intermediate React course, I am overhauling the styles and making changes as I go.

This is essentially a fork of the original course repo master branch. The initial code is licensed under the Apache 2.0 license.

---

Things I've done:

Created a new logo and restyled everything, added an image placeholder.

Improved markup accessibility; added focus-visible to handle keyboard-only focus styles.

Used react-autosuggest to create dropdowns.

Wrote more tests.

Implemented likes.

Added plugins:

• SVGR Parcel plugin
• babel-plugin-emotion to reduce bundle size and enable sourcemaps - which also needs babel-plugin-transform-inline-environment-variables (see issue).
• babel-plugin-dynamic-import-node to transpile dynamic imports in Jest

Upgraded to babel 7.

Set up SSR using this example. Added a separate build step with Parcel instead of babel-node as it's not recommended for production.

Cleaned the data received from the petfinder API.

Added a preloaded latin-only font using this technique to get rid of FOIT.

Enabled gzip and brotli compression in Parcel using parcel-plugin-compress and on the server using express-static-gzip.

Notes:

Petfinder API data is a mess: responses may contain announcements that look exactly like animal profiles, with no logical way to filter them out. I'm leaving it as is for now.

Suspense doesn't support data fetching and SSR yet so I'm using react-lazy-images and react-loadable for now.

I used react-select at first, but as it also relies on Emotion, I didn't manage to make it render the styles on the server (probably due to a conflict with my Emotion instance). React-select has ~1000 open issues, including recent ones with SSR, so I switched to the much more flexible (and lightweight!) react-autosuggest.

There is an issue with Babel: regeneratorRuntime polyfill for async/await is not included with useBuiltIns: "usage".

Parcel tree-shaking is still experimental and bugged:(

Todo

• Form dropdown & input:focused styles
• Change favorites state structure to O(1) lookup (optional)
• Move Results and Pet to common, make Pet rendering more flexible via children
• Mobile card layout
• Clean up the media field
• Photo gallery
• Split components are built both on client and server - serve them on demand?
• Search multiple breeds (fetch all in a thunk)
• Remove no results fallback on startup
• Cache breedLists for previously searched animals
• Pagination
• Show form under header on search icon click if current route is Search, navigate to / if not (instead of the SearchParams route)
• Favorites route
• In the details page, link to search all animals of this breed in this location
• Persistence of liked pets to localStorage via redux-persist
• Manage scroll position in the search list
• I might swap Redux for Hooks. Anyway, Redux is a complete overkill in this case and is included just for practice.
• Shelter maps?