Futurice Photo Browser Demo
My Photo Browser demonstration / assignment for Futurice (GitHub). This is based around their “Photo Browser” application specification, using several JSON Placeholder endpoints to build out a “single-page” experience that offers:
- Lazy loading via
react-image(if this demo evolves further, this will likely be ripped out and replaced due to a long-standing issue with image unmounting).
- Implementation of a PhotoGrid component that has integrated Pagination.
- Material Design UX built with Material UI, a React UI library.
- Dedicated Album, Photo, and Photographer pages.
- Routing using
This demo is called “A Glimpse of Earth” and is intended to communicate the idea of seeing curated photography from different photographers around the world. While this is not something the JSON Placeholder data can really communicate, it could be expanded on down the road with the Pexel’s API, using their “Search for Photos” endpoint to grab Nature-related photography.
public/imgs contains a small dataset of example photos to use that coorespond to various Photographers by their “Name”. This exists because I wasn’t happy with just using their initials in avatars and wanted to inject some personality into the demo. This leverages CC0-licensed examples downloaded from UserStock. Thank you to the fine folks at UserStock for this valuable resource.
Please note that the names associated wth the photographers should not be indicative of the names of the actual people in the photos. There is no relation between them. These images have been resized to 256×256 from their original 1024×1024, with a quality set to 70 (using imagemagick mogrify) to reduce the overall size
This has been tested in the following browsers (under Linux):
- Firefox 94.0
- Google Chrome 96.0.4664.45
- Vivaldi (Snapshot) 4.4.2488.3
This demonstration is written in TypeScript and uses babel alongside
Iterative development is done leveraging webpack and handy plugins such as react-refresh-webpack-plugin. Dependency management and pinning is done using yarn. It is highly encouraged to use yarn (1.22.10) for dependency management when interacting with this project.
To install dependencies, please run:
To run locally, you can do either
npm start or
yarn start, which will run with the development build and the react refresh webpack plugin.
For deployment, run
yarn build which will use webpack and our webpack configuration to generate a production-oriented build, which is placed in the
build folder. As we use react-router, you will need to run this with
yarn serve (which runs
serve -s build) or apply other solutions from the Create React App page.
Read Before Committing / Submitting Pull Requests
Before committing and submitting any pull requests, run
yarn prepare which will run
husky, which handles our git commit hooks. This will ensure that our eslint-based linting gets run and flags and errors before they can be committed.