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. 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. 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: 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. 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. 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. 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. 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. 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. 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. 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. 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