I Built a 'Fourth Clover' for Writers: A Minimalist Next.js Blogging Platform 🍀

Aryan Dani — Wed, 28 Jan 2026 01:48:40 +0000

The Noise of the Modern Web

We live in a noisy digital world.

Everywhere you go, there are pop-ups, cluttered sidebars, paywalls, and algorithmic distractions screaming for your attention. As a developer and a writer, I missed the days when the web was just content.

I wanted a place that felt rare. Special. Like finding a four-leaf clover in a field of three.

So, I built The Fourth Clover.

What is The Fourth Clover?

The Fourth Clover is a modern, minimalist blogging platform designed specifically for writers and thinkers who value clarity over clutter.

It isn't just another CMS. It is a carefully crafted experience that focuses on:

Typography: I used beautiful serif fonts (Charter & Playfair Display) so that reading feels like reading a book, not a screen.
Focus: A distraction-free environment where the UI fades away, leaving just you and your words.
Aesthetics: A unique "circular" and monochrome design system that feels premium and calm.

And the best part? It is completely Open Source.

🛠️ The Tech Stack

I didn't just want it to look good; I wanted it to be fast and scalable. Here is the powerhouse stack running under the hood:

Frontend: Next.js 13+ (App Router)

I leveraged the latest Next.js App Router for server-side rendering and optimal SEO. The app feels instant because almost everything that can be server-rendered, is server-rendered.

Styling: Tailwind CSS & shadcn/ui

For the UI, I used Tailwind CSS for handling the layout and custom design system. To ensure accessibility and functional interactive components (like dialogs and dropdowns), I integrated shadcn/ui (built on Radix UI). This combination allowed me to move fast without breaking accessibility.

Backend: Supabase

The entire backend is powered by Supabase.

Postgres Database: For structured, relational data (Authors, Posts, Comments).
Auth: Seamless Google OAuth via Supabase Auth.
Storage: Image uploads and management.

State Management: React Hook Form & Zod

Forms are hard. For the complex post editor, I used React Hook Form paired with Zod for schema validation. This ensures that every post is validated before it ever hits the database.

🌟 Key Features

1. The Distraction-Free Editor

The crown jewel of the project. I wanted an editor that gets out of your way.

Autosave: Never lose your work. The editor saves to local draft every few seconds if changes are detected.
Real-time Stats: Word count and reading time update as you type.
Scheduled Publishing: You can write now and schedule the post to go live later.
Clean Interface: Just you and your words. Settings like tags and excerpts are tucked away until you need them.

2. Social Features

Writing is social. I recently completed "Phase 2," which introduces:

Threaded Comments: A Reddit-style nested comment system.
Likes & Reactions: Real-time feedback on your posts.
Profile Stats: See how your posts are performing.

3. Performance First

The site scores highly on Core Web Vitals. Images are optimized, fonts are loaded efficiently, and the database queries are fine-tuned with proper indexing.

🚀 Get Involved

This project is a labor of love, and it is just getting started. I have a roadmap filled with exciting features, and I would love for the community to be a part of it.

How you can help:

Star the Repository: This helps us gain visibility and reach more developers.
👉 https://github.com/aryan-dani/The-Fourth-Clover
Report Bugs: Found something broken? Open an issue!
Contribute: Fork the repo, pick up a "good first issue," and open a PR. I review all PRs!

Final Thoughts

Building The Fourth Clover reminded me why I love web development. It’s the perfect intersection of engineering and art. Technology should empower us to express ourselves, not get in the way.

If you are looking for a new project to study, a platform to write on, or a codebase to contribute to, I invite you to join us.

Happy Coding! 🍀

GitHub: https://github.com/aryan-dani/The-Fourth-Clover
Live Demo: https://fourthclover.bio

DEV Community: Aryan Dani