The Spreadsheet

Back in 2015, a Spreadsheet was created. This Spreadsheet served as a starting point in thinking through Universities, comparing different Universities against each other. This Spreadsheet was called the College Selector. It contained 5 main tabs: Basic Information, Academic Life, Real Life, Financial, and Analysis. The Basic Information tab required the user to enter the basic information (name, abbreviation, preference, notes, and whether a visit was made) about the University. This information was then passed into the other tabs. On the next tab, the user would rate each question from 1-10 about the Academic life of the University. The purpose was to see how the user saw each University from the lens of their academic life. For example, from 1-10, how does the user view the school’s ranking or how does the program match them? Is it a good match for them or a bad match. The user would answer these questions by rating them from 1-10. In the following tab, the University’s “real life” was rated. These questions revolved around day-to-day life questions. For example, from 1-10, rate the University’s dorm life or rate the school size. These questions were naturally subjective, but that was the point. The spreadsheet was designed to ask the user to rate different aspects of University life at that University, in order to evaluate how they really felt about the University. The next tab was about the financial information. These questions revolved around the tuition, insurance fees, and other fees. Additionally, scholarship and financial aid was also included to help show the full net cost of attending each University. The final tab served as a comparison, with a simple graph where the size of the dot was relative to how expensive attending the University was. The x-axis served as the academic life average rating and the y-axis served as the real life average rating. The larger the bubble, the more expensive. The further to the right, the better the academic life was seen to be. The higher up on the y-axis, the better the real-life was seen to be. This graph was there to show how the user was thinking of each University.

While this spreadsheet was great, there was a desire to convert it into a Mobile Application. The requirement to have Microsoft Excel was seen as a limitation and a push towards developing a Mobile Application for iOS and Android started.

The Applications

Starting in 2016, a beginning push towards learning Mobile App Development started. Notice I said “applications”, meaning there were more than one. Well, this was because I had just started learning to code at this point. I didn’t know what I was doing, nor did I know how to develop functional code, let alone a product. So, I effectively had 3 different attempts, before I settled on the final version.

The first app was purely a Swift application, targeted for iOS. I didn’t know how to maintain the data and this started as just a form. I quickly realized this wouldn’t work and abandoned this approach.

The second app was another purely Swift application, still targeted for iOS. This time, I added Core Data to store information for the application itself. However, I still didn’t know what I was doing and solely stored the data from the form. This still wasn’t enough. So I dropped this approach.

The third version wasn’t an application. It was a Java program built for a Computer Science course while I was in High School. It was purely a Command Line Application and allowed the user to keep track of their information, but without analysis.

In the summer of 2017, I finally sat down and learned about different technologies surrounding Mobile Application development. I learned about React Native, NativeScript, Cordova, and other Cross Platform systems. I decided to learn React Native using a Udemy Course.

The Final Mobile Application

This Udemy Course became the backbone for the application. I went through the course and realized it gave me really good code to model off the final product. So, from there, I created the College Selector. At first, the design was simple, but functional. Users were able to create a University and see the University scores side by side. While this was good enough, I felt that it should’ve been more and could do more. So, at one point, I redesigned the User Interface, converting it from a simple white background with black text to using a Blue-Purple gradient. While this was fine, I felt that the app wasn’t enough. However, my life was getting busy and paying $100 a year to Apple for an app to sit on the app store, needing to add updates from time to time, felt more like a chore than an enjoyment. So with that, after 3 years on the App Store, I pulled the app off.

Leaving Mobile, Joining Web

At this point, I was becoming more of a web developer. I knew React well enough and started looking at redesigning the project as a web application. This way, the hosting fees could hypothetically be less. I was using Firebase as my previous database, but that was because the course I’d taken used Firebase. It wasn’t a good enough justification. Additionally, I was using the older version of their Database, before it even became Cloud Firestore. At the time, it was a simple NoSQL database which could manage the data I was storing. Authentication was also handled through Firebase. However, as I kept going deeper in my Computer Science degree and growing as a developer, I started working with Supabase. An open-sourced equivalent to Firebase, providing a PostgreSQL database, authentication, and even an S3 Compatible storage provider. From here, I knew I would pivot to Supabase and use their services as my backend. As I spent more time writing React code, I ended up learning about NextJS and the benefits of Server Side Rendering.

