This is a single-page applicaton written in TypeScript using AngularJS. It retrieves counters from a REST service and displays them. You can increase and decrease each counter's value. A second page displays a little dashboard that does some analytics on your counters and their values.
For an app with a prettier UI, have a look at the implementation using Angular instead.
I wanted to learn more about the Redux architectural pattern to solve common problems like the same data being used in multiple components. Changes in one component would not update the other component's data, so one would either have to deal with this chaos or notify the other components about change with e. g. events. This is complicated, error-prone and very ugly. Redux perfectly solves this problem. So I wrote this app together with the server side which you can find here.
The app utilizes ng-redux. For asynchronous action like loading and saving counters from and to the REST service, it uses redux-thunk.
This app uses the reselect package for memoizing selectors. Set
configuration.isReselectDemoMode to true to demonstrate the
effect. You will see that triggering errors won't recalculate
the counters.
Press the button to trigger some (false) errors and watch the
CounterContainer.mapStateToTarget() has been called count. It
is increasing with every error being generated. The
The state has been recalculated count will stay the same, though,
which demonstrates the memoizing effect.
Run yarn dev to run the app in development mode
or yarn prod for production mode.