Personal website

Tech Stack

• Next.JS as framework
• Style with TailwindCSS
• Post content using MDX with ContentLayer
• ReactQuery for client side data fetching
• Prisma as ORM
• PlanetScale as DB

Features

• Post views, comments and likes are fetching in real-time from the backend.
• Each post's views will update automatically after a visit.
• Visitors can like, comment on posts, the only requirement is a valid email. For the likes, I'm using LocalStorage to store if a user liked the post or not, so one user will only be able to click the like button once.
• There is an Admin role in the database, where user and comment can be deleted.
• Added sharing button using Next Share for the post.

Gotcha

As the MDX files are generated by ContentLayer automatically, there's no way our database knows that a new post is being created. We have to create a post when connected to the production database.

Todos

• Add reply system from the author feature. The API is set up already, I'm being lazy to connect components to it.

Running locally

Connection to PlanetScale is not required as long as you have your local database setup, once it's ready run prisma migrate dev, it will sync your local database with the schema. As I'm using Postgres as the database, please refer to Prisma documentation.

If you want to create an Admin role, simply uncomment the code inside pages/api/auth/login and allow it to run once, once you see your admin user in Prisma Studio, comment it back. If not, you can delete all the files under admin pages(including API routes) as well as all the components.

Then run

yarn

install dependencies then

yarn dev

Then You're good to go. If you find bugs, you can create a PR or contact me.