Yarn is not required. Anywhere it says yarn <command>
you can sub in npm run <command>
.
Upon install:
- Run
yarn
ornpm install
- Put your Flickr credentials in flickr_crendentials.json in the format:
{"api_key": "<your key here>", "secret": "<your secret here>"}
.
For development
- Run
yarn dev:api
in one terminal - Run
yarn dev
in another terminal - Open http://localhost:8080 in a browser
For production
- Run
yarn build
- Run
yarn start
- Open http://localhost:3000 in a browser.
build
: Runs Webpack to build a production build of your CSS and JSdev
: 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 serverdev:api
: Runs a local API server that proxies the Flickr APIformat
: Runs the code through Prettier, a JavaScript code formatterlint
: 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 gzipsize-js
: Prints out the size of the JS after minification and gzipstart
: Runs a production-ready Express server that proxies the Flickr API as well as serves your already built CSS and JS on http://localhost:3000test
: Runs the Jest test suitetest:update
: Updates the Jest snapshotstypes
: Runs the Flow static type checkervalidate
: Runs the full suite: format, lint, types, test, size-css and size-js
- Node
- Webpack
- Babel w/ preset-env and static class properties
- Preact
- Preact-Router
- Postcss, cssnano, and cssnext
- Flow
- ESLint
- Prettier
- Jest
- Express
- 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