📝 Appwrite Blog

A full-stack blogging platform built with React and Appwrite (Backend-as-a-Service).

The application allows users to create an account, log in securely, create and manage blog posts, upload featured images, and browse published posts. Appwrite handles authentication, database operations, file storage, and permissions.

🚀 Live Demo

🔗 Live Website: https://appwrite-blog-nu-one.vercel.app/

🔗 GitHub Repository: https://github.com/me-ishan7/appwriteBlog

---

✨ Features

• 🔐 User authentication with Appwrite
• 📝 Create blog posts
• ✏️ Edit existing posts
• 🗑️ Delete posts
• 📖 Browse published posts
• 🖼️ Upload featured images
• 📝 Rich text editor using TinyMCE
• 🔒 Appwrite-based permissions and access control
• 🧭 Client-side routing with React Router
• 🗃️ Global authentication state with Redux Toolkit
• 📱 Responsive UI
• ☁️ Deployed on Vercel

---

🛠️ Tech Stack

Frontend

• React
• JavaScript (ES6+)
• HTML5
• CSS3
• Tailwind CSS
• React Router DOM
• Redux Toolkit
• React Hook Form

Backend / BaaS

• Appwrite Authentication
• Appwrite Databases
• Appwrite Storage
• Appwrite Permissions

Other Tools

• TinyMCE
• Vite
• Git & GitHub
• Vercel

---

🏗️ Application Architecture

React Frontend
      │
      ├── React Router
      ├── Redux Toolkit
      ├── React Hook Form
      └── TinyMCE
      │
      ▼
    Appwrite
      │
      ├── Authentication
      ├── Database
      ├── Storage
      └── Permissions
      │
      ▼
    Vercel
📂 Project Structure
appwriteBlog/
│
├── public/
│
├── src/
│   │
│   ├── appwrite/
│   │   ├── auth.js
│   │   └── config.js
│   │
│   ├── components/
│   │   ├── Header/
│   │   ├── Footer/
│   │   ├── PostCard/
│   │   ├── Login/
│   │   ├── Signup/
│   │   └── ...
│   │
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   ├── Signup.jsx
│   │   ├── AddPost.jsx
│   │   ├── EditPost.jsx
│   │   ├── AllPosts.jsx
│   │   └── Post.jsx
│   │
│   ├── store/
│   │   ├── store.js
│   │   └── authSlice.js
│   │
│   ├── conf/
│   │   └── conf.js
│   │
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── .env.sample
├── .gitignore
├── package.json
├── vite.config.js
└── README.md
🔑 Environment Variables

Create a .env file in the root directory.

VITE_APPWRITE_ENDPOINT=
VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_DATABASE_ID=
VITE_APPWRITE_COLLECTION_ID=
VITE_APPWRITE_BUCKET_ID=
VITE_TINYMCE_API_KEY=

You can use .env.sample as a reference.

Important: Never commit your .env file or API keys to GitHub.

⚙️ Getting Started
1. Clone the repository
git clone https://github.com/me-ishan7/appwriteBlog.git
2. Navigate to the project
cd appwriteBlog
3. Install dependencies
npm install
4. Configure environment variables

Create a .env file:

touch .env

Add your Appwrite and TinyMCE configuration:

VITE_APPWRITE_ENDPOINT=your_appwrite_endpoint
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
VITE_TINYMCE_API_KEY=your_tinymce_api_key
5. Start the development server
npm run dev

The application will be available at:

http://localhost:5173
☁️ Appwrite Configuration

The application uses Appwrite for its backend services.

You need to configure:

Authentication

Enable email/password authentication in your Appwrite project.

Database

Create a database and an articles collection/table.

The article collection should contain fields similar to:

Field	Type	Required
title	Text	Yes
slug	String	Yes
content	Long Text	Yes
featuredImage	Text	No
status	Boolean	Yes
userId	String	Yes
Storage

Create an Appwrite storage bucket for featured images.

Permissions

Configure permissions according to your application's requirements.

For authenticated users, the application requires appropriate permissions for:

Read
Create
Update
Delete

Storage permissions should also allow authenticated users to upload and access required files.

🔐 Authentication Flow

The authentication flow is handled by Appwrite.

User
 │
 ├── Sign Up
 │      ↓
 │   Appwrite Account
 │      ↓
 │   Create Session
 │
 └── Login
        ↓
   Appwrite Session
        ↓
   Redux Auth State
        ↓
   Protected Routes

When the application starts, it checks the current Appwrite session and updates the Redux authentication state accordingly.

📝 Blog Post Flow
Create Post
     ↓
React Form
     ↓
React Hook Form
     ↓
TinyMCE Content
     ↓
Upload Featured Image
     ↓
Appwrite Storage
     ↓
Create Document
     ↓
Appwrite Database

Posts can then be:

Read → Edit → Update
         │
         └── Delete
🧠 What I Learned

This project helped me practice and understand:

React component architecture
React Router and protected routes
Redux Toolkit for global state management
React Hook Form
CRUD operations
Authentication and session management
File uploads and storage
Database permissions
Environment variables
Rich text editors
Appwrite as a Backend-as-a-Service
Deployment with Vercel
Git and GitHub workflow
🔮 Future Improvements

Possible improvements for future versions:

Search and filtering
Categories and tags
Comments and likes
User profile pages
Pagination
Better post editor experience
Image optimization
Admin dashboard
Role-based authorization
Improved loading and error states

📄 License

This project is available for educational and personal use.

👨‍💻 Author

Ishan Khan

GitHub:
https://github.com/me-ishan7