"Where stories come to life and ideas find their home"
Blogify is a sophisticated, blog website built using Vite, Redux Toolkit, React, Appwrite and TinyMCE. This modern blogging platform combines powerful features with elegant design to deliver a professional content creation experience for writers, bloggers, and storytellers.
Transform your thoughts into beautiful, engaging stories with our intuitive platform. Whether you're a blogger, writer, or content creator, Blogify provides everything you need to share your voice with the world.
- 🚀 Lightning Fast - Built with modern React and optimized for performance
- 🎨 Beautiful Design - Sleek, dark theme that's easy on the eyes
- 📱 Mobile Ready - Responsive design that works on all devices
- 🔒 Secure & Private - Your content is protected with enterprise-grade security
- ✍️ Rich Writing - Advanced text editor with formatting options
- 📸 Visual Stories - Upload and showcase images with your posts
- User Authentication - Secure login and signup with session management
- Content Management - Create, read, update, and delete blog posts with ease
- Rich Text Editor - Professional writing experience with TinyMCE integration
- Image Uploads - Featured images for your posts with optimized display
- Responsive Design - Beautiful interface that adapts to any screen size
- State Management - Smooth user experience with Redux Toolkit
- Dark Theme - Modern, eye-friendly design throughout the application
- Contact & Support - Professional contact pages and privacy policy
Ready to explore this comprehensive React application? Follow these steps:
- Node.js (version 14 or higher)
- npm or yarn package manager
- Appwrite account and project setup
-
Clone the repository
git clone https://github.com/shoryasethia/Blogify.git cd Blogify -
Install dependencies
npm install
-
Set up environment variables
- Copy
.env.sampleto.env - Update the Appwrite configuration values in
.env
- Copy
-
Start the development server
npm run dev
-
Open your browser and navigate to
http://localhost:5173
npm run dev- Start development server with hot reloadnpm run build- Build optimized production bundlenpm run lint- Run ESLint for code quality checksnpm run preview- Preview production build locally
This project serves as an excellent blog website example for developers wanting to master:
- Frontend Architecture - Component-based design with React 19
- State Management - Advanced Redux Toolkit patterns
- Backend Integration - Appwrite BaaS implementation
- Authentication Flow - Complete user management system
- File Handling - Image upload and optimization
- Modern Styling - Tailwind CSS best practices
- Form Management - React Hook Form integration
- Rich Text Editing - TinyMCE editor customization
Frontend Stack:
- React 19 - Latest React with modern features and performance improvements
- Vite - Next-generation frontend build tool for fast development
- Redux Toolkit - Efficient state management with modern Redux patterns
- React Router DOM - Declarative routing for React applications
- Tailwind CSS - Utility-first CSS framework for rapid UI development
- React Hook Form - Performant forms with easy validation
Backend & Services:
- Appwrite - Open-source Backend-as-a-Service platform
- TinyMCE - Advanced rich text editor for content creation
Development Tools:
- ESLint - Code quality and consistency
- PostCSS - CSS processing and optimization
Technical Fixes:
- Fixed routing errors and case sensitivity issues
- Resolved Appwrite integration problems
- Improved error handling and user feedback
- Enhanced responsive design and mobile experience
- Optimized image handling for better performance
Found a bug or want to contribute? We'd love your help!
- Report Issues - GitHub Issues
- Fork the Repository - Create your own copy
- Submit Pull Requests - Share your improvements
- Star the Project - Show your support ⭐