Recently, I created Study Spots. It's a tool providing a curated list of study spots, on- and off-campus, for students.

In this article, I reflect on the new technologies that I used during this coding adventure.

Svelte: A Better VueJS?

I'd heard about Svelte since my university days. Though, since I exclusively use VueJS at work, I never really bothered to explore it, until now.

Initially, the interface is remarkably similar to VueJS: especially with the addition of Runes for enhanced state and logic management in Svelte 5. However, SvelteKit (which isn't technically mandatory, but common), makes it so that your directory structure is reflected as paths in your web application. Each path has a +layout.svelte for configuration, and +page.svelte for the actual page contents.

Reading on Reddit, it seems that the purpose here is to forceably encourage the reuse of components without messing with routers. For a simple web application like mine, this difference was mostly inconsequential. I'll have to review this feature when I eventually use Svelte in a larger project.

One particular feature I liked quite a bit was the explicit logic syntax. Unlike VueJS with all the inlined v-for and v-if statements, Svelte takes a Jinja-ish approach with {#each} and {#if}. I found the latter helped me separate templating logic from content much easier.

More impressive was the {#await} block (which I don't believe there is an equivalent in VueJS). It essentially replaces vue-query and inlines the await-then-catch logic allowing you to easily display loading, error, and result content depending on the state of the asynchronous request. Having developed a lot of repetitive vue-query, this was a very welcome feature!

Simple Polished UI with ShadCN

For building the user interface, I was recommended ShadCN. It's best described as a hybrid approach to component libraires. It combines the strengths of a design system with the flexibility of custom-built components.

For you, this means it provides a set of pre-designed and functional UI components that can be locally installed within the project. Then, everything relating to those components are fully under your control and can be modified, styled, or extended as needed.

With this complete control, you'll never encounter the frustrations of something like Material UI that spams !important everywhere in their components. Since ShadCN's components are styled with TailwindCSS, styling becomes a cinch. (Utility-first approach to styling, FTW!)

As a bonus, all of ShadCN's components support auto-dark styles as well!

Maps and Tiles

We use map technologies quite extensively at work. It's helpful for providing coverage data on things like seeding, harvest, or tilling. Study spots was an opportunity for me to explore those technologies on my own from scratch.

How it Works

Essentially, you have your set of map tiles, and a map renderer.

Tiles are grid-based chunk information for elements such as rivers, buildings, and roads. These tiles are provided, usually at a cost, from a provider. Examples include Google Maps and MapTiler. For Study Spots, I chose MapTiler since it supports up to 200K requests per month, for free, and without needing credit card information.

Once you have your map tiles, you'll need a renderer like MapLibre. The renderer is what will perform the background requests to fetch tiles based on zoom and orientation, and provide interactivity. Svelte as a Wrapper for MapLibre] and, with the help of some useful examples online, I was able to rather quickly render my map and dynamically add markers for each study location.

Multilingual Support with ParaglideJS

For all my friends studying in Quebec, I wanted to ensure this project was accessible to them as well. So, for the internationalization (i18n) of my project, I opted for ParaglideJS rather than i18next (which is what I normally use at work).

All of the translations go in a messages/{lang}.json file. With Inlang's CLI, you can then machine translate to other languages and tweak the results as needed.

For it's tree-shakability, it's efficient. However, I don't think it scales particularly well for larger projects since all translations have to go into a single file: making it harder to know where they're being used. The SvelteJS subreddit mentions there are new features incoming to Paraglide that should remedy some of these concerns raised by the community/users.

I'll be keeping a close eye to their future developments.

Development Tools: To-The-Max!

While working on my Nix configuration, I frequently saw the use of Just in other people's repositories.

Just is a replacement task runner for the venerable GNU Make. It simply provides a more intuitive user interface for creating recipes. I mostly used it to shortcut the long commands I freqently used during development (e.g. adding new ShadCN components and perform translations with Inlang/ParaglideJS).

What's Ahead?

Likely, I'll be using Svelte in my future projects. I want to explore its capabilities and performance in more complicated applications.

In terms of Study Spots, I plan to share it on Univeristy subreddits and ask for contributions to create a more complete list of study spots on campus.

As always, a big thank you to the open-source community for making projects like these possible! ❤️