Simple Web Timer

Why this Project?

• I use it every day
• It uses React and Redux
• I ❤️ React/Redux

obscure-temple-46876.herokuapp.com

github.com/NerdcoreSteve/SimpleWebTimer

Demo

Tech Stack

• Simple NodeJS/Express back-end
• React/Redux on the front-end
• RxJS for the timer
• ReduxSaga for side effects

Approach

• Stateless functional components only
• All code is referentially transparent if possible
• Side effects are pushed to the edges

Project structure

.
├── front-end
│   └── js
│       ├── Button.js
│       ├── RunningOrPaused.js
│       ├── StartResumePauseButtons.js
│       ├── TextInput.js
│       ├── TimeDisplay.js
│       ├── createRootSaga.js
│       ├── createTimerAndHookUpToStore.js
│       ├── main.js
│       └── reducer.js
├── index.js
├── public
│   ├── css
│   │   └── index.css
│   └── js
│       └── main.js
└── views
    └── index.pug

Timer

Saga

Reducer

Resume/Pause

End

• @ProSteveSmith on Twitter
• blog at funkyjavascript.com
• Questions?