Blog Platform (Full-Stack)
Production-grade blog platform built with React, Express, PostgreSQL, Prisma, Cloudinary, and Docker. Features JWT session handling and role-based access control (RBAC).
1. Overview & System Scope
Blog Platform is a production-grade full-stack application built from scratch following layered architecture principles. It features JWT session handling, role-based access control (RBAC), and dynamic filtering. Engineered as a fully decoupled ecosystem separating the SPA client from the REST API server.
2. System Architecture & Tech Stack
Client (React + Vite SPA · Vercel Edge)
│── 1. REST API Requests (JSON · Axios Interceptor + Dual JWT Bearer)
│ └──► Express.js Server (Render Docker Container)
├── Controllers → Services → Repositories
├── Middleware (JWT Auth, RBAC, Zod Preprocessing, Rate Limiting)
└── Prisma ORM (v7) ──► PostgreSQL (Neon Serverless)
│
└── 2. Media / Image Uploads (Multipart Form-Data)
└──► Multer Stream ──► Cloudinary CDN (Persistent Media Storage)
3. Full-Stack Engineering Implementation
- Client Architecture (Frontend): Mobile-first SPA built with React, Vite, TypeScript, Tailwind CSS, and React Router v6, deployed on Vercel.
- API Layer (Backend): Layered architecture (Routes → Controllers → Services → Models) developed with Node.js, Express.js, and TypeScript.
- Database & ORM: Relational data modeling with PostgreSQL (Neon Serverless) and Prisma ORM integration.
- Security & Validation: Dual JWT flow via Axios interceptors, Zod payload validation, and IP-based Rate Limiting.
- DevOps & Storage: Render Docker containerization for the API service and Cloudinary CDN integration for persistent media storage.
4. Engineering Challenges & Solutions
- Ephemeral Storage Resilience: Solved Render's ephemeral filesystem data loss by integrating Cloudinary CDN and Multer for persistent media storage.
- Defensive Type Normalization: Handled multipart/form-data payload inconsistencies during image uploads using Zod preprocess and defensive transformations in the Service layer.
- SPA Routing Control: Configured Vercel rewrite rules (vercel.json) to prevent 404 errors during deep-linking and client-side page refreshes.