Urban Gallery

A high-performance image gallery app created with React, Redux and Fixed-data-table-2.

To run the app locally:

1. Download or clone the repository.
2. Run npm install or yarn.
3. Run npm start or yarn start.

The application will serve on http://localhost:3000

A live demo of the application can be found on this link.

Responsive

The app supports 2 view-sizes:

Desktop and mobile

Main challenge

The main challenge here was to load and display a numerous amount of images without settling for performance and speed.

To deal with this requirement - I made use of Fixed-data-table-2 which only renders the image components in the viewport once - and just updates their src (without unmounting) once it detects a scroll event.

Additionally, I added an inner "Load only if needed" logic to the Image component which dispatches a network image-load only if the client stops scrolling for a given "load-delay" interval.

Caching and Offline Support

In order to support offline use of the app - I created the following service worker which utilizes the native caches api and supplements the Create-React-App out of the box service worker using this tool.

Please make sure you are running the app on HTTPS in order to see this in action.