IM BACK!!!

SUPER exciting updates today!!! I just got back from vacation and I have motivation!!

LOGO!!!!

Neptune has a logo!!! I think it looks really good, I whipped it up in Inkscape in like 20 minutes. You wouldn’t believe what it’s supposed to be!

Self hosting!!!

This was supoer easy. Since this uses the same stack as Tungsten (which you should totally go check out also), I was able to copy over the dockerfile and docker-compose with minimal changes. However….

Timezone issues!!! Wait….

Yep. There are a lot of edge cases I didn’t think of. As soon as the server and client’s timezones are different, things get stupid. Javascript dates are genuinely one of the worst things I have ever used, I’d even go as far as to say it’s worse than java as a language.

Both the ICS calendar import and export, as well as the course times were incorrect by +/- 6 hours (I am in UTC-6, so that explains it)

I spent way, WAY longer than I should’ve trying to fix this. It ended up taking like 2 different changes that affected the database as well. Usually I try to make my git commits clean and well-described, but that didn’t last very long here…

The best part: it still doesn’t work properly! I don’t know why, but the ICS viewer I’ve been using to test reads the file differently than Google Calendar, which thinks my 10am class is at 4am. Not to mention, Google Calendar only updates your subscribed calendars once every like 6 hours!! So every time I make a change to (hopefully) fix it, I have to wait.

Devlog Meta Section

Unfortunately I don’t have much else to show for this update… that was all I worked on for 2 hours. I know. Anyway, I hope to add some more real features very soon!

Course colors, Course/meeting editing, and more timezone bugs!!

Wow! A devlog of reasonable length! Surely that means it will be shorter right?
Kinda, I added a lot of things but it was pretty easy!

Calendar colors 🎨

This one was really easy to implement, as the calendar component allows you to specify a border/background color. All I needed to do was add it to the creation modal and boom! I stole the color picker from Filatrack as it’s a good component and I don’t see a reason to make a new one

Unfortunately, these colors will not show up in the iCal subscription as iCal doesn’t support colors.

Course card view modes

The “Today” card at the top can now show you tomorrow and all courses! Once again, super easy to implement, literally just another state and changing what courses are grabbed based on that state.

I also fixed a glaring bug where you’d see courses from every term. I’m not sure how I didn’t consider this, but now you’ll only see courses for the current term!

Editing courses/meetings

This one got a little tricky. The modal is already designed to be used for creation and editing, I just had to implement the latter.

Editing courses is no big deal, however; it just changes what function it uses. Its editing meetings that’s a little tricky. You have to make a separate request to edit the meetings that are in the db, create ones that you’ve added, and delete ones you’ve removed. It ended up being relatively simple, but there’s a couple edge cases that could snag ya.

Timezone bugs

I don’t even know how this one happened. I looked at the calendar when I was working on other things and suddenly realized all my courses were 6 hours ahead of where they should be. iCal events worked fine. I didn’t even change anything in this area so I just subtracted the timezone offset when getting the events for the calendar and called it a day.

What’s Next?

I totally lied last time, so this time I’ll be honest: whatever I feel like doing. See ya next time!

Tasks! Confetti! Colors!! Terms CRUD!!!!

I’ve added all sorts of things since last update. Colors for courses,
task CRUD, basic CRUD for terms, confetti, and so many bug fixes!!

Tasks ✅

CRUD is never that hard to implement with this stack, but with tasks,
the UI is more of a beast to handle. I wanted it to be more inline then
creating courses, for example. We’ve already seen the C in CRUD from
last devlog, so here’s the RUD!

Everything is handled in a popover rather than a dialog, as it’s a lot
cleaner, and for quickly clicking through tasks, a lot easier.
Unfortunately, the code is a little messy here as I copied basically the
same thing like 3 times. I will probably fix this later?

Anyway, pressing “edit” in the popover allows you to edit the title (and
thus the due date, priority, URL, and course), as well as the URL in a
separate input and a note for the task, which couldn’t be auto-filled
from the title bar. How I’ve made it, these two inputs are handled
separately from the rest of the task editing, and when you finish
editing it, it sends two requests to edit the task: one for the URL and
note, and one for everything else. This led to a race condition, only on
the client side, that would cause the URL and note request to override
the other one, reverting to the previous state. This was an easy fix
however, just allowing the dispatch function to edit things with a
partial object instead of requiring the full one.

Confetti

Completing tasks rewards you with confetti! Super simple to implement
with the react-confetti library, but it ended up being a little stupid
to manage the state properly so it only went off when you clicked.

Terms