The First NextJS attempt and the birth of the College Companion

With that, I started developing the first iteration of the NextJS revival. I knew I wanted to add more features than just the College Selector. After all, the College Selector is a great feature, but as an entire product, it had a functional lifespan of a year or two. I knew I had to add more, so I started planning out more features. Thus, the College Companion was born. With the College Companion, features would get split into two categories: Pre-College and College. The Pre-College would include the College Selector as a feature. It would also include other features such as a Acceptance Likelihood calculator and Tour Questions. These were features in different parts of the College Selector, but finally merged into the Pre-College set of features for the College Companion. The College features would consist of a GPA Calculator and a Four Year Plan. These were helpful for me as a student in University, so I wanted to add them as a helpful tool for others. With that, I knew my feature set, so I started working on it in NextJS.

NextJS was great at the time. It connected with Supabase in a really streamline way. I was able to implement Authentication easily, thanks to the documentation from Supabase with NextJS. Creating the database and implementing the College Selector was also easy in NextJS. The challenge was understanding the Server side versus Client side code. At the time, I was only writing plain React code, so the mental shift to requiring "use client" was an adjustment. However, I was able to get the College Selector features up pretty quickly. I then converted the Acceptance Probability from the original College Selector website into the NextJS form. This took some time to adjust the logic to work with a more React way of thinking, and less of a JavaScript DOM Manipulation way (as was the original implementation). The Tour questions were a plain page that simply had a number of possible questions to ask while on a College tour, so that was quick to implement. Then I hit a wall.

I knew I wanted to implement the Four Year Plan and GPA Calculator, but I wasn’t sure about the database and how much data to store. I also got stuck thinking about the interface for both. Ultimately, this paused this attempt for some time. My life got busy with my Graduate teaching program and then with teaching at the University. I didn’t have enough time to really build it. So I suspended the project in 2024.

The Second NextJS attempt

Jumping a year later, I wanted to tackle the project again. I sat down and started redesigning the College Companion properly in Figma. Additionally, the older project was using NextJS version 13. We were now on NextJS version 16. I had been writing code on the side with the version before this (15). There were already sizable changes between 13 and 15, so I knew 13 and 16 would be even more. Mainly, this was the transition between the page router and the app router. So, I knew there’s be a lot of code to update. Instead of spending hours refactoring, I decided to go the (perhaps) less logical route and decided to restart the project again. This time, I would spend time redesigning the project properly, using that design as a guide, and implementing the code. I knew I could already write a functional version of the College Selector without needing too much time, since I’d already done it once. At this point, I’d also improved on my programming and knew more in general. So, I spent a few days redesigning the interface, in between other projects.

Eventually, I got the main starting pages down and started implementing it in NextJS again. I restarted the project with a new repository and started working again. Like last time, I started with the authentication and the landing page. Once those were done, I started looking at building the Pre College features again. Until I burnt out.

It wasn’t a long attempt, but I’d been juggling too much up til then and I thought I could have this project be a fun side project. However, I burnt out and I just couldn’t do it. So, with that short-lived attempt, it was suspended again.

The New and Final Architecture

Jump another year later. It’s 2026, I have a better grasp of what I’m doing. I’ve been teaching at the University for two years and entered my third year. I was more experienced and knew what to expect, even if I was teaching different classes every other semester. My experience in programming had grown along side my teaching and course development experience. With this, I decided to re-evaluate the College Companion and see if the technology I was using was right. I had started exploring other JavaScript frameworks. I knew about Vue from a prior project and had been watching how Nuxt was developing. I’d heard about Astro and how it was great for static pages (this blog is written with Astro). I’d heard about Svelte and how it was great for reactivity, with smaller packages, compiled, and less overhead. It was true about “Every week, a new JavaScript framework is born”. I wanted to explore using a different one rather than purely sticking to React for everything.

