Code Monkey home page Code Monkey 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

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

github-explorer's Issues

Handle native back button.

There is hardware back button on Android which will mess the browser history up when navigate between pages. There are several options to fix this:

  • Redesign the app so that there is no "soft back button", we can use breadcrumbs to navigate between pages instead.
  • Handle the "soft back button" dynamically, ex: if there is an item in history, we call history.back() instead of pushing new history into the stack.
  • Figure out how to override the native back button so it will behave like the "soft" button.

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.