This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.
Overview
The Blog Web App is a fully functional blogging platform built with React for the frontend and Appwrite for backend services. Users can create, read, update, and delete blogs, with authentication, database storage, file uploads, and serverless functions handled by Appwrite.
This project demonstrates modern web development concepts and full-stack integration in a React ecosystem.
Features
User Authentication
Sign-up and login using email & password.
Session management with Appwrite’s authentication.
CRUD Operations for Blogs
Create, edit, delete, and view blog posts.
Real-time updates using Appwrite database subscriptions.
File Uploads
Upload and attach images to blogs using Appwrite Storage.
Routing
Multi-page app using React Router DOM.
Protected routes for authenticated users.
Responsive Design
Mobile-first UI using Tailwind CSS.
Search & Filtering
Search blogs by title or content.
Filter blogs by author or category.
Notifications
Feedback messages for success or errors (toasts).
Concepts Learned
- React Fundamentals
Component-based architecture.
Functional components with hooks (useState, useEffect, useContext).
Forms and controlled components.
- State Management
Local state with useState.
Global state with Redux Toolkit (optional).
Context API (optional) for theme or auth state.
- React Router
Client-side routing with .
and for page navigation.
Nested routes and route parameters.
Protected routes for authenticated access.
- Appwrite Backend
Authentication: createAccount, createSession, getCurrentUser.
Database: Collections for blogs, users; CRUD operations.
Storage: File uploads for images.
Functions: Serverless functions for additional backend logic.
Realtime Subscriptions: Automatically update UI on database changes.
- Full Stack Integration
Fetching data from Appwrite using its JS SDK.
Error handling and loading states.
Synchronizing frontend and backend data in real-time.
- UI/UX
Tailwind CSS for styling.
Responsive layouts for mobile, tablet, and desktop.
Forms, buttons, cards, and modals.