📌 Project Overview
This Blog Platform is designed as a powerful content management solution tailored for developers, creators, and teams. It blends a polished UI with full editorial control, allowing posts to contain rich text, code snippets, embedded videos, image links, and even SVG illustrations with zoom/pan support.
The admin dashboard enables seamless creation and editing of posts, categorized by type (e.g., web development, VFX, editing), and stored in a structured Firestore database for scalability and performance.
Ideal for portfolio blogging, project documentation, tutorials, or internal team knowledge sharing.
🧩 Core Features
✍️ Rich Post Editor with Media Support
Built-in WYSIWYG editor using ReactQuill and Tiptap
Supports:
Paragraphs, headings, bold/italic/underline
Bullet lists and ordered lists
Embedded YouTube videos, SVGs, and image links
Custom code block insertion for tutorials or documentation
📁 Multi-Collection Blog Structure
Posts are divided into categories:
🖥️ Web Development
🎮 Game Dev
🎞️ Editing & VFX
Each category uses its own Firestore collection for better control and querying
🧑💼 Admin Panel
Firebase Auth-protected login system
Create, update, or delete posts through an easy-to-use dashboard
Auto-sync with Firestore; changes are reflected instantly on the frontend
Admin dashboard includes preview, editor, and category selection options
🌍 Frontend Features
SEO-friendly dynamic routing with slugs
Post Detail View with full content render, video embed, code highlights
Home Page Aggregator that shows latest posts by category
Dark Mode supported by system detection or toggle
🧰 Tech Stack
Component | Technology Used |
|---|---|
Frontend Framework | React + TypeScript |
UI Design | Material UI |
Authentication | Firebase Auth |
Database | Firebase Firestore |
Media Storage | Firebase Storage + External Embeds |
Hosting | Firebase Hosting / Vercel |
Editors | ReactQuill + Tiptap |
SVG Zoom Support | Custom |
🗂️ Site Structure
Page/Component | Functionality |
|---|---|
Home Page | Aggregates 4 most recent posts and displays them as preview cards |
Category Pages | Dedicated pages for each blog category with dynamic post routing |
Post Detail | Full-view with title, thumbnail, text blocks, code, images, embeds |
Admin Panel | Secure dashboard for adding/editing/deleting posts |
SVG Viewer | Fullscreen zoom & pan for embedded SVG content |
💡 Highlights
Array-Based Post Structure: Posts are made of mixed content blocks (paragraphs, headers, code) for maximum flexibility
Single SVG per post: Viewable in fullscreen with interaction
Code blocks styled for readability and syntax highlighting
Rich Media including YouTube, iframes, and custom tables