📌 Project Overview

NextBlog is a full-stack blogging platform I developed for publishing agriculture and sustainability-related content. The platform focuses on delivering a responsive, clean, and accessible user experience while providing powerful content management tools for creators.

The goal was to build a scalable and secure blogging solution with modern features like authentication, rich text editing, and SEO optimization.

⚡ Challenges

• Needed a full-stack solution with secure user authentication

• Required SEO-friendly blog structure (slug-based URLs + metadata)

• Needed a rich text editor with support for images and formatting

• Required a modern and responsive UI optimized for engagement

  
  

🛠️ What I Built

• JWT-based authentication system (Signup/Login with bcrypt password hashing)

• Blog CRUD features with Tiptap rich text editor for content creation

• Commenting system for authenticated users

• Base64 image uploads stored in MongoDB

• Slug-based blog URLs for SEO and clean routing

• Protected routes with Redux Toolkit & RTK Query

• SEO-optimized metadata (OpenGraph + Twitter cards)

• Responsive UI with Tailwind CSS & Material UI

• Snackbar notifications with Notistack for better UX

• Carousel integration (react-slick) for featured posts

  
  

📊 Results & Highlights

• 🔒 Secure & scalable authentication using JWT + bcrypt

• 📱 Fully responsive design across devices

• 📝 Powerful content creation experience with Tiptap editor

• 📈 SEO-ready platform (clean slugs, meta tags, OpenGraph)

• ⚡ Fast performance with Next.js App Router & React 19

• 🧩 Modular, maintainable codebase for future expansion

  
  

📦 Tools & Libraries

• Frontend: React 19, Next.js 15

• Styling: Tailwind CSS, Material UI (MUI)

• State Management: Redux Toolkit, RTK Query

• Forms & Validation: React Hook Form, Zod

• Authentication: JWT, bcryptjs

• Database: MongoDB, Mongoose

• Rich Text Editor: Tiptap Editor

• Notifications: Notistack

• Icons: Tabler Icons, MUI Icons

• Slug Generation: slugify

• Carousel: react-slick, slick-carousel

  
  

Stack: Next.js 15 · React 19 · MongoDB · Tailwind CSS