I would like to have my project evaluated on the basis of tooling for the following reasons:
- I built it using Gatsby because it builds performant static sites while enabling me to leverage my favorite tools (like React, and styled-components).
- I built it using React not only because I enjoy working with it, but because its component-based principles help me to separate concerns as appropriate and keep UI components more organized.
- Structuring the app in this way also provides an easier way forward for fetching additional data to reach the anticipated 200 dogs (which would likely require pagination).
- I included a suite of my favorite linters to help maintain code quality and standards (ESLint, Prettier, prop-types).
- Further tooling would be required to handle imagery in an appropriate manner; for now I sized the images down so they aren't so huge and a drag on performance when used as thumbnails, but a complete solution would include multiple versions for different viewport sizes and displays with different pixel densities. That said, I originally built it using the raw images and built the components to display consistently regardless of the image size and orientation.
Other notes
Some things are under-developed since I spent much of my time on the tooling:
- I didn't focus a huge amount on design, but I built this to be responsive and work in modern browsers; some features would likely require fallbacks. I also built in the basics of a theme provider with styled-components to help with extending the site with consistent styles in the future.
- I didn't implement a ton of content, but I tried to apply some SEO basics around what little content I did add.
Thank you for the opportunity! This was a fun project; I enjoyed it all the more because I built it while hanging with my own dogs.