photo-gallery

Get Started

Yarn is not required. Anywhere it says yarn <command> you can sub in npm run <command>.

Upon install:

Run yarn or npm install
Put your Flickr credentials in flickr_crendentials.json in the format: {"api_key": "<your key here>", "secret": "<your secret here>"}.

For development

For production

build: Runs Webpack to build a production build of your CSS and JS
dev: Runs the webpack-dev-server which runs a local server on 8080, builds and serves dev builds of your JS and CSS as well as proxies requests to your API server
dev:api: Runs a local API server that proxies the Flickr API
format: Runs the code through Prettier, a JavaScript code formatter
lint: Runs the code through ESLint. This code adheres to the Airbnb rules (inasmuch they don't conflict with Prettier)
size-css: Prints out the size of the CSS after minification and gzip
size-js: Prints out the size of the JS after minification and gzip
start: Runs a production-ready Express server that proxies the Flickr API as well as serves your already built CSS and JS on http://localhost:3000
test: Runs the Jest test suite
test:update: Updates the Jest snapshots
types: Runs the Flow static type checker
validate: Runs the full suite: format, lint, types, test, size-css and size-js

gzip and minified JS: 7.11KB
gzip and minified CSS: 1.43KB
Tested with 18 unit tests, linted, and statically typed
Google Lighthouse
- Performance: 97
- Accessibility: 94
- Best Practices: 83 (not using HTTP2 or manifest)

Service worker: was planned and architected to use, just ran out of time
Server-side rendering: had it finished but greatly increased complexity of code, little gain
Code-splitting: app is already tiny; the savings would be too small to justify complexity
More gestures: swiping between images
Pagination on search images