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
react-router
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.
Images
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
Testing
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
Development
This demonstration is written in TypeScript and uses babel alongside @babel/preset-typescript to compile this TypeScript into ES5-compatible JavaScript. This has all been tested against nodejs 16.13.0, which is the current active LTS of nodejs.
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.
Useful Commands
To install dependencies, please run: yarn or yarn install
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.
