Clash Ratios

ClashRatios is a Next.js TypeScript app that uses the Clash of Clans API to compare the donations ratios of two players.

Clash of Clans allows for players to both make troop donations to other players as well as receieve troop donations from other players. So long as they're in the same clan. This app allows you to enter your tag as well as a friend's tag to see who has a better ratio. The ratio is calculated by taking the number of donations and dividing it by the donations received. The higher number wins.

This app is a full-stack app fully built with TypeScript on both the front-end and back-end. It uses an appropriate mix of strict types as well as inferred types. This applies to both the front-end as well as the back-end.

Speaking of which, the front-end is built with Next.js which has great built-in TypeScript support. The front-end is styled with Sass which Next.js also ships with built-in support for. The front-end calls the back-end server to handle requests to the API and then manipulates the data and displays it.

The back-end is a TypeScript Express server which performs the calls to the Clash of Clans API.

The front-end is deployed on Vercel. The back-end is deployed on Heroku with the QuotaGuard static IP add-on to allow whitelisting the IP address for the API.