BlogX is a modern full-stack blogging web application built with React.js, Tailwind CSS, Redux Toolkit, and Appwrite. It enables users to create, edit, and manage rich blog content using the TinyMCE Editor, with seamless authentication and file handling powered by Appwrite’s BaaS capabilities.
🔗 Live Demo: blogx-react.vercel.app
- Frontend: React.js, Tailwind CSS, Redux Toolkit
- Backend (BaaS): Appwrite (for Authentication, Database, and Storage)
- Rich Text Editor: TinyMCE
- State Management: Redux Toolkit
- 🔐 User Authentication (Sign up / Log in / Log out)
- 📝 Create, edit, and delete blog posts with a WYSIWYG editor
- 📦 Upload and store images/files via Appwrite Storage
- 🗃️ Appwrite Realtime Database integration
- ⚡ Responsive UI with Tailwind CSS
- 🗂️ Organized codebase with reusable components and Redux slices
git clone https://github.com/AdityaSharmaHub/blogx.git
cd blogxnpm install-
Create a project on Appwrite
-
Set up:
- Authentication (Email/Password)
- Database (for storing blog posts)
- Storage (for media uploads)
-
Copy the relevant credentials (Project ID, Endpoint, etc.)
Create a .env file in the root with the following:
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_IDnpm run devblogx/
├── src/
│ ├── app/ # Redux store setup
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page-level components
│ ├── features/ # Redux slices
│ ├── services/appwrite # Appwrite config and API calls
│ └── index.jsx # App entry point
├── public/ # Static assets
├── .env # Environment variables
└── ...
Aditya Sharma 🔗 LinkedIn