Background

The idea for this project came from wanting to improve my full stack development skills. I chose to go with AWS for everything as I recently completed a course on cloud computing using AWS.

Whats with the name?

I decided to actually buy a domain name for this project as the S3 bucket name of “http://urlshortener247.s3-website-us-west-2.amazonaws.com/" didn’t seem most appropriate for a URL shortener.

All the super short domains name were either too expensive or already taken, so I had to either find an obscure short name or make it a little longer. I chose the latter. The inspiration for the name comes from the metric unit system, the femto prefix designates one quadrillionth of a given unit (ie. something very, very small). Although the URLs it generates probably aren’t worthy of that prefix I had to improvise as micro, tiny, nano and even pico were already taken. I chose the “click” TLD as it sort of made sense for a URL shortener and was only $2.

Implementation

Everything from the frontend to the backend and database are all hosted on AWS. Even better, they are all serverless meaning I don’t have to worry about configuring anything to do with infrastructure/servers. This means it scales to zero when no one is using it and can scale up basically infinitely under heavy loads.

AWS services used

As for the architecture, I did some planning and came up with a simple diagram concerning what AWS services I’d use and how they’d communicate.

I use Route53 for DNS and Cloudfront as a CDN which provides easy SSL/TLS certificate integration. The actual Preact frontend is hosted on S3. As for the backend, the frontend makes API calls to a REST API on API Gateway, these endpoints then resolve to Lambda functions which in turn access a DynamoDB NoSQL database which holds all the original (long) URLs, their short IDs and how many clicks they have.

Under the hood

I implemented the shortening function with a custom hash algorithm sourced online which spits out an integer which I then convert to base62 to shorten it. If the hash already exists in the system, I seed the algorithm with a different number and try again. Basically rinse and repeat until it generates a unique hash. Eventually if no unique hash is found it will resort to lengthening the short URL ID by another character.

Conclusion

I enjoyed working on my full stack abilities and refining my AWS knowledge with this project. I took time to plan out not only the backend but also the frontend using mockups with Figma, improving my planning skills. One thing I’d still like to improve on in the frontend with Preact is breaking my project into more modular pieces that can be used independently of each other.

The source code is available on GitHub and Gitlab as linked to above.

femto.click is licensed under the GPLv3.