A photo gallery that has ability to search photos using defined api , renders endless scroll of photos on the page, and shows detailed image in a light box experience
``` bash
# install homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
# install node js (>= 0.12 version)
brew install nodejs
# install required packages
npm install
# build js file
npm run build
# start node js server (host locally at http://localhost:3030/)
npm start
```
Commands | Description |
---|---|
npm run build |
Builds the photogallery.js file |
npm start |
Host the index.html at http://localhost:3030/ |
npm test |
Run unit test |
This class is the API layer to the client. Search and nextPage are the methods available to the client
Mediator directs traffic between all the internal modules (Mediator Design Pattern)
API manager will iterate the current 'installed' apis. (Strategy Design Pattern) The 'installed' api classes are required to implement two methods (1) search (2) imageDataGenerator. This makes it easy to add multiple vendors' API in the future
Load manager handles all the network call (api endpoint) with xhr and also detects network error and gives warning
Data manager saves current fetched api data and process it into defined image model schema
View manager is in charge of building and rendering view in dom level. Using DocumentFragment for appending the thumbnail image wall efficiently
LightBoxManager renders detailed photo in lightbox experience. Using image cache to avoid multiple network calls on the same photo. Keeps a maximum number of photos in the cache and calculate which photo to pop from the cache depends on users' navigation on the photos
Tested on Chrome:50.0.2661.102 Safari:9.0.3 FireFox: 46.0.1 IE Edge:25.10586.0.0