Awesome Open Source
Awesome Open Source


Dependency Status CircleCI Appveyor Coverage Status PRs Welcome Tested with jest License: MIT Template from jarvis


  • Demo Page - contains classic todo list, async server call, and 404 page with random moe images. (Support multi-language, currently English, Chinese, and Japanese)

    Home Page

    React Page

    404 Page


  • [x] yarn - dependency manager
  • [x] express - node.js web framework for backend
  • [x] postgresql - advanced open source database
  • [x] materialize - a modern responsive front-end framework based on Material Design
  • [x] sass - CSS pre-processors
  • [x] postcss - CSS post-processor
  • [x] css-modules - for default scoped/local css
  • [x] typescript - a typed superset of javascript that scales
  • [x] webpack 4 - module bundler
  • [x] webpack-dev-server - serves a webpack app in development mode with hot reload
  • [x] followed ES6 standard
  • [x] babel - a JavaScript compiler that compile ES6 to ES5
  • [x] react - a JavaScript library for building user interfaces
  • [x] react-hot-loader 4 - hot module reload!
  • [x] react-router 4 - declarative routing for React
  • [x] react-redux 6 - the official react bindings for redux 4 (a predictable state container for js apps)
  • [x] react-saga - make redux asynchronous flows easy to read, write and test, the replacement for redux-thunk
  • [x] connected-react-router 6 - a redux binding for react-router 4, the replacement for react-router-redux v5
  • [x] react-i18next - internationalization for react done right
  • [x] immutable.js - persistent Immutable data structures for react redux state management
  • [x] editorconfig - maintain consistent coding styles between different editors and IDEs
  • [x] eslint - lint javascript files (.js, .jsx)
  • [x] tslint - lint typescript files (.ts, .tsx)
  • [x] stylelint - lint style files (.css, .scss)
  • [x] commitlint - lint git commit messages
  • [x] jest - painless javascript testing
  • [x] coveralls - test coverage
  • [x] husky - git hooks
  • [x] circle-ci 2 - continuous integration tool for testing and deployment
  • [x] heroku - a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
  • [x] docker - the open-source application container engine
  • [x] RESTful API design - follow RESTful api design best practice

How to run the sample code


  • yarn or npm
  • (optional) docker with docker-compose

Quickest way

The easiest way to run the example project is to use docker-compose:

docker-compose up --build

that's it :)

You can also follow instructions below if you want to customize it.

Install project dependencies

Go to project root directory:

yarn install

If you find permission problem when trying to install yarn globally, check this out.

Setup database and session store

You can either

  • setup postgresql and redis using docker images:
docker-compose up -d postgres redis


  • maintain it by yourself, if so, make sure you set the right config in backend/config.json.

Build & Run

On development (with hot reload):

yarn dev

On production (with terser and other optimazitions):

yarn prod

Profile assets bundle

Thanks to webpack-bundle-analyzer, assets bundle can be analyzed and optimized through DLL Plugin.

yarn profile

Run test

yarn test

Code coverage

yarn coverage


Every push on master branch will trigger Github Actions for heroku deployment.




MIT License

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (251,857
Reactjs (72,668
Docker (33,790
Express (11,214
Webpack (9,583
Es6 (5,301
Github Actions (4,160
Heroku (4,140
Eslint (3,589
Jest (3,541
React Router (3,255
Babel (3,209
React Redux (2,209
Yarn (1,601
Circleci (996
Materializecss (567
Stylelint (544
Tslint (380
Related Projects