Sportfolio

Demo

Click here to see the deployed project. The server is hosted on a free account so please allow a few moments for it to wind up.

Purpose of the Project

I've always been fascinated by how sportsbooks generate odds for sporting events and matchups. As an avid mixed martial arts fan, I enjoy analyzing fights and assigning my own odds based on my assessments.

I created Sportfolio as a way for users to easily track their wagers and see how they stack up against the bookmakers without having to risk any money.

My goal was to design an intuitive UI that is easy to use while offering users in-depth statistics of their past performance. The app also features a public leaderboard, allowing users to share their picks and strategies and see how they rank against others.

The Process

The first step in developing Sportfolio was setting up a Node.js server to provide an API for the front-end. I chose MongoDB for the database. Initially, Sportfolio only tracked picks, but I gradually layered in additional functions like pick evaluation and stats calculation.

After setting up the server and database, I implemented Redux to manage cached data and data fetching. I used Tailwind CSS for styling elements and React to render dynamic components.

Finally, I implemented authentication and authorization using JSON Web Tokens, allowing admins to post new events and results and users to log their picks.

Problems

Sportfolio was the first full-stack app I developed, and it was done before I learned TypeScript. So, as you can imagine, a lot of issues popped up on the back end when writing logic to evaluate picks and calculate stats.

It's a bit embarrassing to admit, but I encountered situations where numbers were read as strings, leading to errors with mismatched objects. There were also errors that weren’t immediately caught, like a component crashing the page due to an API missing a property.

To fix this, I had to review large chunks of code and ensure all data types and object structures matched. While tedious, this process made me more aware of how the front end and back end interact.

Lesson Learned

The biggest takeaway for me from this project was being more diligent with data types.

Having worked primarily on front-end only projects before, I had limited experience with sending data. It led to some poor practices that I was not aware of.

Working with back-end technologies broadened my perspective on how everything in a web app interacts. It was also a valuable learning experience in building models and APIs.

I made many mistakes while developing Sportfolio, but those mistakes pushed me to write better code and to learn new technologies like TypeScript, which I implemented in my next project, GenPT Chef.