Refactoring an old project Part 1: Project Introduction
For my first React project, I decided to make something unique and, at the time, useful to me. I played a game called World of Warcraft. For those unaware, it is an MMORPG(massive multiplayer online role-playing game) or even more simply put, a big game where a lot of people can interact and complete game content together.
The game has an in-game economy that is made up of 3 currencies: copper, silver, and gold. There is a system built into the game called the auction house where players can post in-game items for in-game currency. This is an incredibly important aspect of the game since it drives each server’s overall economy. Players can use this system to either accumulate more in-game currency (wealth) or purchase rarer items for a price determined by other players.
When I played this game I found an awesome API by Nexushub that hosts each server’s auction house data. In addition, they built an incredibly useful website where players can look up their individual servers and observe data on in-game items of their choice. Here is their website: Nexushub. This is what inspired my app however, I wanted to create my own formulas for what data to show and how to show it. Here is a demo of the initial app I built utilizing the Nexushub API, React, bootstrap, chartjs, and Node.
Key takeaways about the initial app:
-it only showed data for 4 items
-it only showed one server and one faction’s data on those items
-it would fetch the API’s data every 10 seconds
-it had very little styling
-it was not deployed
This was a big accomplishment for me at the time since I was happy to be able to display the Nexushub data in a graph and allow the user to see how an item performed in the given week. However, recently I wanted to improve the app and make it more practical for users.
Here is a demo after my first big refactor
Improvements from the previous version:
-users can search any server, faction, or item
-improved the styling
-newsfeed
In the next post, I am going to compare the code from the first version to the refactored code in the latest version.
Thanks for reading!