So, after sitting and looking at some framework comparisons, I decided to go with Svelte and their full-stack SvelteKit. It was quick to get started and with their project organization, it felt a lot simpler to work with. Having reactivity handled so easily was a huge draw for me. Lastly, with the smaller package and great performance, it felt like the right choice.

With this, I rebuilt College Companion with SvelteKit and Supabase. It was simpler without having to worry about state and managing the React overhead. Additionally, it helped me learn another framework that felt simpler to work with. As an educator, it also felt like a framework that I’m open to teaching without having to spend a ton of time teaching React fundamentals.

But that’s beside the point, re-coding the project in Svelte was simpler. While the files were longer as they contained TypeScript code, CSS styles, and HTML code, it felt easier to manage. It was also refreshing writing vanilla HTML at times, just adding Svelte concepts in, like runes to handle the state updates. It also felt less bloated, not needing to use a form of getters and setters for state variables. While there was a brief learning period around how they handle state, it felt simpler to understand. Pulling data or sending data from a +page.server.ts, stored in the same directory, and naturally called by the +page.svelte, with computed properties from $props() felt so much easier than having to manage a separate api folder with the routes stored there. Additionally, it just felt easier than managing a lot of useState or useEffect. While those were still used within Svelte, it felt simpler. As a side note, I’m also aware that overly using useEffect isn’t ideal either.

Anyway, rebuilding the project with SvelteKit took some time still, but it was easier with less mental load than doing so in NextJS. Authentication was still easy, just as it was before, as Supabase gives fantastic documentation. The rest was also quite straightforward, especially with retrieving and sending data using the server files.

The Final Features

The Newest and Final version of the College Companion contains new features. In order to fully model the whole journey from applying, to attending University, to graduating University, tools were created. The pre-college, college split from before persists.

Pre-College features include: College Selector, Application Tracker, Campus Tours Questions, Acceptance Probability, Application Checklist, and three Pro features (Program Checklists, Application Timeline, Interview Preparation).

College Selector remains the same as before, with questions to quantify opinionated views about different aspects of University life. Universities are ranked by the User by rating different questions from 1-10. Academic life, Campus life, and financial costs are all rated. These Universities can be compared by their average scores by the groupings. They can also be compared on a Radar Chart to see how each rating compared to another University (comparing up to 6). Users can add 2 custom questions that can also be rated from 1-10 and compared. Pro users gain some additional features. Pro users are able to add up to 5 custom questions. Additionally, they can add custom weightings to the questions, to demonstrate the importance of that question. Lastly, they are able to add Program Specific questions through a Target Program selector. This is useful for those in specific programs that may have different needs than a general University major.

Application Tracker is a new feature. It helps the user keep track of the state of their applications. A University can be one of these states: Applying, Applied, Accepted, Waitlisted, or Rejected. Users can view the number of Universities in each state at the top. They can also drag-and-drop Universities between different states. This serves as a visual to showcase where each application is at. The Universities come from the College Selector.

Campus Tour Questions models the feature from before, but now with actual question tracking. These questions also can be general, or paired to a specific University. These Universities come from the College Selector. Users are provided with some example questions and importance. Users can also add their own custom questions. Once they have an answer, they can add an answer and check it off.

Acceptance Probability comes from the feature from before, but with new changes too! Instead of using the Acceptance rates from each University and finding the percentage chance of attending one, at least one, and none. The new feature computes based on the importance stated in the College Selector with certain application based factors (namely school selectivity). Users can enter their GPA, SAT, ACT, and other factors to see how that impacts their probability to attending each University. These are not proven probabilities and only serve as some insight with how their odds change based on different factors. Just like the other Pre-college features, Universities here are pulled from the College Selector.

Application Checklist is another newer feature, which simply helps the user keep track of what they need to do to Apply to a university. It uses the Universities from the College Selector and helps the user keep track of what they might need, as they apply. Example questions are provided. Similar to the Campus Tour Questions, users can also input their own tasks.

