The Reach Algorand Bounty Hack

Dev Time
5 min readMar 25, 2021

--

I only started looking into dApp development around the fall of last year, but it immediately seemed like a sphere of programming I wasn’t ready to venture into. The majority of the tutorials were outdated due to how quickly Solidity changed, the amount of setup involved in building the most basic of dApps seemed extreme. Without an active Stack Overflow community, I wasn’t sure where to ask questions. I gave up the prospect of dApp development and moved on, only to discover Reach a little while later.

A humorous representation of my journey into dApp development. The picture captions “how it started” on the left with someone getting attacked by a bear to a caption of “how its going” on the right with a picture of someone lying on a bear rug
An accurate representation of my journey into dApp development

Here was dApp programming made viable. While it didn’t have the number of (mostly outdated) tutorials Solidity had, it did have a community that was quick to answer questions. Setup was dramatically simpler than setting up a Solidity app and its built-in security made it seem quite a bit safer than Solidity. While there’s a bit of a learning curve in the beginning getting the tools set up, I was building my first dApp in two week’s time!

A few months after joining the community, Reach kicked off their first Bounty Hack. I decided to compete and was assigned the task of building a penny auction.

The Project

A penny auction is a fairly simple bidding game. An auctioneer puts an amount of money into the pot, sets a deadline, and starts the auction. Bidders then join the auction and compete to be the first to bid one percent of the pot in a series of rounds. Every time a bid is submitted successfully, the deadline resets and a new bidding round begins. If the deadline goes all the way to zero without anyone bidding, then the game ends and the last bidder wins the pot.

A screenshot showing the main page of the dApp. It includes the website title, a button that will explain the dApp, a button for funding the wallet, and two buttons that allow the user to start or join the auction
The main page of the penny auction, where users can start or join auctions.

How it Went

The project’s development went smoothly, with the majority of the work going into the front end. While Reach doesn’t limit you to a specific framework, I decided to use React so as to showcase building a Reach-React app with the create-react-app boilerplate (and I’ve also been trying to get more familiar with the framework).

There were some difficulties learning Reach but none of them proved to be much of an obstacle (due primarily to Jay, Dan, and Chris always responding to questions so fast). The parallel_reduce function that makes up the bulk of the contract for this dApp took quite a while for me to wrap my head around; I ended up breaking it apart into visual representations of its constituent parts and reassembling it to understand how it works.

A drawing showing the breakdown of parallel_reduce into its components, pictures of how those components work, and then one picture with all the others combined.
How I drew up the parallel_reduce logic (courtesy of MS paint)

Outside of that, however, the Reach language wasn’t too difficult to work with. I still have a ways to go before I can look at a contract and immediately point out which segment is going to cause a theorem error, but hopefully I’ll arrive at that point by the time the next Bounty Hack rolls around.

I do need to flex its versatility before I wrap up because it’s just so awesome! A key part of the bounty hack was designing a dApp that could be launched on Algorand. Instead of rebuilding the whole dApp in Teal, Reach compiles your contracts down to Teal or Solidity as needed (with more options on the way). This allows you to run the dApp on Ethereum, remember how high Ethereum gas prices are, swap out one word from your package imports, follow a few setup steps (soon to be retired), re-run a Reach cli command with an extra param, and your dApp is now running on Algorand and will feature its drastically lower gas fees (seriously, it’s like 10% of a cent).

For an in-depth look at the development of the project, check the README on the project’s github repository. It includes a Development Log section that shows every step I took while building the dApp.

I should explain why the repository has v2 appended to it. This project technically started two months before the Bounty Hack when the team needed someone to build a project (the penny auction) that would make use of the new ParticipantClass feature. While I was able to get a rough draft of the contract working, I stopped short of making a frontend due to having to finish up my degree. When I wrapped that up and started work on the frontend, the Bounty Hack was just about to begin. Chris noticed I hadn’t entered it and allowed me to under the restrictions that if I was building the penny auction for it, then the project wouldn’t qualify for voting (since it was partially started before the Bounty Hack).

A screenshot of the reach contract for the project
A portion of the final contract (the whole thing is only 71 lines)

Recap and Looking Forward

All in all, it was a great competition. I learned quite a bit more, got to see some more of the amazing things that can be created with Reach, and am looking forward to building more dApps and developing my understanding of the platform. I might even add to the penny auction at some point. My brother introduced me to a Phantasma version of the penny auction.I like how they made the contracts so that they can be joined by anyone instead of just by invite. I’m glad that the team built Reach, I don’t think I’d have ever made a single dApp if they didn’t.

--

--