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.

Design

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

Stack

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.

TypeScript

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