Side Project: RedirectMe
Tags: react, cosmosdb, opensource, dotnet
Published: 2022-06-27 18:37:17

I created a side project, not long ago, to create some proof of concepts on tech stacks. It is a simple web application that allows you to create short URLs from a bigger link, and I called it RedirectMe.

My main focus was creating a simple web application, focusing on user privacy, free to use and [open-source](https://fabiocosta.eu/blog/guilt-on-the-open-source).

## Front-end
For the front-end, I chose [Reactjs](https://reactjs.org/), because I had never used it before and I thought it would be a great opportunity to learn while using it. (It was created with Reactjs 17, an upgrade to v18 will happen soon, along with a post on how it goes).

The app was simple enough. One page that allows inserting the URL to be shortened, calls a backend REST API endpoint, receives the new shorted URL, and shows it to the user. No user data is recorded, other than the connection between the short URL and the URL inserted by the user.

The other page is where the redirection happens. When someone uses the short URL, it arrives on a page, where the backend API is called, in order to retrieve the correspondent's full URL. After that, the front redirects the user to this link.


![A board with an application planning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/862lz4gjcqctr2b676oc.jpg) [Unsplash](https://unsplash.com/photos/qWwpHwip31M)

## Back-end
The application is simple and my intent is only to have a really short amount of API endpoints (at least for now), so I created the back-end API with [Azure Functions](https://azure.microsoft.com/en-us/services/functions/), using .NET Core 3.1 (migration to .NET 6 and Azure Functions v4 planned - another post planned to follow it) since there was not a lot of processing to be done on each endpoint.

There are only 2 endpoints. One that receives the long URL from the user, generates one unique short URL, saves on the database, and returns it to the front. The other endpoint receives from the front the short URL, search in the database for the correspondent full URL, and returns it to the front.

Quite simple and perfect for this kind of backend. Creating one [.Net Core Web API](https://dotnet.microsoft.com/en-us/apps/aspnet/apis) application would be overengineering for this kind of data treatment.

## Database
For the database, I choose [Azure CosmosDB](https://docs.microsoft.com/en-us/azure/cosmos-db/introduction). I chose it because of its simplicity, flexibility, and performance. I had never used it before, so it was also the perfect application to learn it.

In it, only one table exists, where I save the correlation between the short and the long URL. Other than that, I also record the creation date, the last used date, and a counter of how many times that short URL was used. These last 3 fields exist only to generate some statistics.

## App link and GitHub
The application is online, free to use, hosted on Azure, on the [https://r.fabiocosta.eu](https://r.fabiocosta.eu).

For the people that want to check the source code or even fork it and create their own version, I created the application as open-source and everyone can do whatever they want with it. I just ask that people provide feedback and give the credits for the creation. Link to [GitHub](https://github.com/fabiocosta89/redirectme).


![Post's it's with Todo, Doing and Done phrases](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4sf6uucc1q0o9oz58n5.jpg) [Unsplash](https://unsplash.com/photos/OXmym9cuaEY)

## What’s next?
I have several ideas to improve the web application, some of which you can check on the GitHub repository, in the project zone.

There are several small improvements to make, but there is one big one that I should work on first, which is a back-office, so I can manage the URLs (without going to the database directly) and have a dashboard with statistics.

More on it in a future post 🙂

---

This was first published on my website [fabiocosta.eu](https://fabiocosta.eu).