Concepts Blog - FullStack Blogging & Content Management Platform

Overview

Concepts Blog is a full-stack personal blogging and content management web platform engineered to publish, categorize, and read rich educational articles across IT, DevOps, Software Engineering, and Science.

The platform pairs a high-performance Next.js 16 (App Router) & React 19 frontend styled with Tailwind CSS v4 with an asynchronous FastAPI (Python) backend connected to MongoDB. It features a custom TipTap WYSIWYG editor supporting draggable callout text boxes, Cloudinary media hosting, protected JWT-authenticated admin studio workflows, and a direct SMTP contact message inbox.

Key Capabilities & Features

• Responsive Public Reading Experience:
  • Interactive hero section with Framer Motion ambient gradient orbs and latest articles preview.
  • Live article search, category/type filtering, read-time calculation, and paginated catalog (15 articles per page).
  • Dynamic prose view with an automatic DOM parser algorithm that floats embedded callout boxes beside article text based on saved drag coordinates.
• Custom TipTap Rich Text Editor (RichTextEditor.tsx):
  • WYSIWYG formatting tools: Headings (H1–H3), bold, italic, underline, strike, bullet/ordered lists, text alignment, font sizes, and custom color pickers.
  • Inline image uploading connected directly to Cloudinary and local static fallback storage.
  • Custom draggable callout boxes with relative coordinate tracking (data-x, data-y, data-target-index).
• Protected Admin Dashboard & Studio (/admin):
  • Secure authentication using JWT access tokens with bcrypt password hashing and route guards.
  • Complete article CRUD management with thumbnail/cover uploads, category assignment, and tag management.
  • Category creation, renaming, icon assignment, and bulk blog category re-assignment.
  • Real-time contact inbox with status filtering (All, New, Replied) and direct visitor email replies sent through Python smtplib.

System Architecture

The project is decoupled into an asynchronous Python REST backend and a modern React server/client frontend:

Results & Key Highlights

What I Learned

Built stronger skills in full-stack architecture, JWT authentication, REST APIs, MongoDB, and serverless deployment, while learning to customize TipTap for advanced content editing and integrate multiple services into a complete application.