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.

/0 Comments/by

Making ZIO, Akka and Slick play together nicely

,

All of us are eager to start writing real-world applications using ZIO (Scala library). But ZIO is still quite new, and its ecosystem is still incomplete. So while we wait for ZIO-HTTP and ZIO-JDBC (or whatever else comes in the future) to happen, we will have to end up integrating ZIO with other frameworks that can communicate with the outside world. In this article, I want to explore what this kind of integration might look like for two of the most popular libraries – Slick and Akka HTTP.

Read more
/7 Comments/by

What is HTTP protocol? Introduction to HTTP for Testers

If you’re testing web apps then you need to know what the purpose of HTTP protocol is and how it works. Actually, in my first project I lacked this knowledge. However, since then I’ve realised how important it is and that’s the reason I want to share it with you. In this article I will show you the basics of HTTP protocol. For example, how the BE (back-end) and FE (front-end) communicate, where you can see the data and how you can use this knowledge to add extra information to your bug tickets.

Hopefully, with a little practice, you’ll be able to determine where the error lies (BE or FE). Which is something your developers will thank you for. So without further ado – let’s get started!

Read more

/0 Comments/by

Async/await – how it works

Async/await is a brand new way of handling asynchronous calls in JavaScript. If you don’t know how it works, in this article I will be providing some examples to help you get started. Read more

/0 Comments/by

Using Akka HTTP with Sangria as GraphQL backend

,

Really quick introduction to GraphQL

What is GraphQL?
Many people think that GraphQL is ‘something’ related to Graph Databases, in my opinion they’re wrong. GraphQL is to Graph DB like Javascript to Java. Are based on similar concepts, but are used for completely different things.

GraphQL is a query language for API’s. Some people name it successor of REST, I’d rather say it supplementor of REST because both can work together. In this article you’ll find good comparison of both.

In short: GraphQL is a query language for APIs, optimized for performance, designed and open-sourced by Facebook. In GraphQL you can ask server for connected data and you’ll get in response only what you’ve asked for. Not more. If you need more information about this, you’ll find it on GraphQL webpage Read more

/1 Comment/by

User Authentication with Keycloak – Part 2: Akka HTTP backend

,


Welcome to our second article about Keycloak Server! Previously, we’ve learnt to setup the server and make use of it in a webapp -this time, we’re going to create a matching back-end API and also learn a little bit about the OAuth2/OpenID magic that powers our entire authn/authz mechanism. So let’s get started! Read more

/3 Comments/by

User Authentication with Keycloak – Part 1: React front-end

,

Providing authentication and authorization for the non-public-facing components of your application is an important part of many systems. But all major Scala frameworks come ready-equipped with some native tools for doing that, with complexity and comprehensiveness ranging from basic HTTP schemes with Akka HTTP’s SecurityDirectives to numerous Play plugins such as Deadbolt 2 or Silhouette.

But it can be difficult to get what you need out of some of these. And if you have to relearn them for every new framework – it ain’t nice either.

Learn how to overcome the additional overhead when moving to an unfamiliar tech stack!

Read more
/21 Comments/by

Discover React Hooks

During the ReactConf 2018 the Hooks were presented and to be honest it has shaken up the React community. If you haven’t seen “React Today and Tomorrow and 90% Cleaner React With Hooks” video yet, then I encourage you to do so.

Introducing stateless functional components in React 0.14 allowed us to create a smaller reusable blocks of code. But if this component had to handle some more advanced logic, then we had to convert it into a class. Now, by introducing React Hooks, we’re able to inject some logic into functional components and futhermore we can reuse this logic blocks in multiple components. Read more

/0 Comments/by

Storing files on Amazon S3 with Alpakka AWS S3 connector

,

S3 (Amazon’s Simple Storage Service) is a popular, widely used object storage service. Uploading a file and storing it on S3 in Akka Http traditionally involves temporarily storing a file before sending it to S3 service. This process can be simplified by using Alpakka AWS S3 Connector. In this post we will take a look at those two different ways and see how they compare with each other. Read more

/0 Comments/by