github-explorer 0,1,1,1,0,0 eslint travis-ci Bower karma npm

Progressive Web Apps experiment

Build status [Dependencies]() [Dev dependencies]() Coverage Status

Introduction

GitHub Explorer is a Progressive Web App that helps you explore GitHub user repositories. This project is created for technology demonstration purpose, experiment how a web app "looks and behaves" like a native app.

Live demo: https://github-e.com

(currently no desktop layout available yet :-(, so please view this on mobile for better experience)

...or watch the GIFs below:

Overview App Shell (not a GIF) Material animation
gh-e image gh-e-1

Scored 88/100 in Lighthouse (auditing and performance metrics for Progressive Web Apps):

image

Goal:

  • Change people beliefs on web apps by make it as much "native" as possible with cool technologies like ReactJS and Progressive Web Apps.

Tech stack:

  • ReactJS for UI
  • RxJS for data flow and basic app architecture
  • Web App Manifest for add to home screen, splash screen...
  • Service Worker for offline usage (sw-precache)
  • Animation Performance with FLIP and best practices from this High Performance Animations Blog Post
  • Application Shell Architecture for better user experience
  • Babel for ES6 syntax
  • Webpack for bundle
  • Karma for testing (no test case yet)
  • React Router Page Transition to make material transition effect possible.
  • ...and more, please check package.json

This project is bootstraped from plain-react - a simple boilerplate to start a simple ReactJS application.

TODOs: a potentially technical blog post about this coming soon.

Development

Initial dev setup Make sure you have NodeJS v6 or above.

npm install 
npm start 

http://localhost:8763 should now be live with Hot Module Replacement.

Production build

npm install 
npm run build 

Production code placed at build

Test

npm test

Coverage report placed in ./coverage/ directory

Other commands

  • npm lint: linting.

Team

/* TEAM */

    Company: Silicon Straits Saigon
    www.siliconstraits.vn

    Developer: Trung Dinh Quang
    Contact: trungdq88 [at] gmail.com, quangtrung [at] siliconstraits.com
    From: Ho Chi Minh City, Vietnam

    UX/UI Designer: Huynh Anh Quan
    Contact anhquan [at] siliconstraits.com
    From: Ho Chi Minh City, Vietnam

    Animation Designer: Van Cong Bang
    Contact congbang [at] siliconstraits.com
    From: Ho Chi Minh City, Vietnam

/* THANKS */

    The Inspectocat Icon: Jason Costello 
    Contact: https://octodex.github.com/inspectocat
    From: San Francisco, CA

Related Repositories

explorer

explorer

Data Explorer by Keen IO - point-and-click interface for analyzing and visualizi ...

Restler-API-Explorer

Restler-API-Explorer

Restler API Explorer is a tweaked version of Swagger UI, a dependency-free colle ...

android-explorer

android-explorer

android lib - explorer ...

api-explorer

api-explorer

API Explorer is a live documentation client for Swagger ...

github-email-explorer

github-email-explorer

✉️ A tool to get email addresses by action types such as starred, watching or fo ...


Top Contributors

trungdq88 mitogh

Dependencies

package version
classname 0.0.0
filesize ^3.3.0
github-colors ^2.2.6
github-markdown-css ^2.3.0
js-base64 ^2.1.9
json-loader ^0.5.4
moment ^2.14.1
react-addons-css-transition-group ^15.1.0
react-markdown ^2.3.0
react-router ^2.5.1
react-router-page-transition 3.0.1
rimraf ^2.5.2
rx ^4.1.0
sw-precache ^4.3.0
whatwg-fetch ^1.0.0
dev autoprefixer ^6.0.3
babel-core ^6.10.4
babel-eslint ^6.1.0
babel-loader ^6.1.0
babel-plugin-rewire ^0.1.8
babel-polyfill ^6.9.1
babel-preset-es2015 ^6.9.0
babel-preset-react ^6.1.4
babel-runtime ^6.9.2
chai ^3.4.1
classnames ^2.1.5
css-loader ^0.23.1
eslint ^2.13.1
eslint-config-airbnb ^9.0.1
eslint-plugin-import ^1.9.2
eslint-plugin-jsx-a11y ^1.5.3
eslint-plugin-react ^5.2.2
extract-text-webpack-plugin ^1.0.1
file-loader ^0.9.0
github-colors ^2.2.5
glob ^7.0.5
imports-loader ^0.6.4
istanbul-instrumenter-loader ^0.2.0
karma ^0.13.15
karma-chai ^0.1.0
karma-chrome-launcher ^1.0.1
karma-cli ^1.0.0
karma-coverage ^1.0.0
karma-coveralls ^1.1.2
karma-mocha ^1.0.1
karma-mocha-reporter ^2.0.4
karma-phantomjs-launcher ^1.0.0
karma-sinon ^1.0.4
karma-source-map-support ^1.0.0
karma-sourcemap-loader ^0.3.5
karma-webpack ^1.5.1
less ^2.7.1
less-loader ^2.2.1
lodash ^4.13.1
mocha ^2.5.3
mocha-loader ^0.7.1
opn ^4.0.2
phantomjs ^2.1.7
phantomjs-prebuilt ^2.1.7
postcss-loader ^0.9.1
react ^15.1.0
react-addons-test-utils ^15.1.0
react-dom ^15.1.0
react-hot-loader ^1.3.0
rimraf ^2.4.3
script-loader ^0.7.0
sinon ^1.15.4
style-loader ^0.13.0
sw-precache ^3.2.0
template-html-loader 0.0.3
url-loader ^0.5.6
webpack ^1.13.1
webpack-dev-server ^1.12.0

Releases

-   v0.1.23 zip tar
-   v0.1.22 zip tar
-   v0.1.21 zip tar
-   v0.1.20 zip tar
-   v0.1.19 zip tar
-   v0.1.18 zip tar
-   v0.1.17 zip tar
-   v0.1.16 zip tar
-   v0.1.15 zip tar
-   v0.1.14 zip tar
-   v0.1.13 zip tar
-   v0.1.12 zip tar
-   v0.1.11 zip tar
-   v0.1.10 zip tar
-   v0.1.9 zip tar
-   v0.1.8 zip tar
-   v0.1.7 zip tar
-   v0.1.6 zip tar
-   v0.1.5 zip tar
-   v0.1.4 zip tar
-   v0.1.3 zip tar
-   v0.1.2 zip tar
-   v0.1.1 zip tar
-   v0.1.0 zip tar
-   v0.0.23 zip tar
-   v0.0.22 zip tar
-   v0.0.21 zip tar
-   v0.0.20 zip tar
-   v0.0.19 zip tar
-   v0.0.18 zip tar