Well at first glance it was looking quite obvious but it took well over 10 days to me(maybe it will 2 days to you). It was a well above a beginner project but not that big too. It was good excercise for me. Anyways if you have decided to read this article let's go..
Flow : User creates an account - go to dashboard - add links for their page. Done.
Problem 1 : User creates an account
I've made two selections initially - 1st - Using Clerk for auth. 2nd - Using a relational database like SQL or SQLite. These decisions created some problems -- Like how to create consistency between DB and Clerk. The username consistency problem have been solved but I guess profile picture sync doesn't seems to be working even though I have put the logic out there. Let's see. All of these problems can be avoided using Firebase because it will take care of auth and database. So maintaining consistency won't be an issue.
For the DataBase - I have initially decided to use PlanetScale's MySQL but its free tier isn't available in India. So, from Reddit I learnt about Turso - it's a SQLite based DB with a very generous free tier. I have chose not to use any ORM like Prisma because I feel that it adds an additional layer and I don't have any specific optimization requirements as of now. There was a very less clarity on how to get Turso's Key. You have to log in in CLI and then use the command : turso db tokens create your_db_name -e none -e none means that this key will never expire.
Problem 2 : Dashboard
This was one of the parts which took most of the time and heavy lifting. Fortunately Shadcn was there it creating UI was tad bit easier. So, the basic flow that I have kept - Come to Dashboard, Edit your heading and background, create links, finally save them and you are done. There are several APIs for example check if user exist. So when user comes to the dashboard React's useEffect will take care of some of the things such as creating user and if user already exist it will fetch their existing data.
The API problem : So decided to use NextRequest and NextResponse but there are certain issue around that. The first one was quite less number of documentation, especially after the App Router overhaul. Initially for the post requests I was using Readable Stream but in production it just broke. Then learnt that req.json() works just fine. So switched and all API routes are working just fine.
User image upload functionality - So here again decided to use Cloudflare's R2 storage bucket due to its generous free tier and S3 SDK cross compatibility. But here I faced a hell lot of problem again due to very less practical examples and tutorials. Here is a very good video to refer for file handling in Next js.
Just follow along and you can check out my actions.ts file from the project for R2 specific idea. One more thing you may have to set up a public for R2.. in order to access the files remotely - there are two ways - a) use Cloudflare workers. b) Use a public domain. (The option I chose).
Problem 3 : Creating Public Page
For creating public page, it wasn't that challenging just you have make some api routes public in the Clerk's middleware. Such as checkUserExist, getLinks etc.
And there we go we have our project ready. If anyone reading this let me know anything specific we need to dive in.
And at last for contributions the project is fully open source and self hostable.
Check out at :
If you wan't to sponsor it. Do let me know. Just kidding but seriously I won't deny.
Checkout the deployed version :
Peace. Everything used in this project is in freely available.Bye.