Program Checklist is a pro feature meant for users attending specific programs. These programs currently are: Nursing, Business, Law, Architecture, Teaching, Medicine (Pre-Med), Engineering, and Pharmacy. It works similarly to the Application Checklist, but this is more specific to the program.

Application Timeline is another pro feature. It requires the user to enter what date they plan to apply by, or what their deadline for their application. It then backtracks and provides a timeline for general application tasks.

Interview Prep is the last Pre-College feature. It is also a Pro feature. It serves as a tool for those applying to Private Universities that may require an interview.

After the Pre-College features, there’s a simple Calendar to keep track of dates for events.

Now, the College Features have a lot more features compared to before. The features include: Four-Year Plan, GPA Calculator, Credit Progress, Assignment Tracker, Budget Tracker, Schedule, and 5 Pro Features in Grade Predictor, Internship & Experience Tracker, Networking & Contacts, Career Roadmap, and Resume Generator.

Four-Year Plan was a feature I used a lot in my Undergraduate years. It was also a feature from the first NextJS iteration. The idea is to model out the courses the user plans to take. The user can create different plans with different programs. The program adapts the number of years based on the type of program, using the normal amount of time it takes to complete. These courses are then used in the GPA Calculator and Credit Progress too. The user can then mark the courses they’ve taken and the grades they’ve received.

GPA Calculator was also a feature I used in my Undergraduate years. Just as the Four-Year plan was a feature from the first NextJS iteration, GPA Calculator was also a feature from then. Users can see what their GPA could be based on their courses, including adding “what-if” courses and “what-if” grades, showing how their GPA is impacted by those grades. This helps those who need to maintain a GPA or are simply curious or aiming for a specific GPA.

Credit Progress is a new feature, helping the user keep track of how many credits they’ve taken and how many they need to take still. It also informs the user if they will have a Light, Moderate, or Heavy semester based on the credit loads per semester.

Assignment Tracker helps the user keep track of assignments and how it impacts their grade. The user is tasked with inputting the assignment weights and the grade. Using this with the GPA Calculator can help the user gain better insights on their grades throughout the course of their college journey.

Budget Tracker is a tool useful for all College students, as they learn how to manage their own budgets. The user can enter their income and their expenses, seeing how they impact their balance monthly, yearly, or all-time.

Schedule is the last feature for free users. It was a planned feature from before, but I didn’t get to it until now. The Schedule helps users view their schedule for the semester, along with conflicts that may arise as they input their courses and course times.

Grade Predictor is the first pro feature from the College section. This feature requires the user to enter the courses they are taking. The user can then input grade categories and their weightings. They must then input what percentage they’ve earned out of the total number of points for that assignment. This will then reflect their best possible grade and their current grade. The current grade is based on what has been entered, while the Best possible is based on what their grade could look like if the user earns 100% on everything else. Lastly, it also shows what the user needs to earn in everything to earn their target grade.

Internship Tracker is another pro feature that helps the user keep track of their internships, research experience, job experiences, volunteer experiences, and other work based experiences. It’s also the main data used for the Resume Generator later.

Networking & Contacts is a pro feature meant to help the user keep track of who they’ve met throughout their time in University and some contacts. The user can export these to a VCF file.

Career Roadmap is a pro feature that helps the user map out their career, including where they want to be and by when. This can also be linked to their Work Experiences through the Internship Tracker. Ideally, this is a tool to visualize career goals.

Resume Generator is the last pro feature. Users can create their resume through this feature. It doesn’t save their information. It pulls information from the Internship Tracker and uses it in the Experience group. In keeping with our Privacy Policy and not storing other personally identifiable information outside of the user’s email and their display name, information in the resume is not saved to our Database. Instead, the user can export the json file and import it again later to re-populate the form.

These are all of the primary features of the new and updated College Companion. There is a Dashboard that shows basic information about the user. The user has a profile, but it shows basic information too. The profile allows the user to download their data and delete their account.