I Built a 'Fourth Clover' for Writers: A Minimalist Next.js Blogging Platform 🍀
Source: Dev.to
⚠️ Collection Error: Content refinement error: Error: Connection error.
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 – Beautiful serif fonts (Charter & Playfair Display) make reading feel 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.
Tech Stack
- Next.js App Router – Server‑side rendering and optimal SEO; almost everything that can be server‑rendered, is server‑rendered.
- Tailwind CSS – Handles layout and the custom design system.
- shadcn/ui (built on Radix UI) – Provides accessible, functional interactive components such as dialogs and dropdowns.
- Supabase – Powers the backend:
- Postgres Database for structured, relational data (Authors, Posts, Comments).
- Google OAuth via Supabase Auth.
- Storage for image uploads and management.
- React Hook Form + Zod – Used for the complex post editor; ensures every post is validated before it hits the database.
Editor Features (The Crown Jewel)
- Autosave – Never lose your work; the editor saves to a local draft every few seconds if changes are detected.
- Real‑time Stats – Word count and reading time update as you type.
- Scheduled Publishing – Write now and schedule the post to go live later.
- Clean Interface – Settings like tags and excerpts are tucked away until you need them.
Social Features (Phase 2)
- Threaded Comments – Reddit‑style nested comment system.
- Likes & Reactions – Real‑time feedback on your posts.
- Profile Stats – See how your posts are performing.
Performance
The site scores highly on Core Web Vitals. Images are optimized, fonts are loaded efficiently, and database queries are fine‑tuned with proper indexing.
Community & Contribution
- Star the Repository – Helps 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