Mega Project - Blog App

A full-stack style blog frontend built with React, Vite, Redux Toolkit, React Router, Tailwind CSS, and Appwrite.

Live Demo

https://blog-beta-sage-79.vercel.app/

The app supports:

• User signup, login, and logout
• Protected routes for authenticated users
• Create, edit, delete, and view blog posts
• Rich text editing with TinyMCE
• Image upload and preview through Appwrite Storage

Tech Stack

• React 19 + Vite
• React Router
• Redux Toolkit + React Redux
• React Hook Form
• Tailwind CSS
• Appwrite SDK
• TinyMCE React Editor

Prerequisites

Before running the app, make sure you have:

• Node.js 18+ (recommended latest LTS)
• npm
• An Appwrite project with:
  • Project ID
  • Database ID
  • Collection ID (for posts)
  • Bucket ID (for post images)
  • Endpoint URL

Environment Variables

Create a .env file in the project root and add:

VITE_APPWRITE_URL=
VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_DATABASE_ID=
VITE_APPWRITE_COLLECTION_ID=
VITE_APPWRITE_BUCKET_ID=

These values are read in src/conf/conf.js.

Installation

npm install

Run Locally

npm run dev

Open the URL shown in the terminal (usually http://localhost:5173).

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint

App Routes

• / - Home page
• /login - Sign in
• /signup - Create account
• /all-posts - View all posts (protected)
• /add-post - Create post (protected)
• /edit-post/:slug - Edit post (protected)
• /post/:slug - Single post page

Project Structure

src/
	appwrite/      # Appwrite auth + database/storage services
	components/    # Reusable UI and forms
	pages/         # Route-level pages
	store/         # Redux store and auth slice
	conf/          # Environment variable mapping

Appwrite Notes

• Posts are created as Appwrite documents.
• Post images are uploaded to Appwrite Storage.
• Authentication is handled using Appwrite Account sessions.

Make sure your Appwrite collection permissions allow authenticated users to create/read/update/delete their posts as needed.

License

This project is for learning and personal development.