Free

Link shortener with Sveltekit, Supabase, and Sass

Solution for Link shortener app

Hunter Becton

Hunter Becton

Link shortener with Sveltekit, Supabase, and Sass

SvelteKit

Sass

Supabase

Notes

What did you learn while working on this solution?

I learned more about the new features coming to Svelte 5, most notably runes. There are still a lot of runes I have yet to use, including the $effect rune.

What would you do differently if you had to solve this challenge again, and why?

I wasn't sure how to handle styling the input and button components. At first, I created one component for the text and button components. However, I couldn't rely on media queries to make the component responsive because the responsiveness of each component was different on the login page and homepage.

I thought about using JavaScript to render the styles conditionally but finally opted to create two separate components. I'm unsure if this is the best approach because I'm repeating code and have more components to maintain. Still, I like that it uses CSS media queries for responsiveness instead of JavaScript.

Did you try any new approaches or technologies in this challenge? What was that experience like?

When I built my Sveltekit app, I opted into the Svelte 5 preview. It was my first time using Svelte 5, and the new changes with runes are really exciting!