TODO App Fight Round 1

A presentation about building a TODO app with React, RxJS, and partial.lenses, held at Gofore on 25th November 2019 in Jyväskylä, Finland.

This was part of a demo series at Gofore demonstrating different ways to build a TODO app in the browser, with non-trivial state management requirements.

Slides (mostly in Finnish)
Online demo (of the full-blown app)

The app

The presentation included building a TODO app in phases. The app is in demo.jsx, in the demo branch. Commits in the demo branch show how the app evolves:

1. Start with a vanilla React-app, with useReducer to trigger updating the state tree and partial.lenses to build the updated data structure.

2. Replace useReducer with RxJS, moving state management inside RxJS Observables.

3. Simulate tasks sent from the backend.

4. Add keyboard shortcuts to add commonly used tasks (contrived example, but demonstrates how you can add more event sources in RxJS).

The full-blown TODO app is in app.jsx.

To run the apps for development:

npm run app:serve

Open https://localhost:8080 for app.jsx and https://localhost:8080/demo.html for demo.jsx.

To build the apps:

NODE_ENV=production npm run app:build

This work is under public domain

To the extent possible under law, Tuomas Kareinen has waived all copyright and related or neighboring rights to TODO App Fight Round 1. This work is published from: Finland.