We hAkked Tezos! 
and created a Frontend data visualization app

We hAkked Tezos! …and created a Frontend data visualization app

We hAkked Tezos! 
and created a Frontend data visualization app

Cryptonomic NYC Hackathon part 1

The Idea

We live in an era of cryptocurrencies, and there’s no escaping it. It’s already happening, and if there’s one thing that represents well what’s going to happen next, it’s blockchain. That’s why during the Cryptonomic NYC Hackathon we decided to try and visualize tezos transactions by creating a frontend data visualization app. What is tezos, you ask? As I’ve mentioned before, it’s definitely part of our future. Here’s why. Tezos is a decentralized platform based on blockchain technology with its cryptocurrency (XTZ). It launched in June 2018 and uses the Proof of Stake algorithm. Too much information? Yeah, the cryptocurrencies topic may seem a little bit complicated at first and needs some time to get into but don’t worry, let’s go over it together. 

Frontend data visualization app – Time of day chart
Frontend data visualisation

What exactly did we build?

tAs I’ve already mentioned, we’ve built a frontend data visualization app. We wanted to visualize tezos transactions on the frontend/client-side. We’ve split the application into several sections such as Home, Transactions, Charts, and Live Chart. The Home section presents general information about our project, such as the tech stack, project description, etc. We used the Charts section to display the tezos transactions in charts. Users can choose the date that they want to see from the charts as well as the type of data (Transactions, Currency, Buyers, Sellers). There is also a second chart which presents the time of day when the transaction was committed, such as morning, afternoon, evening, night. The transactions section shows a list of the last 100 operations, including all connected data such as Source, Destination, and Timestamp. The previous section is the Live Chart which displays transactions and updates them every 10 seconds. We’ve built the chart in the form of colorful circles, with size depending on the number of transactions completed by each of the tezos.

Frontend data visualization app – List of transactions
Frontend data visualisation
Frontend data visualization app – Transactions charts

Frontend data visualisation

The Project

The tech stack we chose was React with Hooks, Redux-Saga, TypeScript, and React Chart.js for data visualization. We picked this stack because our teammates were familiar with the React library. For the communication between our frontend application and the server, we used ConseilJS RESTFUL API. Storing 100000 transactions on the frontend side was quite challenging, but we finally decided to store the data in LocalStorage and redux state. We wanted to focus on the UX/UI side to make sure our application is eye-catching and user-friendly, so no-one would have to run away, screaming, “my eyes are bleeding!”.

You can check out our project here: https://tezos-data-analytics-dashboard.scalac.io/

Live charts
Fronted Data visualization Live Charts

The Hackathon

Happy Hack Fest ! And may the odds be ever in your favor. 

We started at 9 AM on both Sunday and Saturday in our office. On day one, we split our work into roles. Damian was responsible for the Live Chart visualization, managing the redux state and request optimization, I was responsible for the Charts data visualization and Mariusz our leader was responsible for making the base of the application, transactions, server communication and making sure everything worked properly. We also joined the Cryptonomic channel via riot application so we could chat with other participants. 

The Experience

The hackathon was an enjoyable experience, one that I would recommend to everyone. It was a real pleasure to meet and work with such talented people. Sure, there was pressure and moments that we thought we wouldn’t make it, but we never gave up! Things I’ve learned from this experience are the experience itself, but also some new development knowledge as well as some blockchain stuff that might be very important and useful in the future. Thanks Cryptonomic for a great adventure!


During the hackathon, Scalac had two teams to develop their solutions. See how we made a Micheline Michelson translator.

Read more

More on frontend

Download e-book:

Scalac Case Study Book

Download now

Authors

Wojciech Nowakowski

I’m a frontend developer at Scalac. I love solving problems, puzzles, experiencing new things, and writing apps that require intuition and creativity. I like to approach things from the technical and mathematical side. I’m also a music lover and a movie maniac. I started my programming journey by developing flash games on the Newgrounds portal when I was 13.

Latest Blogposts

07.06.2024 / By  Arkadiusz Kaczyński

Single tenant vs multitenancy – choosing the optimal solution.

Choosing between single tenant and multitenancy

What is Tenancy? Tenancy, what truly is it for? There is often a business need that involves using ecosystems by multiple organisations/clients and each of them wants their data to be separate from each other. You can achieve this with tenancy. You can do it with either single tenant deployment (setup per organisation) or with […]

06.06.2024 / By  Michał Talaśka

Java outsourcing projects: how to ensure security and compliance.

Java Outsourcing Development

In today’s world, security and compliance are paramount. A day without news of a data breach is quite rare. When it comes to outsourcing Java projects – one of our specialties – safety should be a priority. With the growing complexity and sophistication of cyber threats, businesses need to make sure that their Java outsourcing […]

30.05.2024 / By  Matylda Kamińska

Scalendar June 2024

Scalendar Scala conferences 2024

Event-driven Newsletter Welcome to June Scalendar! Join us in exploring conferences, meetups, and gatherings that promise to enrich your knowledge, expand your professional network, and inspire your career path. From Tokyo to Atlanta, Vienna to Rome, experts and enthusiasts from the global tech community come together to share knowledge, experiences and – last but not […]

software product development

Need a successful project?

Estimate project