Crypto-Calculator.io: NextJS + NexusJS Project

A knit.dev project showcasing our favorite technology stack

Intro

Crypto-calculator.io is a web app to compute the real-time value of crypto equations, with any composite equation of crypto coins, a fiat currency, and standard operands (+, -, /, *). It pulls from CoinGecko.com, one of the most reputable sources of crypto data, and provides an autocomplete (if you type “@” in the text-box) to see available inputs.

If you’ve checked out our earlier articles, you’ll know we are big fans of NextJS with MUI5 on the front-end, and NexusJS GraphQL on the back-end. This app was built over the course of two weeks and in this article, I’ll share some of the highlights of this project.

Back-end Technology

Overview: Provides cached data on supported coins and fiats to reduce the API request load on CoinGecko.com. Contains single compute endpoint that takes an input crypto equation string and outputs the evaluation of that string.

Stack:

1. Primary Framework — NodeJS
2. API Access Framework — GraphQL Nexus + Apollo Server + ExpressJS
3. ORM — Prisma 3
4. Language — TypeScript
5. Compute Library — mathjs
6. Database — PostgreSQL
7. Hosting — Render

Front-end Technology

Optimized across all lighthouse metrics

Overview: Statically retrieves cached data on supported coins and fiats on build-time (with smart refresh). Provides responsive interface to calculate and compute crypto equation string.

Stack:

1. Primary Framework — ReactJS
2. Supplemental Framework— NextJS
3. Styling Framework — MUI5 + SCSS Modules
4. API Access Framework — Apollo Client + GraphQL Codegen
5. Autocomplete Component with Fuzzy Search — react-textarea-autocomplete + fusejs
6. SEO Library — next-seo
7. Analytics — Google Analytics
8. Language — TypeScript
9. Hosting — Vercel

Back-end Compute Implementation

The project uses the mathjs library as its backbone for flexible expression parsing with support for symbolic computation. It was inspired by the currency example.

The compute function generates new units for each crypto coin and fiat in the input string (2 BTC + 1 ALGO IN USD => BTC, ALGO, USD), based on the real-time prices it pulls from CoinGecko.

In order to support the parsing of crypto symbols, which come in many different forms and can contain any number of unique characters, I designed a number of regexes to extract these symbols accurately.

Example of one of the regexes I used, this one to parse potential crypto symbols in the input string

In cases where the symbols conflicted with the mathjs functionality (i.e. if they contain non-alphabet characters), I created an aliasing function to map the symbols of units to aliases.

Once calculated, the crypto-calculator API returns an object containing all relevant information to the calculation.

Front-end Autocomplete Implementation

I used a weighted fuzzy search based on two attribute fields (symbol and name) to determine the autocomplete options. The results are sorted by market cap rank.

Final Thoughts

We hope this project provides some insight into our technology stack preferences and coding capabilities at Knit, demonstrating the performant qualities of a full-stack GraphQL implementation and showcasing some of our creative problem-solving logic.

In addition to serving as a portfolio project for Knit, we plan to host this app as a general tool for crypto traders and enthusiasts. Common use-cases of this app include calculating the values of liquidity pools in yield farming, evaluating arbitrage opportunities on exchanges, and calculating totals in a portfolio.