A modern, feature-rich blogging platform where users can create, share, and discover blogs from other writers. Built with cutting-edge technologies for a seamless writing and reading experience.
Blog Website is a full-featured blogging application designed to empower writers and readers. Users can:
- Create & Publish their own blog posts with rich text editing
- Read & Explore blogs shared by other community members
- Manage Content by editing or deleting their own posts
- Authentication with secure user accounts to protect their blog content
This project demonstrates modern web development practices with a focus on user experience, performance, and scalability. Whether you're a beginner developer learning React or someone wanting to start your blogging journey, this platform has you covered.
The project is built using modern, industry-standard technologies:
| Technology | Purpose |
|---|---|
| React 19 | User interface and component management |
| Vite | Fast build tool and development server |
| Redux Toolkit | State management for global app state |
| React Router | Client-side routing and navigation |
| Appwrite | Backend services (Authentication & Database) |
| Tailwind CSS | Utility-first CSS framework for styling |
| TinyMCE | Rich text editor for blog writing |
| React Hook Form | Efficient form handling and validation |
| HTML React Parser | Parse and render HTML content safely |
| ESLint | Code quality and best practices |
- 🔐 User Authentication - Secure signup and login system using Appwrite
- ✍️ Rich Text Editor - Write blogs with formatting options using TinyMCE
- 📚 Blog Management - Create, read, update, and delete your blog posts
- 🔍 Browse Blogs - Discover and read blogs from other users
- 👤 User Profiles - Manage your profile and blog collection
- 📱 Responsive Design - Works seamlessly across all devices
- ⚡ Fast Performance - Optimized with Vite for quick loading
- 🎨 Modern UI - Clean and intuitive interface with Tailwind CSS
- State Management - Efficient global state with Redux Toolkit
- Form Validation - Client-side validation with React Hook Form
- Protected Routes - Secure pages accessible only to authenticated users
- Backend Integration - Seamless Appwrite backend connectivity
src/
├── components/ # Reusable React components
│ ├── header/ # Navigation header
│ ├── footer/ # Footer component
│ ├── container/ # Layout wrapper
│ ├── forms/ # Form components
│ └── ...
├── pages/ # Page components
├── store/ # Redux store and slices
│ ├── authSlice.js # Authentication state
│ └── store.js # Redux store configuration
├── appwrite/ # Appwrite integration
│ ├── auth.js # Authentication services
│ └── config.js # Appwrite configuration
├── assets/ # Static assets
└── main.jsx # Application entry point
- Setup - Install dependencies and configure Appwrite
- Component Development - Build reusable UI components
- State Management - Manage app state with Redux
- API Integration - Connect to Appwrite backend
- Styling - Apply Tailwind CSS for responsive design
- Testing - Test features and fix bugs
- Deployment - Build and deploy the application
- Node.js (v16 or higher)
- npm or yarn package manager
- Appwrite account and project
-
Clone the repository
git clone <your-repository-url> cd project8Blog
-
Install dependencies
npm install
-
Configure Appwrite
- Update
src/appwrite/config.jswith your Appwrite credentials - Update
src/appwrite/auth.jsif needed for custom configuration
- Update
-
Start development server
npm run dev
The application will be available at
http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
Start the development server with hot refresh |
npm run build |
Create an optimized production build |
npm run preview |
Preview the production build locally |
npm run lint |
Check code quality with ESLint |
npm run buildThis creates an optimized build in the dist/ folder ready for deployment.
- Login/Signup Page - Secure authentication interface
- Home Page - Browse and discover blogs from the community
- Create Blog - Rich editor for writing new posts
- Blog Detail - View full blog content with formatting
- My Blogs - Manage your published blog posts
- Profile - User profile and preferences management
- Clean, intuitive navigation
- Fast page loading with Vite
- Responsive design on mobile, tablet, and desktop
- Rich text content with proper HTML rendering
- Smooth transitions and animations
- 💬 Comments and discussions on blogs
- ❤️ Like and bookmark functionality
- 🏷️ Tags and categories for blog organization
- 🔔 Notifications for blog updates
- 🔍 Advanced search and filters
- 📊 Blog analytics and insights
This project is open source and available under the MIT License.
If you encounter any issues or have questions, feel free to open an issue or reach out for support.
Happy Blogging! 📝✨