DEV Community

Rembrandt Reyes (He/Him)
Rembrandt Reyes (He/Him)

Posted on • Updated on


Creating an Auto Chess Stats Site (TFT focused) Part 1

The rise of AC Slayers

This series I will be blogging my journey through creating a TFT stats site. I want to document this so I can have a record of all the wins and pain points I face. I was on the fence about doing this blog series since I would have to write, edit and document all the things I do. It is time-consuming when I could be focusing on coding, but I figured this would be a great way for others and myself to see how this journey goes.

Let's begin!

Initial thoughts

I initially wanted to create a website that will encompass the most popular AutoChess (AC) battlers, DoTA & Team Fight Tactics. Not a great idea to do for the MVP. So I pivoted and decided to focus on TFT for now. Riot offers an API for developers which you can find here. If you have an account with Riot Games you can log-in and see the different requests you can do. Pretty standard stuff.


Next, I thought about how a user would use this website. I need (tentative):

  • Homepage
    • Logo
    • Input for username
    • Form Submit
  • User Stats page
    • User info
    • Recent matches (placement, units, traits)
    • Common team traits
  • Match info
    • Placement
    • Users
    • Units
    • Traits


I originally started with React and was going to just do a SPA with react-router, but I pivoted here as well and went with Next.js instead.

Why? Next.js is a React Framework that does so much out of the box. And the biggest reason for me is SSR Speed.

So I run yarn create next-app fill in the prompts and voila! A Next app ready to go. CD into your directory and yarn dev to see it up and running.


Next.js also offers TypeScript capabilities built into its framework. Create an empty tsconfig.json file in your root directory. Assuming you are still in the directory of your project touch tsconfig.json should get you there. Execute yarn dev and it will ask you to install some node modules and you will have TS with standard configs.

Part 2

Top comments (0)


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!