From Idea to Deployment: How I Built Devlinks

I recently finished building devlinks, a developer focused link aggregator similar to Linktree and Beacons. I would like to share the process of how I converted this idea I had into a fully functional website within a month. I will try to keep this as beginner friendly as possible so everyone despite their proficiency in coding can follow along.

The Idea

Honestly this is the hardest phase for any project. The process for this is very simple. Start by finding a problem that you are facing, and then ideate on what you could do for solving your problem.

With software engineering you are never solving a problem for the first time. Break down your problem into smaller sub-problems and chances are someone has already encountered that sub-problem and know their way around it.

The Problem

I'm a person active on Github, Leetcode and Github and I wanted to showcase my all of them in my resume. I started to question, Is there some product that can help me put all of my links in a single page, which I can then link in my resume.

There were a bunch of websites that did the same, like Linktree, beacons, Kofi. But all of these offerings missed something, They all catered to common audience and were not specific to a group of people.

Whenever you widen the scope for anything, you wont be able to delve deep into it. I wanted something like Linktree, but focused for developers. I wanted to show more than just the link name in the landing page. I wanted the visitor to see more details about my Github and other developer related socials.

Now that I have a defined problem statement, I can start working towards a solution.

Development

Development of any product has a few stages

1. Feature Extraction
2. Design / Architecture
3. Implementation
4. Deployment

Feature Extraction

Any part of application development starts by breaking the product into a set of features. Here are the features I wanted in my product.

1. User should be able to login and create a profile
2. They should be able to create and update a link page with their desired name
3. They should be able to add links to the page.
4. They should be able to view their created page in `<website_name>/<page_name>`.
5. If a link added is a developer related link (Github, Stack Overflow, Leetcode), the page should display additional information.

Now that we have an overall idea of what we want in our application.

Architecture

This stage of an application is where you decide what you build the application with and how the components of your applications are going to work together to solve your problem.

From the feature extraction step, I was able to isolate a few components for my application

1. A Database to store the user and link details
2. A back-end server that can talk to the database.
3. A customer facing front-end application to provide the user with an interface to talk to the backend.

Database

We have some data to store, how we want to store the data is the next question we have to answer.

Since I didn't have many relations in my feature, I decided to go with a document based DB. But going ahead with a relational Database also wouldn't be a bad choice here.

Now that we decided the type of database, we should pick a database provider. I picked Mongo Atlas because I already have an account there. But there are other viable options like Planet Scale DB or Supabase which have a generous free tier offering.

We now want an ORM to talk to the database for us, Prisma has been around this space for a while and it has a very robust integration with a lot of database providers including MongoDB so it was a no brainer to not pick this.

Framework

Now that the database is defined, we need a backend and a front-end to talk to the database. I'd like to point you to another article I wrote which has me trying out different frame works.

I got extremely impressed by SvelteKit while trying out different frameworks and wanted to build all of my apps using that. Try it out if you haven't and give the creators some love.

Svelte kit is a framework which supports Server side rendering, So I used the server part of the application to integrate with the Database and the client side of the application to interact with the User.

Implementation

Great, now we have a backend layer and an ORM to talk to the database, all that's left is to setup the frontend interface for the same and start building.

Lets tackle our feature list one by one.

For the authentication, I used Supabase. I wanted users to login via Github and Supabase has a really good SvelteKit integration to handle the same.

The implementation part will have a lot of places where you question your sanity / your ability to code. These are phases every developer goes through and the best ones don't give up.

Here are a few learnings I thought will be useful for every developer

1. Be willing to unlearn
2. Deleting code is almost always better.
3. First, make it work then make it better.

Deployment

I have the app ready and running in my local, I want to setup deployment so that I the site is live and available for anyone to use.

We have a lot of cloud providers who facilitate deployment. AWS, GCP, Azure have their own services that allow developers to deploy their site. We also have services like Netlify and Vercel that integrate with these cloud providers simplifying the deployment process.

Vercel was my choice for this, since they have built-in support for SvelteKit integration, and also offer a generous free tier for all personal projects. I linked the deployment to the domain I bought from hostinger.com

And there we go! that's how devlinks was made. It so happened that svelte was organizing a hackathon at the same time, so I used this as an entry for the same.