- This article is about my personal project from December 2019: https://cmpct.io
- Check out a super fast demo on YouTube: https://www.youtube.com/watch?v=7KVWN7Ksf3M
This article is part of a short series where I am writing brief thoughts about my personal projects.
Every year I try to build a new personal project using technology that I think is cool at the time. I do it for a few reasons...
- Because I have a personal need or desire to use the software, as per the adage: "Food tastes better when you make it yourself"
- To showcase to other engineers, potential employers and myself what I can do, while keeping an up to date and diverse portfolio.
- So I have a reference for how to do something I have already done before, in case I need to do it again!
This year I decided to build a link shortener with a few differences, as a Software Engineer I use a link shortener on a daily basis; wouldn't it be great to use my own!
The project started on December 15th 2019 and was ready for MVP on December 31st 2019, so it has progressed from conception to reality very quickly; partly because I have constrained the scope of the project in the early days.
You may have heard of projects like bit.ly where you paste a long URL and the service spits back a shorter one you can share with friends and colleagues. cmpct.io is a bit like bit.ly but it differs in a few ways...
- No automatic redirect: bit.ly provides really short links, but they obfuscate where you will actually end up, this isn't great; so cmpct.io doesn't automatically redirect you, but you go to a landing page where you can see the destination before you choose to go there.
- Comments: I frequently work on projects and ask others for feedback, but its never easy to collect it; so I wanted to make it possible for people to leave comments on one of the links generated.
- Reports: Scammers often use bit.ly because they can get unsuspecting users to go to unsafe websites, so cmpct.io has a reporting capability which alerts you if the link you have been provided is unsafe; before you go there!
- Privacy focused: Internet companies love to harvest your info and habits, so I wanted to build one that stored absolutely nothing about you. Hence the project doesn't even have an account system, nor do we store on our servers a list of the links you have visited.
- Free: I build software because I enjoy building software, I have a job to make money, so a key advantage cmpct.io can offer is that I have no intention of generating revenue from it.
VueJS, Nuxt, .NETCore 3 WebAPI, Azure
I love VueJS, I have been using it for a few years now, and I have built projects with it before, cmpct.io is no exception. The front end website for this project is built with VueJS and Nuxt, it is a universal app which has PWA features; it can be installed on your device for example.
The front end doesn't use any design frameworks like bootstrap this time, I wanted to keep it really clean and minimalist, so all the css is hand-written, typically in Sass where nesting is relevant at a component level, but pure CSS where the complexity is not needed.
I use a few cool node packages like shortid to generate unique identifiers for my links, but it is pretty lightweight really. I was even able to bring over components I have written in my other VueJS projects, like the snackbar.
On the backend I have a .NETCore 3 Web API, it is super simple with no authentication, it is just a basic restful API which handles GET and POST requests for the small number of business objects involved in the project (Routes, Comments, Reports). I even broke down my api project by business object as don't tend to interact.
For data retention I am using an Azure storage container where each link is simply stored as a tiny JSON file and read from on request, latency doesn't seem to be an issue and it is dead cheap to maintain.
The API and front end are seperate websites, both hosted on the same App Service in Azure, running on an S1 Linux Box and deployed using the Kudu Continuous Deployment offered by Azure for free; with zero modifications from the template!
I did a few interesting things in this project, the turnaround time was the shortest of any project I have worked on, 2 weeks from nothing to MVP so scope was constrained. But a few things I find interesting here include...
- "Procedurally" (sort of) generated background: Those pretty circles are actually randomly generated on every page load, so every time you load the page you will see a subtly different background. (Each circle is actually an instance of a vue component)
- The design style: This project has a VERY different design style to what I normally produce, very grunge, minimalist and single minded.
- I attempted to only present the user with the choice to do one thing at a time.
- There are three user flows through the application, and they were meticulously adapted over the lifetime of the project to reduce friction.
Nothing immense is planned beyond refining the initial feature set, but I do intend to add a few cool features to further differentiate it from the competition.
- Password protected links.
- A Crawler to collect screenshots of the destination page which can be shown before you go there.
- Lookups against website reputation API's so a security score can be displayed.
I definitely need to go back and refactor bits and pieces too as I rushed to MVP.
If anybody is interested in contributing, the project is completely open source on Github, so feel free to improve my code or contribute to new features!