• Stars
    star
    722
  • Rank 60,593 (Top 2 %)
  • Language
    JavaScript
  • Created almost 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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
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

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

More Repositories

1

Awesome-Black-Friday-Cyber-Monday

Awesome deals on Black Friday: Apps, SaaS, Books, Courses, etc.
1,721
star
2

react-router-page-transition

Highly customizable page transition component for your React Router
JavaScript
542
star
3

logmine

A log pattern analyzer CLI
Python
141
star
4

real-time-twitter-banner

Fun little experiment with Twitter API
JavaScript
108
star
5

chatgpt-prompt-templates

Templates for community prompts on TypingMind.com
47
star
6

tonydinh-com

My personal website
JavaScript
37
star
7

summer

Little fun experiment with cellular automaton
JavaScript
34
star
8

ChordDroid

Android library to render Guitar Chord.
Java
25
star
9

dinhquangtrung.net

My website
JavaScript
23
star
10

hn-big-threads

Use flame graphs to read very big HN threads
HTML
16
star
11

screensaver

Simple screensaver app
Shell
14
star
12

16-bit-computer

16-bit computer in Logism
JavaScript
13
star
13

smart-doge

Doge can find the next number in a sequence. Yay!
JavaScript
10
star
14

movie-showtimes

Web Service & Android Application to look up Vietnam movie showtimes
Java
7
star
15

nextjs-phaser

TypeScript
7
star
16

firebase-example

A web application to demonstrate Firebase features
JavaScript
6
star
17

8-bit-computer

8-bit-computer in Logism
JavaScript
5
star
18

do-an-xe

do-an-xe
JavaScript
4
star
19

960-grid-generator

Old school CSS grid generator (warning: float)
JavaScript
4
star
20

-VB6-VirusRemoveAll

See my article about this project: http://dinhquangtrung.net/blog/some-softwares-i-made
Visual Basic
3
star
21

snake-redux

Snake game with pure Redux and p5.js, no boilerplate
JavaScript
3
star
22

FreakingMathAndroid

Android game with numbers
Java
3
star
23

plain-react

My favorite boilerplate to create static web app with React.
JavaScript
3
star
24

thesimpleapi

API as a service
JavaScript
3
star
25

firebase-checkin

Check in application built with Firebase
HTML
2
star
26

web-bluetooth

web-bluetooth
HTML
2
star
27

facebook-float-video

Floating facebook video
JavaScript
2
star
28

vnk-swift

Vietnamese input method for OSX
Swift
2
star
29

-VB6-PerfectAntivirus

See my article about this project: http://dinhquangtrung.net/blog/some-softwares-i-made
Visual Basic
2
star
30

-VB6-SystemReporter

See my article about this project: http://dinhquangtrung.net/blog/some-softwares-i-made
Visual Basic
2
star
31

-VB6-ProcessManager

See my article about this project: http://dinhquangtrung.net/blog/some-softwares-i-made
Visual Basic
1
star
32

-VB6-AllFileLocker

See my article about this project: http://dinhquangtrung.net/blog/some-softwares-i-made
Visual Basic
1
star
33

web-bluetooth-codelabs

web-bluetooth-codelabs
HTML
1
star
34

test-twitter-physic

JavaScript
1
star
35

FormulasTextBox

A control for .Net Winform Application to process Input with formulas like an Excel cell.
C#
1
star
36

school-revision-tool

Self-review tool for school exam.
JavaScript
1
star
37

progressive-web-app-demo

Small demo building Progressive Web Apps
JavaScript
1
star
38

chrome-dinosaur

I copied the source code from Chromium and edited it.
HTML
1
star
39

css-stuffs

My experiment works with css
CSS
1
star
40

-VB6-NeverAutorun

See my article about this project: http://dinhquangtrung.net/blog/some-softwares-i-made
Visual Basic
1
star
41

bricks

Coding challenge
JavaScript
1
star
42

-VB6-1Click

See my article about this project: http://dinhquangtrung.net/blog/some-softwares-i-made
1
star
43

-VB6-ProStatus

See my article about this project: http://dinhquangtrung.net/blog/some-softwares-i-made
Visual Basic
1
star