Ethereum Development — Colony Hackathon, Consenys Academy & React

John Grant
3 min readJun 23, 2018

I’m feeling fully immersed in Ethereum tech at the moment working my way through the Consensys Academy modules and trying to put together something reasonable for the Colony Hackathon. It’s been a pretty nice combination because it covers the whole stack — back end blockchain set-up, smart contract writing, contract deployment then at the front end learning React/Webpack/Node.

Colony

I heard about the Colony Hackathon back in June but before that I didn’t really know about Colony itself. Colony is a platform for open organisations and once I read a bit more about I could see a lot of potential uses for what they offer.

They’ve put in a lot of work to be developer friendly. They had a decent guide to getting set-up for the Hackathon and their support was super approachable and helpful. I really liked the ColonyJS library, using it you can query the blockchain for information about tasks, create new tasks, modify them, commit and reveal ratings, and finalise them to trigger payouts — all from within your application. Using it felt a lot like using a normal web API and you kind of don’t know you’re interacting with a Blockchain.

To get set up I had to run a personal Ethereum blockchain using Ganache then compile and deploy the Colony network contracts. Once these are running the Node app can interact using ColonyJS. I still think it’s so cool to boot up my own blockchain and do stuff with it!

I also managed to squeeze in an integration with uPort which is an open identify system for Ethereum. They have a mobile app and a bunch of protocols that allows the app to request a users credentials. It’s a pretty slick system and feels like one of the more user friendly ways to access accounts, etc. The Getting Started guide was the way forward with this one.

React/Webpack/Node

Because the Colony stuff was so user friendly I kind of feel like the real learning experience in this exercise was learning React. Once I got going I really enjoyed working with components/state and found JSX easy enough to use. By the end adding new functionality or UI to the app was really efficient and fast.

I have briefly looked at React before but the advice about learning new things is to build something and in this case I definitely felt like I gained a lot of experience. Compared to Python/Django I definitely think its more difficult to get up and running with the whole React/Node/Webpack stack, or maybe it’s more accurate to say you can get up and running ok but you don’t really know what’s going on in the background! Initially I followed along with this surviveJs React Book. It was a nice introduction and the cool thing was it provided a Webpack based template that I reused for my hackathon app.

The parts I didn’t fully get a full grip of were Flux and Webpack. I ended up not using Flux at all because I needed to just get something that worked so I guess my code isn’t too pretty/efficient. At the start I had some issues integrating the Colony stuff with the surviveJs template and I had to dig in to Webpack to configure things correctly. I got there but would like to understand it better.

Hackathon Entry

I really enjoyed this learning exercise and I’m pretty happy with my entry. The idea for my app was to demonstrate how Colony can be used to create a decentralised issue reporting system. The app itself is focused on a very niche area — pot hole reporting for a local authority! More detail and the code can be found at the GitHub repository and a wee demo can be found below:

--

--