Clicked My Way Through Fancy Websites

To add a bit of life to my Portfolio, I set out to create a fully customizable blog to share my thoughts and projects. The blog should have core features like comments, claps, and a few extras. I spent a few minutes exploring fancy websites that promote simple solutions and can be integrated into my existing setup. At this point, there was no excuse not to do it, so...

I did it, and here’s how. (This is not a tutorial)

The Tech Stack

The Build Process

I wanted to keep things "serverless", and Vercel’s integrations made it easy. For the database, I used Neon to store posts with fields like slug, title, content, excerpt, featured_img_url, and publish_date.

I created a Neon database instance via their clean dashboard and plugged the connection string into my Next.js project. After setting up the relevant data structures, tables, and API routes, I published my first post using curl (no GUI yet!). Next, I built a User Interface to showcase these features:

  • List all posts
  • Display a single post
  • Add a comment section
  • Manage posts and comments via a dedicated admin interface

Authentication was a must, as I wanted to sign-in with GitHub or Google, and not just allow guest comments. My experience with NextAuth was phenomenal, and I integrated both providers at lightning speed. The admin panel was a game-changer, letting me create, edit, and delete posts and comments easily. ✏️

I use PICOCSS and its wunderful semantic styling, sparing me many hours of wrestling with CSS classes or big UI frameworks.

Markdown renders correctly too! ✅

Challenges and Wins

Creating SQL tables, queries, and API endpoints was a bit tricky. Prioritizing features while following the KISS principle was tough, but TypeScript and Next.js’s structure kept me on track. Seeing the blog live, with Markdown rendering flawlessly, comments flowing, and claps working makes me very happy. 💬👏

Thanks for reading! Clap if you enjoyed it, and leave a comment with your thoughts.