Awesome_E An app to see everything UCI – all in one place.
During my first quarter at UCI, I found myself frequently exploring the ins and outs of campus. Needed lunch? Sure, check the Dining Hall website. Wanted to see when the next bus to the rec center would arrive? There’s an app for that! During my first year, it was nice knowing that resources existed to help me get around campus.
But as the year moved on, it became repetitive to open these pages on a daily basis and jump between them (as these were a part of my routine). I knew that the experience would be a lot better if they were all together... all in one app.
From there, I decided to create my own single-page app. At first, I wrote a quick backend route that would fetch the current day’s dining hall menus It reduced the time it took for me to view the menus from 2 minutes to 20 seconds, and I called it a day.
Comparison between UCI’s Dining Menu Page (left) vs Ant Atlas (right)
Then, I started using the campus shuttle (Anteater Express) more often. I thought it would be nice to have the data in the same place and for it to take less clicks to get the same information, so I created another page with the same layout and linked them to each other.
Comparison between UCI’s Shuttle Tracker (left) vs Ant Atlas (right)
When consolidating the information I use on a daily basis, I developed Ant Atlas with two main qualities. First, it’s quickly accessible so you can easily check it between two meetings or classes. Second, it has a super-focus on simplicity so that critical information is up front and center. In fact, all non-essential information is omitted (take only what you need)!
One click is all it takes to preview your booking... all without switching apps.
As I saw the need for more quick information at a glance, I knew this was a stepping stone for me – it was an opportunity for me to change how Ant Atlas was written, but it also led me to look for teams at UCI who wanted to make a positive impact on other students.
Because this app started as a page to simply call an API and render its response nicely, I used vanilla HTML, CSS, and JavaScript. But as I added pages for Class Enrollment Capacity and Available Study Spaces, I rewrote the app in React using TypeScript so it would be easier to maintain. Since Ant Atlas is a relatively simple app, rewriting it provided me with a sandbox to learn more about React and taught me how to write the same functionality more efficiently.
My desire to help other students then led me to the ICS Student Council’s Projects Committee, where I joined the PeterPortal team. The foundations I created through Ant Atlas allowed me to more effectively work on large-scale React projects and spend my time creating useful features instead of learning the tech stack. After two short quarters, I became the lead of PeterPortal, giving me the opportunity to lead its development and mentor new members as they familiarize themselves with the same skills that I had once learned.