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