A full-stack blogging web application built with React, Redux Toolkit, and Appwrite BaaS (Backend-as-a-Service), featuring rich-text authoring via TinyMCE, secure authentication, image storage, and responsive UI design.
🌐 Live Demo: mega-blog-full-stack-project.vercel.app
- 🔐 Authentication & User Sessions: Secure email/password registration, login, and persistent session management powered by Appwrite Auth.
- 📝 Rich Text Article Authoring: Integrated TinyMCE WYSIWYG editor supporting formatted headings, lists, inline media, and code blocks.
- 🖼️ Media Storage & File Management: Automatic image uploads, bucket storage, and real-time preview thumbnail generation with Appwrite Storage.
- ⚡ Centralized State Management: User authentication states, active sessions, and post caches managed predictably with Redux Toolkit.
- 🛡️ Dynamic Post Management & Slug Handling: Real-time slug auto-generation from post titles, post CRUD operations, and author authorization controls.
- 🎨 Responsive Design: Clean, accessible layouts built with Tailwind CSS.
- Frontend: React 18 + Vite
- State Management: Redux Toolkit (
@reduxjs/toolkit,react-redux) - Backend-as-a-Service: Appwrite (Auth, Database, Storage)
- Editor: TinyMCE React
- Forms & Validation: React Hook Form
- Styling: Tailwind CSS
- Routing: React Router v6
- Deployment: Vercel
- Node.js
>= 18.x - An Appwrite project (cloud or self-hosted) with:
- An active Database and Posts Collection
- An image Storage Bucket
# Clone the repository
git clone https://github.com/msaad53407/Mega-Blog-Full-Stack-Project.git
cd Mega-Blog-Full-Stack-Project
# Install dependencies
npm installCopy .env.sample to .env and fill in your Appwrite credentials:
VITE_APPWRITE_URL="https://cloud.appwrite.io/v1"
VITE_APPWRITE_PROJECT_ID="your_project_id"
VITE_APPWRITE_DATABASE_ID="your_database_id"
VITE_APPWRITE_COLLECTION_ID="your_collection_id"
VITE_APPWRITE_BUCKET_ID="your_bucket_id"# Start Vite development server
npm run dev
# Build for production
npm run buildMIT