Cryptocurrency Front-End Project: Block10
Blockchain networks and databases revolutionized the notion of cryptocurrencies and reinvented financial technology. Block10 provides realtime market average reporting and analysis of major cryptocurrencies and their trends. Our specialty? The top ten. Created by coders and investors, we aim to provide the comparative data you need to learn more and invest in the future.
Six weeks into DigitalCraft’s Full Stack Immersive program, our class was challenged to develop a fully responsive front-end project over the span of four days. Additionally, what we created had to pull data from at least two remote APIs.
Prior to the bootcamp, I kept up with popular cryptocurrency reporting sites to follow coin prices and trends. My two favorite sites were CoinCap.io and EtherLive.
Getting started:
Inspired from their distinctive design, we decided to incorporate CoinCap’s live-ticker functionality and the visualization of graphical data EtherLive features by using a JavaScript library, HighCharts.
Presenting easily digestible and navigable information on all the relevant cryptocurrencies was our main goal. Once we determined our core functionality, we began to brainstorm specific features we wanted to include. With our MPV — minimum viable product, in mind and acknowledging our four day deadline, we dove straight into wire-framing. Here’s a peek to see where our heads were at!
Every morning began by identifying features or goals we wanted to see completed by the end of the day. After identifying our daily goals, we decided to take a little influence from the Kanban approach to agile development and each chose one feature to work on at a time. If one person completed a feature, they chose another to work on. If there was ever a roadblock, we paused and mob-programmed the trouble-area until it worked. These daily sprints really helped us to stay organized, focus our efforts and maintain steady productivity.
Building:
Implementation of the live-ticker functionality was surprisingly easy using Socket.io. A few lines of code and our project was receiving real-time updates! I refined the scope of the data we were pulling to only return the coins in the top 10 positions to make it more user friendly. Graphing that data via JavaScript’s HighCharts library was less agreeable.
One of our stretch goals was to create a sign-in feature utilizing a backend as a service. We went with Firebase because it’s very full-featured. Our sign-in allows users to log in using their google account information or simply by entering their email address. Once logged in, they are able to add selected cryptocurrencies to their Favorites page.
Transferring that data from localStorage to Firebase did not come without its challenges. Finding data structures, avoiding missing data, and keeping our data structures as flat as possible were among the greater difficulties we faced.
Hindsight:
The opportunity to build an application on a small team from scratch was a process, and one I incredibly grateful for. We encountered hurtles, as any developer might. One of the more frustrating problems, albeit humorous now, was with our public APIs. If you’re ever building a cryptocurrency application and Bitcoin decides to fork into Bitcoin and Bitcoin Cash, your APIs will break.
The day before our project was due, we spent a good seven hours rewriting our core code to adjust to alternative API calls. We suffered stretch goal functionality, but our MVP was still intact. The next morning, 15 minutes before we were going to present, our preferred APIs had adjusted to the fork. We frantically reverted back to our original code, and regained full stretch goal functionality.
See for yourself:
We deployed our site to AWS so you can check us out at Block10
Notice: if the link above does not work, make sure the connection is ‘http’ instead of ‘https.’ Our APIs will not generate data over the ‘secure’ network.
On that note, if we learned anything during this project, we anticipate our APIs will change again. In that event, we decided to include a screen-recording of the full-functionality of our site that you can explore below!
Takeaways:
My gratitude extends beyond the experiential learning process itself and to the talented and determined collaborators and friends who made Block10 possible. If you’ve read this far and would like to get to know the developers I had the pleasure of working with, you can find Aaron Sosa and James Hong developing their next great endeavors!
As always, thanks for reading and I’ll be back soon with new discoveries as we dive into back-end development!
