Appwrite Blog App

A simple blog app built with React, Vite, Appwrite, Redux Toolkit, and TinyMCE.

What you can do

• Sign up and log in
• Create, edit, and delete posts
• Upload a featured image for a post
• View posts and download the featured image

Tech stack

• React + Vite
• Redux Toolkit
• React Router
• Appwrite (Auth, TablesDB, Storage)
• TinyMCE editor
• Tailwind CSS

Project structure (quick view)

• src/appwrite/auth.js: Appwrite authentication methods (signup, login, logout, current user)
• src/appwrite/post.js: Appwrite post and file methods (CRUD, upload, preview, download)
• src/features/: Redux slices for auth and posts
• src/pages/: Route-level pages (Home, Post, AddPost, EditPost, Login, Signup)
• src/components/: Reusable UI parts (inputs, buttons, editor, layouts)

1) Setup

Install dependencies:

npm install

Create a local environment file:

cp .env.sample .env

On Windows PowerShell:

Copy-Item .env.sample .env

Fill these values in .env:

• VITE_APPWRITE_URL
• VITE_APPWRITE_PROJECT_ID
• VITE_APPWRITE_DATABASE_ID
• VITE_APPWRITE_BUCKET_ID
• VITE_APPWRITE_TABLE_ID
• VITE_TINYMCE_API_KEY

2) Run locally

npm run dev

3) Build for production

npm run build

Optional local preview of production build:

npm run preview

Deploy notes (Vercel + Appwrite)

• Add all VITE_ environment variables in Vercel project settings
• In Appwrite, add your deployed domain in Platforms -> Web
• In TinyMCE portal, allow your deployed domain for the API key

NPM scripts

• npm run dev
• npm run build
• npm run preview
• npm run lint