Clicked My Way Through Fancy Websites

My portfolio has been hosted on Vercel for years. Now, I set out to create a blog to share my thoughts and projects, and I wanted it fully customizable. I spent a few minutes exploring simple solutions that build on my existing setup. The goal? A blog with core features like comments, claps, and a few extras. 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 UI 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, not just 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. ✏️

The site styles itself, thanks to 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. The win? Seeing the blog live, with Markdown rendering flawlessly, comments flowing, and claps working. 💬👏

What's Next?

Can’t wait to get hacked and suffer SQL injections 💉😜. Joking aside, this is just the start. I plan to add search, categories, and more posts about my projects.

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