Gradeient
Inspiration
Around a year ago, a student at another high school in my district launched an app called Grademelon, an easy-to-use alternative to the clunky StudentVUE platform MCPS officially uses. GradeMelon had a lot of features many students actually needed, and that StudentVUE lacked, like the ability to input hypothetical grades to see how upcoming assignments might affect GPAs. Almost overnight, it spread like wildfire.
Unfortunately, a few months after its release Edupoint (the company that the district licenses StudentVUE from) made sweeping changes to their API, making Grademelon unusable. Seeing the void it left behind among my friends, and as a Grademelon user myself, I decided I'd like to try reverse-engineering the new StudentVUE API and developing a working alternative.
The reverse-engineering process
The first step of developing an app like this was the task of cracking the new StudentVUE API. The original system relied on the XML-based SOAP architecture, but after intercepting network traffic with BurpSuite, I discovered that the new API—what bricked GradeMelon—was REST-based.
This felt like a small victory, but I unfortunately spent the next week making virtually zero progress. Despite poring over every (and I mean every) intercepted packet for hours on end, I couldn't find my Holy Grail: a clean JSON payload containing grades and assignments. I was convinced a tidy JSON output had to exist, but it seems it didn’t. Bad news. That meant I’d have to resort to web scraping—parsing the raw HTML of the page itself.
Building the app + some thoughts
I designed the app in Figma and built it using SwiftUI and XCode. This was my first major SwiftUI (and iOS development) project, and I'm really, really, proud of how it turned out.
The screen on the left is the classes view, the first thing you see after logging in. It shows all your courses along with their letter grades, percentages, and a user-selected icon and color for each course.
Originally, I planned to automatically assign icons and colors to each class based on keywords—“Chemistry” would get a green beaker, “English” a red notebook, and so on. But I abandoned that idea pretty quickly after realizing how particular, and frankly, stubborn, people can be about their personal color-coding systems. Instead, each class has a small icon that will show a popup where users can select the icon and color to use for that particular class.
The screen on the right is the detail view for each class. It displays individual assignments and their grades, and allows you to click on an assignment to input your own hypothetical grade.
year
2024
tools/medium
Figma
SwiftUI
BurpSuite