GeoBrodas
Linksnap: One place for all your links

Linksnap: One place for all your links

The Linktree alternative for developers!

Georgey V B's photo
Georgey V B
·

5 min read

Table of contents

Introducing Linksnap!

Linksnap is an alternative for developers to share all their links at one place and share them seamlessly through an auto-generated page! Linksnap fetches relevant stats from platforms like GitHub and Hashnode and displays it on your profile!

Origin of Idea 💡

Well there is Linktree and Biolink. But it doesn't do much other than display a bunch of links. That's when I thought of adding a little "something" to the mix. What if we could fetch some cool stats from some platforms that the user exists on and display it on the profile as well. That's when the idea for Linksnap struck into my head.

Challenges 🏋🏽‍♂️

One main perspective of the application was to deliver the Profile page fast, and more importantly make it SEO-friendly. Well I could Easily do this with Next.js Incremental Static regeneration. But the catch is, it would only revalidate after a given time interval. Well recently with Next.js v12.2, the developers at Vercel introduced the Stable version of On-demand ISR, which basically means that whenever the client makes a change on the database, the developer can manually trigger a revalidation request to build that particular page on demand.

Another one was definitely the UI. I'm not great at designing, but I guess I might have improved my CSS skills this year. Also Chakra-UI made it very simple to build out the front-end of the application, so that I could focus more on the back-end part of the application.

Then the risk I took was building Linksnap in the midst of my Semester Final examinations 😅. But in the end, I love what I do. There was a moment, when I had decided to abandon the project, but I still kept my hopes high, managed my schedule accordingly, and shipped Linksnap 🚀

Behind the Scenes

The way how Linksnap works is pretty straightforward. It will parse through the profile data that the user has submitted in the Dashboard page and checks if there's any data available on the respective APIs from Hashnode and GitHub to see if such a user is available, and if it exists, generates a unique page at linksnap.vercel.app/${your_github_username}.

Hashnode API and the GitHub API stores information, in form of pages. That is if you have a lot of repositories or Posts, there will be multiple pages for it. For GitHub, its 30 repositories per page request and 6 posts per request for Hashnode API. For example, if you need stats from page 2, the request is as follows

let res2 = await fetch(
  `https://api.github.com/users/${username}/repos?page=2`
);

Now to get the actual stats, eg: the total stars and forks for the respective user, it's essential to go through each page request and increment the count. Thats where the fun is.

Linksnap handles this pretty smart. At first, it will check how many repositories (public) the respective user has. Accordingly it will then set a counter

  let counter = user.public_repos / 30;

  // approx counter to the next digit
  counter = Math.ceil(counter);

With this, now we know how many page requests it needs to make. All thats left is to iterate it through a loop and accordingly increment each stat.

  for (let i = 1; i <= counter; i++) {
    let res2 = await fetch(
      `https://api.github.com/users/${username}/repos?page=${i}`
    );

    let repos = await res2.json();

    repos.forEach((repo) => {
    // increment stats
    });
  }

Finally, the reason why the Profile Page is so quick in serving the page, is because all this logic is running during the build process using getStaticProps. What this does is basically pre-building the page way before the user tries to make a request to the page. Hence what you finally get is a pure static site.

Since Linksnap also uses On-Demand ISR to update the users page manually, the individual page is re-built each time the user changes the data.

On-Demand ISR is pretty new, and there are a lot of debates revolving around regarding its usage in production. Hence Linksnap might revert to Server Side rendering if any breaking changes are introduced.

Tech Stack 🛠️

Untitled design (5).png

  1. Next.js : Next.js is a framework build on top of React and has many out of the box features like Image Optimization, API routes.

  2. PlanetScale : I'm no fan of SQL, but PlanetScale is just pure joy. I specially liked the concept of branches for managing the database schema. Also getting started with PlanetScale was pretty fast as well. The documentation is well written as well!

  3. Chakra-UI: A React front-end library that makes building the front-end fast, keeping in mind the accessibility fo the website.

  4. React-Hook-Form: A library for managing form data and clearly the best way to add data-validation.

  5. Next-Auth.js: is responsible for managing authentication on Linksnap. Since Linksnap is built on Next.js, authentication using Next-Auth is no brainer!

Features ✨

Untitled design (4).png

  1. Simple and quickly spin up your profile in seconds.
  2. Add multiple links like GitHub, Twitter, Facebook, Hashnode, Dev, etc.
  3. Fetches relevant stats from your favorite platforms like Hashnode, GitHub. (More coming soon...)
  4. Indexable Profile page.
  5. Responsive across multiple devices

Roadmap 🚀

Linksnap has clearly a bright and long path to become completely successful! There are a bunch of features that can be added, to make Linksnap a success -

  • Custom profile link
  • Fetch stats from more platforms like Dev.to
  • A custom theme for the profile page
  • Launch on Product Hunt
  • PWA support
  • Dynamic OG meta images for the Profile page.
  • Capture insights from profile page.

Acknowledgement

Lastly I would like to thank PlanetScale and Hashnode for organizing this Hackathon. Building solo projects is the key to upskilling and there's no better way than participating in Hackathons.

Demo
GitHub Repository

PlanetScalePlanetScaleHackathon