This React/Redux app fetches a single random image for each selected dog breed from the dog.ceo.
- React for the view layer, duh 👻
- Mobile first responsive layout
- Webpack for bundling. Babel for ES6+
- Prettier and Eslint for code formatting/linting.
- Redux to manage
appandrequestsstates. - Atomic design for component organization:
atoms,molecules,organismsandenvironments. containersfor store connected components.- All presentation components are organized in folders with their associated styles.
- Styling is done with
scssusing CSS Modules for component name spaced classes and for declaring global styles. - Created a
<Fetch>component to handle all requests to the API. This component takes anendpointand on mount dispatches an action to make a fetch request to the API. On success the request and result is returned to the store in therequestsreducer. If the same request is made later the cached version of the result will be returned.<Fetch>then uses a render callback to pass the resulting request data to any wrapped component. See the<AppContainer>for example usage. - Created a
<Select>component to handle all dropdown UI. It's accessible withariatags and keyboard accessibility (tab, arrow keys, etc.). <BreedSelector/>handles the user input of selecting breed. After a selection is made it is filtered from the remaining lists.- Once all dropdowns have selected values, the
<BreedFetcher>mounts new<Fetch>components that displays a<Loader>for each request being made. Once complete resulting data is displayed in a<BreedImage>component.
Install dependencies:
yarn install
Run the webpack dev server:
yarn start
Open a browser @ localhost:3000