Git Product home page Git Product logo

github-explorer's Introduction

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
bower 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 */

    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

github-explorer's People

Contributors

aviskarkc10 avatar mitogh avatar trungdq88 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.