Akash Dev Blog

Introducing ShortL

Introducing ShortL

How I built a URL Shortening app

Akash Doppalapudi's photo
Akash Doppalapudi
·

3 min read

Table of contents

Introduction

We live in a world of links and URLs, especially long ones. Say you want to share a link for Teams meets invite or a file from google drive, you will have to share a very long meaningless URL.

Let's see why it's a problem.

Drawbacks of long & meaningless URLs

  • Not understandable (Of course browsers can understand them... I'm talking about humans)
  • Too long to remember (You can't just type it into the browser right off the bat)
  • Google Drive allows users to shorten links but they are not meaningful full, they are random characters
  • Not easy to share (Say you got a URL in WhatsApp and wanted to paste it on PC. If you can't use WhatsApp on PC. You will have to type whole URLs)

ShortL

ShortL solves this problem by shortening the links. ShortL gets the URL from the user and also the desired slug that is meaningful. The slug and URL are stored together and when a user uses the short link we get the original link for that slug and navigate to the original URL.

It is pretty simple, isn't it?

Let's look at the tech stack

Tech Stack

NextJS

NextJS is my favourite frontend JS framework. It is based on react and has so much cool stuff built on top of it. The main feature that compelled me to use this framework for this project is the API Routes and Middleware. Yes, you can write your own API routes in NextJS and define middleware so that before hitting any route, you can check for authentication and in this case I query for the slug before showing any page and directly redirects the user from middleware itself.

Typescript

Seriously... do you still need a reason to use Typescript? NextJS has great support for Typescript.

Prisma

Prisma has to be one of the best ORMs out there. It had the perfect amount of abstraction I want. Easy to configure and an excellent developer experience. If you haven't tried Prisma yet... Give it a try.

PlanetScale

This is my first time using PlanetSclale DB. It is based on trusted MySQL DB. PlanetScale is very easy to use. And their branch feature has to be the one I love the most. Have different DBs and Schemas for different environments like production and development? How can you not like that?

Features

Head over to the app by clicking here.

  • Enter your valid long URL or Link in the specific field.

  • Enter your desired custom slug in the slug field. It should be unique.

  • You can see your short link below and copy it by clicking on the copy button.

You can now use your short link.

Upcoming Features

  • User Authentication (logged in users should be able to see and edit Short Links they have created)
  • Link Lifetime (user should be able to select the lifetime of a link so that it will be deactivated after specified lifetime)

Conclusion

Thank you for reading this article. Please check out the ShortL app.

PlanetScalePlanetScaleHackathonprismahackathonTypeScript