DEV Community

Cover image for How I made a URL shortener app -> From making To deployment
Tejesh Palagiri
Tejesh Palagiri

Posted on

How I made a URL shortener app -> From making To deployment

alt text

Shortbit

The name of the app we created is Shortbit. This is pretty simple application that makes a long URL into a short URL and gives more in-depth insights of the link clicks and all other stuff such as the number of clicks, links shortened, from where the link is being clicked, which browser, referrer channel etc. These all things are visualized graphically.

Tech used

All the tech used for this app is MEAN stack
MongoDB used for storing data of users, short URLs and some other stats.
Redis used for maintaining user sessions.
Amazon SQS helped in counting stats.
Angular for front-end and all other normal stuff.

Behind scenes

All the implementation is pretty simple. Same as other URL shortener apps finds the long link with the given short link code and redirects the user to the long link.

But after redirecting how can we count the stats like country, referrer channel, browser, device and other stats ?

At first we made this as a simple project that doesn't counts any stats and it just redirects the user.

After then we implemented counting stats logic with some known modules of NodeJS for processing a request and storing the stats. All this logic went well but when there are a huge number of requests server stopped working and again we need to restart the app.

After then we tried to implement a message broker that holds the request data in a queue and then a micro service pick each item from the queue and consumes it and updates the related stats data.
We searched for a free service provider of Message Broker service. Unfortunately we didn't find any provider that goes with a free plan.

Then Amazon SQS helped us to make the requests save in the queue and helped the consumer microservice to consume the requests in the queue and updated the stats.

Deployment

As the idea of the app is completely free. We hosted the whole back-end part of the app in Heroku. And tried of serving front-end also from back-end heroku dyno, but it costed us more in consuming the free dynos. So for front-end used Netlify. For hosting a single page application we need to make necessary changes such that we won't face any issues after reloading a page.

Conclusion

Please feel free to check the app we made. It's just a simple project that helps us to know and develop more deeper insights in creating any applicaiton.
Thanks for reading !!!

Discussion (0)