I read a lot of personal portfolio pages, and almost all of them had the classical "My Skills" section. I wanted to give this opportunity to everyone, that's why I've decided to build Skillbit: the easiest and fastest way to have your personal "My Skills" section on the internet.
It's easier if you see it in action: skillb.it/marplex
Despite my previous experience working on "indie apps" (a few years ago I built dreambox.one, an AI assisted android dream journal), Skillbit was my very first project built entirely for the web.
Skillbit is a Remix React app that runs on Cloudflare Pages, written in Typescript. I decided to use this tech stack because It seemed hassle-free and I wanted to test the real capabilities of running apps on the edge.
The entire structure of the app is pretty simple, but there are a lot of components that I had to set up (easily).
If there's a phrase that can describe the entire architecture, it's probably:
Minimum effort, maximum effect
Database
First things first, the database. I used PostgreSQL as it is extremely versatile and lets you write complex in-db functions.
Since Cloudflare can only communicate with external services trough HTTP/S, I had to expose my database with an API.
API
A PostgREST server helps Cloudflare Workers to connect and talk with the database. It was super easy to setup: I configured the required role/permissions, and that was it.
postgrest-js
I used postgrest-js to communicate with my PostgREST endpoint. The library is easy to use and does everything for you.
Unfortunately, it is not suitable for doing complex queries. In this case, I simply called some functions on the database that followed the complex processes (login/register/adding new skills, ...)
User management
This was my biggest concern before starting to build Skillbit. Managing users and coding every authentication flow is a pain in the a**.
Following my "Minimum effort, maximum effect" principle , Firebase seemed an obvious choice. In fact, that's what I ended up using.
Of course, nothing is as easy as it seems. It turns out that the Firebase JS SDK does not work on Cloudflare Workers but only on Node.JS
After hours of trying to solve this problem, in the midst of my desperation, I finally decided to built a wrapper around the Firebase REST APIs and package it as a Javascript Library.
Although I had found a solution, I thought that creating this library was not in accordance with my principle.... So why not make it open source and maybe save other people time?
And that's exactly what I did; you can view flarebase-auth on my GitHub profile. I also made a post that explains more about the inner workings of this library.
React and Remix
This was my first time using React and my first time using Remix. I just have to say that it is a joy to develop applications with these technologies. They are easy to learn and everything seems to work at the first time, it's a magical feeling.
If you want to know more, I made two posts about my first time experience with React and Remix.
Give it a try!
Now that you know how it's built, give it a try and create your Skillbit! Of course, we are developer, we find bugs everywhere. If you find one, please share it to me and I'll fix it (hopefully)
Oh, and did I mention that Skillbit is completely free?
I don't want to monetize this project, at least for now. Even though I might do it in the future, I would still do it ethically.
Top comments (0)