For my return to Software Development, I wanted a project that was straightforward in its concept but something that exposes me to a lot of new technologies. MTGMetaTracker was ultimately a great fit since I got to work with MongoDB, Express.js, EJS, parse5, and axios for the first time while also expanding my knowledge on CSS, JavaScript, and D3.js. What MTGMetaTracker is, is a web app that fetches data from competitive events for the card game Magic The Gathering from MTGGoldfish, then storing and visualizing this data over time. I loved this idea because from being in the competitive Magic The Gathering scene, it is interesting to see how strategies rise, fall, and evolve as time goes on.

My overall process for this site was functionality first, obviously the Frontend and the Design were important, but the data would dictate what this site would become. Starting after I initialized my Express environment with a simple Frontend, I dove into working with axios and parse5 to create my Web Scraper. Axios was a pretty standard setup, but challenges came with implementing parse5, and it came down to some reading of the docs and printing of the axios response to produce some functions to traverse the html.

From here, it was time to set up MongoDB which went pretty well, it was just about learning to how to save the data and query. For creating my schemas I was only going to need one called Archetypes which is what the strategies or deck types are called in Magic The Gathering. Originally for this schema, I started out with just storing the name, the format (a format is the style of Magic that is played in a competition, for example Vintage is a very old format where you can play cards all the way back to the 90s and Pioneer is a MTG format for more recent cards dating back to 2012), and a data array that saves a date, popularity statistic (meta), and price statistic. Later on, I added more vital variables to the schema and this taught me a lot about the importance of putting a good amount of time into planning out your schemas.

With all of this out of the way, I turned to the Frontend which came down to a lot of formatting of the pages and D3.js. The Frontend is the main part of this project that is still a work in progress, everything is graphing well with D3 and the buttons for each archetype are looking great (Figure 1), but currently making this Frontend pop is my big end goal, eventually looking to get to the design shown in Figure 2 with my buttons. Before I get into anything major with the Frontend I can do some tweaks to it and start hosting the site because everything is pretty much ready to go.

Figure 1:

List of the top Archetypes. This is shown after the user selects a Format, for example in this screenshot they chose Modern.

Figure 2:

When I came up for the idea for Iris, I was at a point where I had learned so much and I wanted to show off something that was unique, creative, and overall professional and polished. Essentially what Iris is, is (for Spotify users) it takes the songs you listen to most, extracts the most common colors from their album artwork, and visualizes all these colors into what is called an Iris. The Iris is an ever changing collection of all these colors, and its a beautiful way to show similarities and contrast with the album art of the music you love.

Figure 1:

The stack for this project includes Vue and Sass on the Frontend, and Golang with Spotify API and ImageMagick (for image analysis) on the Backend. For the Frontend, Vue is my favorite framework right now, and I want to continue to master it, and Sass was kind of a game time decision, it came in handy for randomizing my animations within the Iris. The Backend is pretty straight forward for using Spotify API and ImageMagick and I chose Golang since its the main Backend-centric language I have been trying to master recently.

For this project, I put a lot of work into the planning. I outlined the System Design, drew out Mock-Ups, and created a road map towards my goal. All of this work really paid off for my productivity and organization, it gave me the ability to code the Frontend Demo (Figure 1) very fast. Until I start working with the final repository for this project, I wanted to isolate the Front and Backend, I have not worked with a JAMstack for awhile so I wanted to go at this project thoroughly.

Moving forward since most of my Frontend Demo is finished I am going to start my work with the Backend very soon.