How I Made

As a backend dev, my first open-source project was built without any backend!

Syofyan Zuhad
3 min readDec 19, 2022

*DISCLAIMER: I’m not made this repo from scratch


NextJs + Tailwind CSS


I built this project to help any developers who want to create a bio link page for their information. And yeah it’s FREE (wish it forever).

Actually, the concept is really simple. All you have to do is just make a page and consume the static json file.

The first page is a default page index.tsx to show the first time. And it has default data on default.json file.

file structure

And the code is separated into five-based components.

  1. Head: using to create an SEO-friendly header).
  2. Avatar: of course to show the user image dynamically.
  3. SocialLink: it shows social media icon with react icon.
  4. TextLink: here is the main content generated from the json file.
  5. Footer: logo of the

Improvement of this project can be used to integrate with online DB maybe. To provide an auth and other features like analytics or click counter.

In the beginning, I just used for visitor analytics. As shown image below.

Visitor link

The performance of this framework was awesome! I’ve tested it with pagespeed insight by google and the result is almost perfect.

Here is the test: pagespeed

So, here is. It's open-source, feel free to send a PR! even how to add your own page is by sending a pull request. You can read it here on Readme.

Sample page:

Have a great day all!