penumbra1 / buddy

Search and adopt a pet

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?

buddy's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.