You are browsing as a guest. Sign up (or log in) to start making projects!

4h 41m 27s logged

New Project!! :yayayayayayayayay:

I’ve wanted to build something like this for quite a while, but just didn’t know where to really start. But here we are!

I wanted to build a web app that helps with school- tracking classes, assignments, etc. This has shifted into being an app for college students, as, well, I graduated.

How to Begin

Beginning this project was a struggle. There’s so many features I want to add so I didn’t even know where to start. I decided to make a quick to-do list to lay everything I wanted out.

Then, I went for the database schema. This is already 10x more complex than my last project, Tungsten, but I decided upon the same stack for this project, as it’s self-hosted, just like Tungsten.

A philosophy I’ve been building with a lot recently is UI first, functionality later, which helped immensely with getting started. However, I need some data!

Well that’s easy. I can just use my college class roster! I already have my classes scheduled and can input them temporaily through another typescript file. (The image you see is NOT the same data. The example data file is gitignored.)

The UI

There’s a couple pieces right now. The “Your Day” section shows all your classes that day and (soon) to-do items.

The calendar shows all your classes for the week, as well as tasks and other events from Google Calendar (soon). This also syncs your classes and tasks back to Google Calendar as well.

The calendar component took a while to find. Originally, I was going to make my own, but as it turns out, that is really hard. Calendars are just really complex to build.
Luckily, I found a library called Full Calendar that does all the hard work. I styled it and made a function to convert my database schema to events, and voila!

The database

Speaking of database schemas… let’s talk about it!

Each user has “Terms”, which is how most colleges split up years. A term (or semester) is typically just one season with a start and end date. That’s how the databse does it too!

Each term has all the courses you’re taking in it. Each course has a name, number, and subject.

Here’s the tricky part: many courses in most colleges have different days and times they meet, sometimes with different professors or different locations.
The database tracks this too! There’s a table called meeting, which describes all the days for a specific meeting time, location, or professor. For example:

  • Class A meets on Tuesdays and Thursdays at 9:00am.
    • This class has one meeting in the db.
  • Class B meets on Mondays and Wednesdays at 1:00pm, but meets at 12:00pm on Fridays.
    • This class has two meetings: MW @ 1, F @ 12.

This works really well and translates to calendar events very nicely as well.

Up Next

The to-do list is next on the list! After that, I’ll work on the google calendar integration as well.

0
1

Comments 0

No comments yet. Be the first!