You can see the finished source code here: https://github.com/mattarnster/mgmt
ReactRiot is a 48 hour online hackathon that I and a team of 3 other people participated in this year.
The rules are simple:
You have 48 hours to create a web application using the React framework.
Our team settled on creating a time-tracking application for busy freelancers, called MGMT. Our focus was to have a clean design with a simple navigation journey so that it doesn’t take the focus away from what you’re working on.
Our two talented designers began wire-framing out the navigation journey, whilst Toby and I started off with a create-react-app base for the app.
During the planning phase, we utilized a whiteboard in the office to track our to-do items and check them off once complete (like a KANBAN process).
Once planning was complete, we started on the build. In the end, we settled on the following additions to the React build to make our lives easier:
- React-Router (for routing)
- Redux (for state management)
- Redux-Thunk (for even better state management)
- Reselect (as above)
- SweetAlert (for the sweet popups)
- IcoMoon (icons)
- Feather (icons)
- Photoshop (design)
- Github (source control)
- Browserstack (for testing)
Throughout the build, Toby and I were still learning the ins-and-outs of Redux and Reselect, as I had used these in the past, but wasn’t completely knowledgeable in the libraries.
We had some problems during the build, such as hooking up parts of the redux state management, but we worked through them and eventually got it all working. Even up against the clock, I only slept for about 2-4 hours during the whole competition - relying on just energy drinks to keep me awake.
I’m most proud of the fact that, as a hobbyist react developer, that we could coordinate ourselves in a team to ship an MVP that looks as good as ours does. We have been complimented on the design a lot in our entry’s comments, so I am rather happy about it!
Special thanks again to Toby, Tim and George, who made this possible! Go check out their twitter.