How I Made Freebio.dev
As a backend dev, my first open-source project was built without any backend!
*DISCLAIMER: I’m not made this repo from scratch
Framework
NextJs + Tailwind CSS
Performance
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.
And the code is separated into five-based components.
- Head: using to create an SEO-friendly header).
- Avatar: of course to show the user image dynamically.
- SocialLink: it shows social media icon with react icon.
- TextLink: here is the main content generated from the json file.
- Footer: logo of the freebio.dev.
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 splitbee.io for visitor analytics. As shown image below.
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!
