Studee.tv

the good, the bad and the ugly

You leave many unfinished projects to die, I know you do. And now that you cannot judge me so much, let me tell you how my dreams and aspirations perished for studee.tv. A web app where you would track your study time, and even hang out with your friends!

The time was a sunny month of June, 2023. Me, an almost graduated CS student full of innocence and life. Determined to build a complete project that could actually be used by people. So where do we start?

Well, you can't build a web app without something to build it with.
So the time to make decisions came, and if you know me, you'll know I hate unnecessary complexity or bloatedness. Therefore I threw away all the ideas of using any type of web framework like React or Angular (I even passed on tailwindcss), and decided to create a frontend with just the following tools:

Html
CSS
Javascript

Oh boy did that was annoying afterwards...

For the backend, you could say I took an even more unconventional route. I wanted to use Rust, which I started learning a bit earlier (the Rust book is amazing btw) both for serving the frontend, and to implement the backend logic. So after reading a bit about crates (Rust libraries) I choose the following stack:

Rust 🦀
Actix-web: Web framework to handle connections and routing.
Sqlx: Compiled-time checked queries without a DSL.
PostgreSQL: just a nice database 🐘.

Ready to go? Let's get building!

If you want people to use it, you might need to have users

In the beginning you should keep things as simple as possible, the whole move fast and break things stuff you know, the usual. In hindsight I probably should have started with the core functionality of the webapp, but... users it is.

And just like that, the fanciest login UI you will ever see was born.
To make it more than just a piece of art, I added a login functionality following (not fully) the RFC7617 publication. This coupled with a bit of http-only cookie magic (miss me with that XSS) and a hash table, made for the dream authentication system.

Forget about fancy Redis setups to scale up with multiple instances sharing the state. Choose a HashMap, that's the way to go, trust me okay?

Designing is a job for a reason

Can I be honest with you for a second? I'm not a natural at designing. I never have been and I've never pretended to be. So bare with me through this, I promise that when we get to the refactor part it gets better.

It's a start.

Looking at the 3rd picture you may have realized (if you have great eyesight) that we are already tracking the total time studied. This is going great!

Now let's focus on, well... being able to track your study time?

Okay, I said I'm not a natural.

The clock works more or less decently, we are not just relying on setTimeout() to make the time increment. When the timer for setTimeout() finishes, the instruction is placed on a queue and will run on the next opportunity, not immediately. So to make an accurate timer avoiding drift from CPU hogging, we account for said drift measuring the offset of the actual time waited vs the expected one, and substract that from the next setTimeout call.

What's the use of the big white rectangle (3rd picture) you ask? Well, studee.tv won't just track the total amount of time you've spent working or studying. It will allow you to write down your tasks and select them when you're studying, that way you can know on what you're spending your time on.

Now with our amazing progress in the studying UI, the profile page seems a bit underwhelming right?
We can go ahead and add a modern and luxurious design to improve the UX, and even start sketching the welcome page for the webapp.

You remember we did the users earlier right? But you may have noticed that on the 2nd image, the login button says Google Login. Well... after thinking a bit about the complexity of handling account creation while trying to avoid spam and other issues, OAuth came to mind. We could unburden the user from creating yet another account, and simplify our account creation process, that's a win-win in my book.
So OAuth it is then. But we're not going to use a crate for it, of course not, that is for the weak. If I'm going to use OAuth I want to really understand the process, so I created a repo where I did just that. And after understanding it a bit better, setting it up on studee.tv was trivial.

To be honest, although you may not agree with me, the profile page seems a little bit empty. It would be cool to also see the user's study activity over a week or something right? (foreshadowing)

The 3rd one looks decent, you have to admit that (the bottom part 😁).

Now let's focus on getting those pesky tasks working won't we? This is the moment where I really hated myself for not using a framework like React. Making the dynamic element creation with just javascript and CSS wasn't the cleanest thing I've ever done, but it ended up working just fine, so there you have it.

Good artists copy, great artists steal

We track time, and we can determine where we spend our time, but how can we make the user want to keep a streak? How can we make it enjoyable to look at the work you have done over a long period of time?
Well, if you're a seasoned programmer, you probably know the feeling of having a GitHub contribution streak, all those green squares of happiness... just the best.
So of course we went ahead and took "great inspiration" to design our own version.

Now that we are talking about taking inspiration, do you know another great advantage of using a framework like tailwindcss? The many well design examples you can take inspiration from...
So after reaching this point, and realizing that I'm just not going to be the next Jony Ive, I decided to succumb to the possibilities that tailiwndcss offers, and just like that, the refactor began.
I'm not going to bother you with the details, so here you have the renewed studee UI.

Better right? I know, that's what "inspiration" gets you.

Oh yeah, I also visited pexels to make a fancier welcome page using some of their amazing free photos. Let me show you the end result and current state of studee.tv:

Not every story has a happy ending

Maybe during this blog post you were curious to see if www.studee.tv was up and running with the app that I have been telling you about, and sadly although at times it has been, currently it is not.

To put it simply, I don't want to keep published a non-finished project. And to be completely honest with you, if I were to publish this I think I would refactor the whole thing.
It was really fun to just run at the problem without any external help. You get to dive into the core problems with your own perspective and see why some solutions are being used.
It's been a while since I don't touch studee and I'm not planning on working on it any time soon. I'm currently working on other projects that maybe will appear around here in the future. Having said that, I felt that writing down the story (although I skipped quite a bit) would be a cool thing to look back at in the future.

Hope you enjoyed it!

- Alex