Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trungdq88/github-explorer
Progressive Web Apps experiment
https://github.com/trungdq88/github-explorer
animation-performance architecture github progressive-web-app reactjs
Last synced: 3 days ago
JSON representation
Progressive Web Apps experiment
- Host: GitHub
- URL: https://github.com/trungdq88/github-explorer
- Owner: trungdq88
- Created: 2016-06-23T05:01:18.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T22:16:45.000Z (about 2 years ago)
- Last Synced: 2024-12-07T01:45:23.846Z (7 days ago)
- Topics: animation-performance, architecture, github, progressive-web-app, reactjs
- Language: JavaScript
- Homepage: https://github-e.com
- Size: 3.14 MB
- Stars: 729
- Watchers: 22
- Forks: 64
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-pwa - GitHub Explorer
README
[](https://travis-ci.org/trungdq88/github-explorer)
[]()
[]()
[](https://coveralls.io/github/trungdq88/github-explorer?branch=master)
# Introduction
GitHub Explorer is a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) 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|
|--------|---------|------------------|
||||
Scored **88/100** in [Lighthouse](https://github.com/GoogleChrome/lighthouse) (auditing and performance metrics for Progressive Web Apps):
## 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](https://github.com/GoogleChrome/sw-precache))
- **Animation Performance** with [FLIP](https://aerotwist.com/blog/flip-your-animations/) and best practices from this [High Performance Animations Blog Post](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)
- **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](https://github.com/trungdq88/react-router-page-transition) to make material transition effect possible.
- ...and more, please check `package.json`
This project is bootstraped from [plain-react](https://github.com/trungdq88/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.
```bash
npm install
bower install
npm start
```
`http://localhost:8763` should now be live with Hot Module Replacement.
**Production build**
```bash
npm install
npm run build
```
Production code placed at `build`
**Test**
```bash
npm test
```
Coverage report placed in `./coverage/` directory
**Other commands**
- `npm lint`: linting.
# [Team](https://github-e.com/humans.txt)
```
/* 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
```