Jonas Laurens

  • Front-end Developer
  • Father of 2
  • Husband
  • Techie
  • Comic Enthusiast
  • Guitarist
  • Cinephile

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.


Technologies used

React Node Express Sass Heroku

Full list available at: Github


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


Other branches

Sample of the login screen
Sample of player 1 screen
Sample of player 2 screen
Sample of player 3 screen
Sample of player 4 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.

View details
Sample of the admin dashboard homepage
Sample of the comic detail view
Sample of the publisher management page
Sample of the user registration page
Sample of the series overview page
Sample of the user administration page

Hall of Justice

A virtual shortbox web application to catalog comic book collections, list duplicate issues for sale, and purchase missing issues from other collectors.

View details
Sample of the Home Page
Sample of the Realisation section
Sample of the Contact Section

Stetrics

A business website built for Stetrics to showcase their services and streamline new customer inquiries.

View details