Building Auction DApps With Reach and ReactJS

Building decentralized applications has never been an easy task. You must be mindful and cautious throughout the development process. Ensuring the application is in sync and is up-to-date is critical, especially when building for multiple environments. This effectively means having to build the same application on the same network multiple times. It’s a nightmare! Then we found Reach.

Reach is a powerful language that seeks to simplify all these. Honestly, we would call Reach a “deity language” because of how it single-handedly eradicates all the troubles of building blockchain dApps very easily. It is lightning fast, and we’ve yet to encounter security issues so far when interfacing it with a frontend language like ReactJs to build blockchain apps. We haven’t tested it on VueJS yet, but can’t wait to get our hands dirty building decentralized apps.

Developing blockchain applications in Reach really intrigued and inspired us. We say this because the majority of the team is very new to blockchain development, and so it took some time to get things together with support from the team. Mary Gaewu has been a great inspiration and guide. We really commend her for her good work. There were times when we were not so sure as to how to implement a feature; Mary would quickly pull up some resources. She even went as far as to point out where and how other developers approached similar challenges so that we could strategize our own solution.

From a developer’s perspective, we have found the experience of participating in the “Universities Unchained’’ Algorand Bounty Hack quite challenging and yet interesting. Our journey wasn’t always smooth, but we are ultimately very happy with how we were able to work things out. There were times when we would read the Reach documentation and watch their tutorial videos just to marvel at how great a tool the platform can be.

We have considered going into blockchain full-time using Reach and VueJs. We’re seeing more opportunities in blockchain development by the day. We believe this is going to have a great impact on the world at large. Blockchain technology is the next tremendous technological advancement that will cause a ripple effect throughout our society and culture as a whole.

Unfortunately, our project was not completed on time. This competition was the first time any of us have ever built a dApp. Blockchain has been a topic of interest to us, so we saw this competition as an opportunity to challenge ourselves to build something tangible.

About Our Project

Our auction platform has two kinds of actors: the “Auctioneer” and the “Bidders”. The Auctioneer initiates the action by setting the starting bid and the deadline of the auction. This includes the minimum amount Bidders are allowed to submit.

The Auctioneer initiates the auction by setting the starting bid (startingBid) and the duration of auction (timeout). The Auctioneer also inputs the ID of the item being auctioned representing the token for the item. Each bidder is given a chance to place a bid. With each bid placed, the system determines the highest bid (highestBid) and releases the outcome.

After this, a window is opened for bids to be placed again by each bidder. The bidding cycle continues until the auction has run its course. The winning bidder performs a transaction, transferring funds equal to the winning bid they placed to the auctioneer. The Auctioneer also transfers the ID of the auctioned item to the winning bidder.

On Day One

At the start of the hack, we kept asking ourselves if we could do it. Mary Gaewu introduced some of her coursemates to it but they said they did not have any knowledge about blockchain and so they could not compete. She had to find a way at all costs to work on the hack as she wanted to challenge herself to partake in the hack and build something tangible with the newly discovered language.

Eventually, she found someone from the Python community by the name Joy Ayitey, who after discussing the project with, found it interesting to venture into and so worked hand-in-hand with him to get the project to come to fruition.

Our Journey

We went through Reach’s Rock, Paper, Scissors documentation as well as all their modules on web interaction. We also looked at how some online auction sites worked and how some features we discovered could be implemented with Reach. Going further, we took the time to enroll in some blockchain courses on the Algorand site and also on Udemy to get a better understanding of the project we were to embark on.

The first time we asked for help was concerning the use of the FUN() keyword. We were not certain how to apply it while processing the bids made by bidders. However, we were able to get responses and findings that clarified our concerns and so implementation went smoothly.

Getting a good team member to assist Mary Gaewu with the frontend was a challenge. She is a newbie in frontend development so she needed someone with that expertise to assist her in developing a user-friendly interface for the project. She had to try out something in the meantime until she finally found one.

We were really fascinated with how Reach easily handled communication between the aspects where developers would have to develop over a specific language to interface with the frontend in building blockchain apps. We literally just had to focus on the frontend whilst Reach handled the hard times for us.

We confess we didn’t find any risks or security issues with Reach. It was as though we were working in a safe haven throughout development. We have never seen anything like it. This made our development journey quite easy and more interesting. Another amazing fact is how fast Reach handled transactions and responses throughout the application, though we had not used a specific optimization tester or runtime speed calculator to monitor the speed, we could see right as we developed how things were being done effortlessly by Reach behind the scenes. It was mind blowing.

What Comes Next

We would like to add a feature where Bidders and Auctioneers would see live bidding from challengers on a sidebar, together with the amount of faucet bidded, the time bidded and how much time is left for the bidding item.

We would also enhance the dashboard user interface for each user. The Auctioneer, the Bidder and the default page would have a more detailed look.

The team seeks to dive deeper into blockchain and building dApps with Reach. We would also love to start a hub in Ghana as we realise this as a great and wonderful opportunity for blockchain developers to discover and make good use of Reach while growing the community. We believe we have found something of a “deity level” with Reach and we are very excited about this opportunity.

Algorand Ambassador. A computer Engineer and a blockchain advocate