MegaBlog

A full-stack, modern blog publishing platform powered by Appwrite and React.
Explore Features »

Getting Started · Deployment · Contributing · Issues

📄 About MegaBlog

A feature-rich, open-source blogging platform built with React, Appwrite, and Redux Toolkit. Write, edit, and publish content with ease using an intuitive UI and powerful backend.

Features

• 🌗 Light/Dark mode toggle support
• 🔐 Authentication (Signup/Login/Logout)
• 📄 Create, edit, delete articles
• 📷 Upload featured images
• 🔒 Access-controlled CRUD operations
• 📋 Rich-text editor via TinyMCE
• 🤝 Redux Toolkit integration
• 🌐 HTML parsing using html-react-parser
• ✅ Form handling with react-hook-form

🛠️ Built With

Frontend

• React
• Vite
• Redux Toolkit
• React Router DOM
• React Hook Form
• TinyMCE
• html-react-parser

Backend / Services

• Appwrite

  • Auth
  • Database
  • Storage (Bucket)

Getting Started

Prerequisites

• Node.js >= 18.x
• Appwrite Project & API Keys

Local Setup

1. Clone the repo:

git clone https://github.com/UdayIge/megaBlog.git
cd megaBlog

2. Install dependencies:

npm install

3. Set up environment variables in .env:

VITE_APPWRITE_PROJECT_ID=your_project_id
VITE_APPWRITE_API_ENDPOINT=https://cloud.appwrite.io/v1
VITE_APPWRITE_DATABASE_ID=your_database_id
VITE_APPWRITE_COLLECTION_ID=your_collection_id
VITE_APPWRITE_BUCKET_ID=your_bucket_id
VITE_TINYMCE_API_KEY=''

4. Start development server:

npm run dev

Deployment

Vercel

1. Push code to GitHub
2. Connect repo on Vercel
3. Set up environment variables in Vercel dashboard
4. Deploy and go live!

Vercel Config (Optional)

Create a vercel.json file:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Appwrite Configuration

1. Create a new Appwrite project (megaBlog)

2. Create database: blog

3. Add collection: articles

   • Attributes: title, content, featuredImage, userId, status
   • Index on status

4. Create a storage bucket for image uploads

5. Provide CRUD permissions as needed

Project Structure

megaBlog/
├── appwrite-services/
│   ├── auth.js
│   └── config.js
├── components/
├── pages/
├── store/
├── conf/
├── App.jsx
├── main.jsx
└── .env

Highlights

Vendor lock-in: Appwrite services are modular, and while this project uses Appwrite SDKs, abstraction layers are used to minimize vendor dependency.

Contributing

Contributions are welcome! Here's how:

1. Fork the repo
2. Create a new branch
3. Make changes and commit
4. Push and open a pull request

Dev Guidelines

• Use Prettier and ESLint
• Maintain code consistency
• Document changes

License

Distributed under the MIT License. See LICENSE for more info.

Acknowledgments

• Appwrite
• TinyMCE
• Vercel
• Redux Toolkit
• React Hook Form

Support

• File an issue
• Open discussions for suggestions

---

Built by @UdayIge