Terms CRUD was simple, however. Since there’s so little to them already,
it was simple to make a spot to edit and delete them. I decided to put
it in the settings page as that’s the most convenient spot.

Bug fixes

Other than the ones mentioned above, here are some more bugs I fixed:

• Terms not starting/ending at 12:00am
• in _ (time unit) matcher used current time instead of 11:59pm
• Task sorting was wrong
• Term popover could clip out of the screen on smaller devices
• Term timezone issues

Next

I’ve got a huge list still. Here’s a non-exhaustive one:

• More due date matchers (day-of-week, month names)
• Study tools, such as a pomodoro timer and flashcards
• Making the whole website a PWA, including notifications

I’m not excited about the latter or the former, but the 2nd one I think
I’ll do next, just because it sounds fun to make.

I spent way too long implementing these features

I couldn’t tell you what’s taking so much longer compared to Tungsten, but things are getting done!

To-do creation

I made a basic flow for creating to-do items (it doesn’t create them yet, I got an optical migraine and had to take a nap), but it has some really cool features!

When you create one, all you get is one input as to not clutter things up. What’s cool is you can input a bunch of different things to auto-set some values!

There’s 4 different matchers for due dates, that match the following (parenthesis are optional fields):

• “Tomorrow ((at) time)”
• “(in) [time] [units] (ago)”
• “MM/DD(/YYYY) (time)”
• “HH(:MM)(am/pm)”
  For the ones where time is optional, it defaults to 11:59pm.

This is a heavy oversimplification as the regex selectors are super long and complicated. Weirdly enough, I kind of enjoy writing regex? It’s a fun problem solving problem.

You can also auto-fill associated course, priority, and a URL! To associate a course, you simply type “SUB123”, with your courses subject and number, and it will find it for you. Priority is simply “!X”, where X is the priority of this task. It goes all the way to 99 if it’s that important!

Meeting Exclusions

Buzzword buzzword. You can now remove specific events from the calendar, like if there isn’t class that day. This took way longer than it should’ve to implement, as FullCalendar is stupid and doesn’t implement exclusion dates in their recurrence implementation, only through RRule. That took some wrangling cause the docs on it are a little stupid, and the library threw some stupid errors but it works now. There’s a new column in the database to store these as well.

Timezone Issues

I hate javascript dates. I hate javascript dates. I hate javascript dates. I hate javascript dates. I hate javascript dates. I hate javascript dates. I hate javascript dates. I hate javascript dates.

Somehow, it is simultaneously the most overengineered piece of garbage ever and the least developed part of the language. Many basic features are a complete afterthought, and most of the time, you’re having to some stupid crap just to add time onto a date.

Anyway, after I implemented meeting exclusions, I suddenly noticed the one 10am class I had in the calendar was now at 4am… yeah. You wouldn’t believe what my timezone offset is. -6.

Sooo I fought that for a while, and as it turns out, FullCalendar tries to help, but really fails miraculously and makes things worse. For example, it “accounted for daylight savings” by moving events back an hour after it ended. That made me very glad that’s not actually how the world works, but it had me questioning it for a second.

What’s next???

I’m tired. I don’t know, whatever I get around to implementing tomorrow. Good night!

I FORGOT TO DEVLOG

I added like 10 million things, I went on tangents that took forever, I forgot to make git commits, I forgot to devlog

Calendar Syncing

I’ve really wanted to experiment with this for a while. The in-app calendar can now fetch events from any ICS URL!! It simply fetches the URL you give it, and displays those events alongside your courses. I made them green for now, but they’ll be configurable later!

Additionally, the app exposes an API route that generates an ICS file for all your courses! This way you can easily export your course calendar to other sources like Google Calendar, so you don’t have to input them manually!

This took WAY longer than it should’ve, as I was using a website to view the result of the ICS file, and I couldn’t get recurring events to, y’know, recur. I then realized that this was a problem with the viewer I was using, and not my code. I plugged in the URL to the calendar component I’m using and it worked just fine.

To-do list

I did some work on the to-do lists. Primarily, just displaying them and showing relative due dates. They can each have priority, an attached course, an extra description, etc. I’ll be creating the creation flow for them soon as well.

Course Creation Flow

Speaking of creation flows… the one for courses is mostly done! I just have to make it so you can add and select terms. I spent a lot of time getting this one right, as I wanted it to be a smooth, easy experience. I think I nailed it, but let me know how I did!

Next

That’s about all I did this devlog, alongside a million tiny bug fixes. Up next will be finishing the to-do list, that is, if I don’t get distracted.

New Project!!

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.