Hey folks,
I thought I’d share this side project I spun up over the last couple of weeks as it might be of use to more people than just me - or at least be of interest!
It came about as I’m currently working for a client building new features for the football World Cup and I forever find myself doing a sanity check of “how many development days are there between now and the World Cup?”
So I had the sudden urge to build a simple dashboard that I could put up on screen whenever we had a meeting to give an “order of magnitude” flavour to the meetings - in terms of how much time there is between now and the world cup - when thinking about new features/what to prioritise etc
Feature wise, it’s ludicrously simple - and certainly not a replacement for actual project management (obviously!) but I think it has some utility. I also like the fact that there is no ‘back-end’ but it can still be shared and re-used by more than one person. Plus it was an excuse to play with some react libs I’d not previously used and to do some developer friendly retro styling!
The World Cup 2018 dev days countdown timer (in all its glory) can be seen here:
https://devdays.io/World%20Cup%202018/2018-06-14/mon-fri
Add your own timer here:
https://devdays.io
View the code here:
Points to note:
- SPA hosted on github pages (non trivial if you want routing params to work on page load)
- un-ejected create react app (but uses react-app-rewired to apply custom webpack config to use styled-components babel plugin)
- styled-components (fun to work with so long as you have the babel plugin that makes debugging in browser dev tools a possibility)
- react-animations (over used in this app, but very easy to work with)
- scene manager pattern (I use this pattern to abstract away the chosen “routing library” implementation details - a pattern I picked up when building React Native apps, and I see no reason not to include on the my web ones either)
Next steps:
- Create a branch on the repo that achieves the same output using React Native Web
Russ