Full-Stack Personal Blog & Content Platform

Project Overview

This application serves as a modern, full-stack personal blogging platform and content management system (CMS). It was engineered to deliver a seamless publishing experience with rich text formatting, media management, dynamic article presentation, and robust administrative oversight.

Problem Statement

Traditional blogging setups often rely on rigid third-party CMS platforms or static file generators that lack flexible in-browser rich text editing, real-time media uploading, and custom administrative controls. The goal of this project was to architect a high-performance, self-hosted web system that provides complete ownership over content, media, and user access.

Project Goals

• Interactive Content Authoring: Full WYSIWYG rich text editor with extensive typography, color styling, and media embedding options powered by TipTap.
• High-Throughput API: Microservice architecture driven by Python and FastAPI with asynchronous MongoDB persistence.
• Secure Admin Portal: Protected management workflow enforcing role-based JWT authentication for drafting, publishing, and deleting posts.
• Scalable Media Storage: Direct Cloudinary media integration for automated image upload, thumbnail transformation, and CDN delivery.
• Fluid User Interface: Responsive Next.js 16 frontend with Tailwind CSS v4 styling and micro-interactions powered by Framer Motion.

System Architecture

The platform is structured into decoupled frontend and backend services:

1. Frontend: Next.js 16 App Router with React 19, TypeScript, Tailwind CSS v4, and Framer Motion micro-animations.
2. Rich Text Engine: TipTap WYSIWYG editor configured with custom extensions for fonts, text alignment, headings, links, colors, and inline images.
3. Backend Service: Python FastAPI server providing high-performance RESTful API endpoints for article CRUD operations, authentication, and contact submissions.
4. Database & Storage: MongoDB Atlas cluster managed via PyMongo with Pydantic v2 data verification, paired with Cloudinary API for image asset storage.
5. Authentication: JWT (JSON Web Token) bearer authentication scheme utilizing Passlib with bcrypt password hashing.

Key Features

• Dynamic Public Blog: Modern responsive grid layout displaying blog articles with search filtering, category tags, and reading time estimates.
• TipTap Rich Text Suite: Comprehensive content creation tools with custom headings, font family options, text align, color palette picker, and inline media embeds.
• Protected Admin Dashboard: Dedicated /admin route enabling administrators to manage posts, edit drafts, publish live content, and delete existing entries.
• Cloudinary Image Uploads: Automated image hosting for post cover images and inline article media with CDN speed.
• JWT Auth & Admin Onboarding: Secure authentication system with secret registration capabilities for administrative user setup.

Challenges & Solutions

Rich-Text Editor Hydration Across Server Boundaries

• Challenge: TipTap builds a live ProseMirror instance directly against the DOM, so rendering the editor inside the Next.js 16 App Router produced hydration mismatches between the server-rendered markup and the client-mounted editor.
• Solution: Isolated the editor behind a dedicated client boundary with deferred initial rendering, so the surrounding dashboard stays server-rendered while the editor and its extension set instantiate only after mount.

Cross-Origin Authentication Between Next.js and FastAPI

• Challenge: The frontend and the Python API are deployed as separate services on different origins, so bearer-token requests triggered CORS preflight failures and silent authentication drops on protected admin routes.
• Solution: Configured an explicit FastAPI CORS allowlist for the frontend origin and centralized all API access in a single fetch wrapper that attaches the JWT, normalizes error shapes, and redirects to login on a 401.

Protecting Media Upload Credentials

• Challenge: Uploading straight from the browser to Cloudinary is the fastest path, but it exposes API credentials to anyone who opens the network tab.
• Solution: Routed every upload through an authenticated FastAPI endpoint that streams the file to Cloudinary server-side and returns only the resulting CDN URL, keeping secrets confined to the backend environment.

Lessons Learned

• Integrating TipTap rich text extensions and state handlers within Next.js 16 App Router client components.
• Designing asynchronous PyMongo queries and FastAPI handlers validated with Pydantic v2 models.
• Implementing cross-origin JWT bearer authentication and securing admin-only dashboard routes.