How I ended up building my University’s Schedule

In December 2021, I participated in a university-wide contest to build a web schedule for my university. I barely knew React at the time (especially the whole class-based thing, which felt... ancient), so I picked Svelte. It just clicked - less boilerplate, rapid prototyping, and a more enjoyable development process.

First Impressions & Design Choices

During the initial video call with the contest organizers, someone casually said they liked iOS-style designs. That stuck with me. I have a strong preference for clean UIs anyway, so I figured I'd lean into that look hard.

I started by researching other schedule websites from local unis and schools. Honestly? Most of them were a pain to use. Cluttered layouts, weird navigation, no mobile support. Just bad UX everywhere.

While digging around, I opened the Apple Calendar app for inspiration - and boom, that was it. The weekly layout was exactly what I wanted. My entire week table ended up being styled after it.

It's important to note that I didn't just copy the design. I took the core principles of simplicity, clarity, and usability, and applied them to my own schedule app. The overall look and feel has evolved since then, but the foundation was set

Going Full Frontend

What really set my project apart was the approach. Most other contestants had some half-working backend or just hardcoded the data. I didn’t want any of that.

Instead, I built the entire thing as a 100% frontend app that:

1. Pulled data directly from a Google Sheet
2. Parsed a super messy spreadsheet format into usable data
3. Dynamically figured out how many student groups there were that week
4. Mapped each cell to the right spot in the schedule

I wrote a custom parser that treated every cell like a little puzzle. The spreadsheet format wasn’t designed for machines, so I had to get clever with regexes and dynamic row/column mapping.

export async function loadTable(selectedFaculty) {
  const spreadSheet = await getSheet(selectedFaculty)

  if (!spreadSheet) return

  const sheets = spreadSheet.sheets
    .filter((sheet) => !sheet.properties.hidden)
    .map((sheet, index) => ({
      id: index,
      sheet: sheet,
      name: sheet.properties.title,
      // take all of the columns, remove the first 3 (time, date, day)
      // and divide by the width of a group (originally 3 columns)
      groups: Math.floor(
        (sheet.properties.gridProperties.columnCount - 3) / GROUP_WIDTH
      ),
    }))

  return sheets
}

Quality-of-Life Stuff

Besides the schedule itself, I added a simple top menu with quick links to:

• Student chats
• FAQ page
• Key-worthy pages
• Official resources

And of course, everything was responsive. I tested on phones, tablets, desktops. This was to ensure students could check their schedules anywhere, anytime.

By the end of the contest, I was the only one with a fully working app. All the required features were there. The judges especially liked how clean it looked and how tightly it integrated with the existing schedule system.

They picked my project as the winner, and a bit later it was officially deployed for the whole university.

After Launch: New Features & Real Users

Once the app was live, I kept maintaining it during my studies. I pushed out updates based on student feedback:

• Dark mode option for late-night schedule checks
• Screenshot tool so students could quickly share or save their weekly plan

What I Learned

This project was a huge learning experience for me. It taught me valuable skills in:

• Frontend architecture (Svelte was a joy to use)
• API integrations (Google Sheets API is quirky but powerful)
• Handling real-world messy data
• Designing UIs that actually solve user pain points

And more importantly, it was useful. Students use it every day. It wasn’t just another school assignment or a side project that sat on GitHub collecting dust. It was an essential tool that made life easier for everyone at the university.