How I made a crypto app 10x faster

Hey y’all, just wanted to share my experience working on a cool crypto app called POIDH (Picture Or Didn’t Happen).

I met Kenny at a local meetup. He showed me the app and I like the idea. But I noticed the app is very slow and has many small but annoying visual bugs. I asked if I can help.

Fortunately, the app was open source and Kenny was kind enough to let me play with it.

When I dug into it, I found the source of the slowness. Every time the page was loading, it made hundreds of requests to Ethereum RPC servers to fetch the data. It took a long time and a lot of traffic, some pages downloading more than 50MB of JSON. This was happening every time for every user.

To speed things up I needed a backend. A program that can pull all the relevant data from the blockchain and store it in a database in a way that’s easy and fast to query.

A friend of mine suggested I should use Ponder for this. It’s still early, but I really liked the tool. Basically I needed to describe the database tables to the tool, and then write some code that processed the blockchain events and inserted the right data into the right tables.

Ponder comes with a built-in GraphQL server. I decided not to use it because I wanted more control over the data that gets transmitted and also extend it with other actions. I picked tRPC — it’s a simple and typesafe. I had Ponder index the events and put the data into a database, and then I used Prisma to query the database and send the results to the frontend via tRPC.

I was shoked at how much code I was able to delete from the old app. All these useEffects that fetched the data, manipulated it in strange and bizare ways, was gone. Hundreds of lines of code replaced by simple 5-line queries.

The app got a lot faster too. Actions were snappy, initial page load time and size reduced more than 10x.

The price of this was a bit of complexity on the backend. Now I had to run a Ponder instance and a database. There was also a small additional latency between onchain events and Ponder processing them.

Along the way I’ve also fixed a bunch of bugs, including visual bugs, especially on mobile. When building new web apps, I always recommend people to start with mobile view first — it’s easier to scale the interface up to desktop than it is to scale the interface down to mobile.

The POIDH app is open source and you can see all the changes I’ve made. I’ve learned a ton from this project and I hope it does well.