Build a URL Shortener with Rails 7

In this series, we'll build a URL shortener from scratch. We'll see how Twitter's URL shortener works for tracking view analytics and create our own short codes by creating Base62 encoding from scratch.

Start Series

17 Lessons | 4h 13m | Beginner

URL Shortener Requirements

Sep 18, 2023 Pro

We're going to build a URL Shortener in Rails, so where do we start? In this lesson, we'll plan out our project and the features we want to build.

17m

Creating The Link Model

Sep 19, 2023 Pro

First things first, we need a Link model to store our

17m

Base62 Encoding Short Codes

Sep 20, 2023 Pro

Using Base62, we can take an Integer ID and compress it for short codes in our URLs

12m

Base62 Decoding Short Codes

Sep 21, 2023 Pro

Decoding our Base62 encoded short codes is the next challenge

Find By Short Code

Sep 22, 2023 Pro

Now that we have Base62 encoding and decoding, we can tell Rails to use this for generating URL params and find

Short URL Link Redirects

Sep 23, 2023 Pro

Next, we can build redirecting Short URLs to the URL on the Link

11m

Views Chart for Links

Sep 24, 2023 Pro

Analytics for links is a useful feature so lets record Views for links and show them in a graph

28m

Improving the URL Shortener Design

Sep 25, 2023 Pro

It's time we start cleaning up the design and UI for a better experience with our URL shortener.

33m

Retrieving Link Metadata with Background Jobs

Sep 26, 2023 Pro

We can retrieve the title, description, and OpenGraph metadata for URLs. Since HTTP requests can be slow, we'll implement this metadata lookup in a background job and broadcast to the frontend with Turbo.

13m

Copy Link To Clipboard

Sep 27, 2023 Pro

Copy to clipboard is a required feature for a URL shortener. We'll implement this with two JavaScript libraries (clipboardjs and tippy.js) and a Stimulus controller.

11m

Deploying URL Shortener To Production with Hatchbox.io

Sep 28, 2023 Pro

We're ready to deploy our URL Shortener to production and we're going to do that using Hatchbox.io

Challenge: Add Users To The URL Shortener

Sep 29, 2023 Pro

Anyone can add, edit, and delete any Link in our URL Shortener database. Your challenge is to add users, associate links with them and only allow editing of your own links.

18m

Adding Edit Permissions For Links

Sep 30, 2023 Pro

Here's how we'd add Users and handle edit permissions for links. See how it compares to your implementation and consider the pros/cons of each approach.

34m

Adding Link Integration Tests

Oct 01, 2023 Pro

Testing our URL shortener is very important now that we've implemented edit permissions on Links. We want to make sure everything works as expected for each type of user.

16m

Adding GitHub Actions CI/CD to the URL Shortener

Oct 02, 2023 Pro

Now that we've got a thorough test suite, we want to make sure tests are run anytime we push code to GitHub. We can setup GitHub Actions to test our code and automatically deploy it when tests pass.

15m

Link Pagination with Pagy

Oct 03, 2023 Pro

Once our application has lots of links, it will become impossible to use. Let's add pagination to make our application usable once we have hundreds or thousands of links.

Wrapping Up Our URL Shortener

Oct 04, 2023 Pro

Congratulations! We're all done! We now have a fully featured URL shortener that does everything we need plus some cool extras.

Next Series

Finished this series? Continue learning in the next series

Build a Web Scraper in Ruby on Rails

Learn how to build a web scraper & monitoring tool with Ruby on Rails

Chris Oliver

8 Lessons

2h 17m

Beginner