- run npm install
- run npm start
- open in a browser: http://localhost:5005
- open in a mobile browser: http://[your-ip-address]:5005
- It needs to be fast
- It needs to be able to scale to a larger amount of images in terms of memory and performance
- It needs to work on mobile
- It needs to be responsive: the image height is fixed to all the images but cannot be a hardcoded value.
- The scroll bars need to represent the expected height of the page and move together with the user's scrolling
- Only have a limited amount of DOM components at any given time, equivalent to the viewport + buffer
- Have three layers behind each other: front layer with the full image, mid layer with thumbnail, and back with the prominent color. The back layers should be larger, as they'd be visible when scrolling
- Use will-change: transform on "atomic" elements (rectangles and images)
- Download images in a worker as a blob
- Save them to indexeddb as base64
- In the main page, try to access indexeddb and get the base64 image if it's there. if not, tell the worker to download it to cache
- Use translateY() to have at least one element that goes all the way down to the expected height of the body so that scrolling works as expected.