DEV Community

Cover image for Yo.link - A human friendly URL Shortener
Tim
Tim

Posted on

Yo.link - A human friendly URL Shortener

For a while now I had the domain yo.link sitting around, and I was wondering what to do with it.

I needed a project that is simple enough to do in couple of weekends, and would also allow me to try out some of the modern tech-stack, that is SvelteKit, Auth.js, Prisma, PostgreSQL and Redis, all running on Vercel.

Since yo.link is pretty short and sounds like "your link", implementing yet another URL shortening service was an obvious choice, but this time with a twist.

Instead of putting the short-code in the URL path after the / (like https://bit.ly/3JkVCZ0), we will put it in the subdomain part of the link, and let users choose what they want to put there (hn.yo.link -> https://news.ycombinator.com/).

The motivation here is to create short links that are human friendly, and do not contain cryptic short-codes. Also, subdomain is the first think visitors read in a link, so nice descriptive subdomain names will help users click.

The Objective

The goal is to allow users to login into the system, choose a subdomain that they like and choose a destination URL.
They can share the short yo link and will collect stats, on the number of clicks, broken down by hour/day/month, geo country/city, as well as browser type and type of operating system of the user.

QR codes are also generated if you need to share those.

Image description

Image description

Image description

Implementation

SvelteKit was an obvious choice for me, since it can solve all the project needs in one go.
It supports hooks (aka, middleware) which can intercept every request, and if it is a request to subdomain, we can lookup in the db if we have an associated link, and redirect to the destination if needed.

Auth.js integrates nicely with SvelteKit and that what was used for authenticating users using GitHub, Twitter, Google and email magic link login.

Prisma+Postgres was used as "master" database, to store the link associations and the users.

Redis was used for counting stats realtime, every time a click happens, we increment a bunch of counters, which is pretty fast.

Vercel was used for deployment, since they provide out of the box wildcard subdomain HTTPS certificates, can host SvelteKit project natively, and havfe offering for both PostgreSQL and Redis.

Feedback

Any feedback you might have on this side project is very welcome. Thank you

Top comments (0)