Apex Legends Stats

Assignment

I came across this tutorial by Brad Traversy and was immediately hooked, as I was both a big fan of Apex Legends and a regular viewer of his channel. While the original tutorial was built in Vue, I challenged myself to recreate the entire application using React instead.

At the time, I already had some experience setting up Node.js servers with Express. However, fetching data from a third-party API on the backend was a new concept for me, which I quickly learned and integrated.

I needed a way to indicate to users that the application was actively processing their requests. Implementing a custom spinner component controlled by a boolean loading state solved this effectively.

Packages

ReactNodeExpressSassHeroku

I learned

Fetching data from a third-party API
Rendering dynamic API data in React
Handling loading states
Basic setup of a Node.js/Express backend

Solutions Found

Deploying on Heroku and resolving CORS issues
Managing asynchronous loading states in React

Project Gallery

Apex legends stat tracker

Result of the Apex legends stat tracker

Other branches

Sample of the Homepage

Sample of the new grader path

Comic Grading

An interactive web application that makes comic book grading accessible to collectors, estimating grades based on the industry-standard 10-point scale.

Sample of the login screen

Sample of player 1 screen

Poker

A multiplayer Texas Hold'em poker game supporting up to 4 players, featuring a Node.js game server, real-time WebSockets, and Redux state management.

E-commerce homepage showing the comic book collection grid

Detailed inventory overview filtering comics by publication series

Comic Shop

A serverless, zero-overhead storefront built to catalog and sell a massive personal collection, featuring real-time state synchronization and automated stock auditing.