Grand Exchange
Built with:
JavaScript, Node.js, Express.js, Plotly.js, MongoDB, RestAPI
Inspiration:
This was my very first full-stack web application. It was a project inspired by a MMORPG (Massively Multiplayer Online Role-Playing Game) I played when I was younger and is still active today, 25 years later since its first launched online.
What it does:
This project fetches the latest item information and prices from the RuneScape Grand Exchange API every 5 minutes, stores the data in a MongoDB database, and displays and visualizes the data in both graphs and tables. It allows you to see the changes in price frequency and trading volume between players.
How it was built:
This project has 2 API calls that are made every 5 minutes, the data is merged into an object, the object is then sent and stored in MongoDB, and then on the frontend the user is able to retrieve item information which is displayed via Plotly.js.
Challenges I ran into:
This was my first full-stack CRUD application, challenges included learning backend development for me to make API calls, storing the data from the API calls into a database, and then being able to retrieve the data and visualize it in both graph and table format. In order for me to properly store the data into a database in the proper format I needed, I had to make 2 API calls for multiple pieces of data, merge the data from both API calls into a single object, and then populate the database with the data. Another challenge was setting up a database, how to filter data by making the proper SQL calls and retrieve the data. I had to learn redux for filtering and that alone took a considerable amount of time.
What I learned:
I learned how to create a full-stack CRUD application using Vanilla JavaScript, Node.js, and Express.js. I learned how to make API calls and store data retrieved from the API calls into a database. Originally I used SQLite3 but then migrated to a cloud-based database for additional learning and thus chose MongoDB as it's one of the most popular databases. I learned to utilize Plotly.js to create charts and to use Redux for filtering and searching data.
What's next:
I plan to make another version of this with modern technologies to show all I've learned since then. But additionally a better UI/UX, user authentication and accounts for personal item tracking, and email/SMS notifications to let players/users know when an item price they're tracking has changed.