Skip to content
This repository has been archived by the owner on Jun 7, 2019. It is now read-only.

Latest commit

 

History

History
89 lines (63 loc) · 3.25 KB

README.md

File metadata and controls

89 lines (63 loc) · 3.25 KB
Raw

Flickr search (ReactJS)

Demo app build with ReactJS to perform live Flickr image search

Live demo

Heroku

https://cryptic-hollows-21191.herokuapp.com

Google App Engine

https://flickr-reactjs-demo.appspot.com

Features

Web framework layer

React

Web tooling layer

Gulp ESLint BrowserSync Karma

Module management layer

Webpack Bower

Little Features

  • Deployed to Paas services(Heroku & GAE) for easy demo
  • Nearly 100% (99.15%) unit test coverage
  • Detect when user input finishes before firing up API calls to Flickr
  • Auto refresh/inject on code change to all connected devices in local development mode (powered by Gulp with browserSync)
  • Using Masonry for rendering search result layout
  • Using Codeship for Continuous Integration

Usage

Install

Install required tools gulp and bower:
npm install -g gulp bower
Clone this repo and goto its directory
Install node packages:
npm install

Run

Use Gulp tasks

If you have gulp-cli installed in global packages you can use equivalent:

  • gulp or gulp build
  • gulp serve
  • gulp serve:dist
  • gulp test
  • gulp test:auto

Or NPM scripts

  • npm run build to build an optimized version of your application in /dist
  • npm run serve to launch a browser sync server on your source files
  • npm run serve:dist to launch a server on your optimized application
  • npm run test to launch your unit tests with Karma
  • npm run test:auto to launch your unit tests with Karma in watch mode

If you don't have gulp-cli installed in global, you should have this error:

/usr/local/lib/node_modules/gulp/bin/gulp.js:121 gulpInst.start.apply(gulpInst, toRun); TypeError: Cannot read property 'apply' of undefined

Future enhancements

  • Implement end-to-end test with nightwatch.js
  • Implement component test with Enzyme
  • Sorting search results based on user-selected criterias
  • Pagination (infinite scroll)
  • Convert it to PWA (Progressive Web App)
    • Add app manifest file for easy discovery, "add to home screen" feature, controlling viewport and installability
    • Move API invokations and data manipulations to service worker for better performance
    • Cache application shell using sw-precache