{"id":30103501,"url":"https://github.com/aditaycodes/blogproject","last_synced_at":"2026-04-14T10:33:14.080Z","repository":{"id":309098460,"uuid":"1034073845","full_name":"AditayCodes/BlogProject","owner":"AditayCodes","description":"🚀 Modern React Blog Application with Full-Stack Features  A responsive, full-featured blog platform built with React 19, Vite, and Appwrite. Features user authentication, CRUD operations, rich text editing, and mobile-first design.  ✨ Features: Auth System | Blog Management | Rich Text Editor | Responsive UI | Image Upload | Redux State Management","archived":false,"fork":false,"pushed_at":"2025-08-09T20:57:36.000Z","size":101,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-09T21:14:29.133Z","etag":null,"topics":["appwrite","authentication","blog","crud","frontend","fullstack","javascript","modern-ui","react","react-router","redux","responsive-design","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"https://blog-project-mu-six.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AditayCodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-07T19:53:39.000Z","updated_at":"2025-08-09T20:57:39.000Z","dependencies_parsed_at":"2025-08-09T21:28:20.763Z","dependency_job_id":null,"html_url":"https://github.com/AditayCodes/BlogProject","commit_stats":null,"previous_names":["aditaycodes/blogproject"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/AditayCodes/BlogProject","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AditayCodes%2FBlogProject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AditayCodes%2FBlogProject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AditayCodes%2FBlogProject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AditayCodes%2FBlogProject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AditayCodes","download_url":"https://codeload.github.com/AditayCodes/BlogProject/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AditayCodes%2FBlogProject/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269643829,"owners_count":24452432,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appwrite","authentication","blog","crud","frontend","fullstack","javascript","modern-ui","react","react-router","redux","responsive-design","tailwindcss","vite"],"created_at":"2025-08-09T22:00:42.620Z","updated_at":"2026-04-14T10:33:14.034Z","avatar_url":"https://github.com/AditayCodes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BlogProject - Modern React Blog Application\n\nA full-featured, responsive blog application built with React, featuring user authentication, CRUD operations, and a modern UI design.\n\n## 🚀 Features\n\n- **🔐 User Authentication** - Secure login/signup with Appwrite backend\n- **📝 Blog Management** - Create, read, update, and delete blog posts\n- **🎨 Rich Text Editor** - TinyMCE integration for content creation\n- **📱 Responsive Design** - Mobile-first approach with TailwindCSS\n- **🖼️ Image Upload** - File storage and management\n- **⚡ Modern Stack** - React 19, Vite, Redux Toolkit\n- **🎯 SEO Optimized** - Clean URLs and meta tags\n- **🔍 Search \u0026 Filter** - Advanced post discovery\n- **👤 User Profiles** - Personalized user experience\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **React 19.1.0** - Latest React with concurrent features\n- **Vite 7.0.4** - Fast build tool and dev server\n- **TailwindCSS 4.1.11** - Utility-first CSS framework\n- **Redux Toolkit 2.8.2** - State management\n- **React Router DOM 7.6.3** - Client-side routing\n- **React Hook Form 7.60.0** - Form handling and validation\n\n### Backend \u0026 Services\n- **Appwrite 18.1.1** - Backend-as-a-Service\n- **TinyMCE React 6.2.1** - Rich text editor\n- **HTML React Parser 5.2.5** - HTML content rendering\n\n### Development Tools\n- **ESLint 9.30.1** - Code linting and formatting\n- **TypeScript Types** - Type safety for React components\n\n## 📦 Installation\n\n### Prerequisites\n- Node.js (v18 or higher)\n- npm or yarn package manager\n- Appwrite account and project setup\n\n### Setup Instructions\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/AditayCode/BlogProject.git\n   cd BlogProject\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Environment Configuration**\n   Create a `.env` file in the root directory:\n   ```env\n   VITE_APPWRITE_URL=your_appwrite_url_here\n   VITE_APPWRITE_PROJECT_ID=your_project_id_here\n   VITE_APPWRITE_DATABASE_ID=your_database_id_here\n   VITE_APPWRITE_COLLECTION_ID=your_collection_id_here\n   VITE_APPWRITE_BUCKET_ID=your_bucket_id_here\n   ```\n\n4. **Start development server**\n   ```bash\n   npm run dev\n   ```\n\n5. **Open your browser**\n   Navigate to `http://localhost:5173`\n\n\n5. **Live at browser**\n   Navigate to `https://blog-project-mu-six.vercel.app/`\n\n\n## 🏗️ Project Structure\n\n```\nBlogProject/\n├── public/                 # Static assets\n├── src/\n│   ├── appwrite/          # Appwrite configuration and services\n│   │   ├── auth.js        # Authentication service\n│   │   └── config.js      # Appwrite client configuration\n│   ├── assets/            # Images and static files\n│   ├── components/        # Reusable React components\n│   │   ├── Header/        # Navigation components\n│   │   ├── Footer/        # Footer component\n│   │   ├── post-form/     # Post creation/editing forms\n│   │   └── container/     # Layout containers\n│   ├── conf/              # Configuration files\n│   ├── pages/             # Page components\n│   ├── store/             # Redux store and slices\n│   ├── App.jsx            # Main application component\n│   ├── main.jsx           # Application entry point\n│   └── index.css          # Global styles\n├── package.json           # Dependencies and scripts\n├── vite.config.js         # Vite configuration\n└── README.md              # Project documentation\n```\n\n## 🎯 Key Features Explained\n\n### Authentication System\n- Secure user registration and login\n- JWT token management\n- Protected routes and components\n- User session persistence\n\n### Blog Management\n- **Create Posts**: Rich text editor with image upload\n- **Read Posts**: Responsive post display with SEO optimization\n- **Update Posts**: Edit existing posts with real-time preview\n- **Delete Posts**: Secure post deletion with confirmation\n\n### Responsive Design\n- Mobile-first approach\n- Breakpoint-specific layouts\n- Touch-friendly interface\n- Optimized for all screen sizes\n\n### Performance Optimizations\n- Code splitting with React Router\n- Lazy loading of components\n- Optimized image handling\n- Efficient state management\n\n## 🚀 Available Scripts\n\n```bash\n# Development\nnpm run dev          # Start development server\nnpm run build        # Build for production\nnpm run preview      # Preview production build\n\n# Code Quality\nnpm run lint         # Run ESLint\nnpm run lint:fix     # Fix linting issues\n```\n\n## 🔧 Configuration\n\n### Appwrite Setup\n1. Create an Appwrite project\n2. Set up authentication\n3. Create a database with posts collection\n4. Configure storage bucket for images\n5. Update environment variables\n\n### TailwindCSS Configuration\nThe project uses TailwindCSS v4 with custom configuration for:\n- Responsive breakpoints\n- Custom color palette\n- Typography scales\n- Component utilities\n\n## 📱 Responsive Breakpoints\n\n- **Mobile**: `\u003c 640px`\n- **Tablet**: `640px - 1024px`\n- **Desktop**: `\u003e 1024px`\n- **Large Desktop**: `\u003e 1280px`\n\n## 🎨 UI Components\n\n### Core Components\n- **Header**: Responsive navigation with user menu\n- **Footer**: Multi-column footer with links\n- **PostCard**: Blog post preview cards\n- **Button**: Reusable button components\n- **Input**: Form input components\n- **Container**: Layout wrapper components\n\n### Form Components\n- **Login Form**: User authentication\n- **Signup Form**: User registration\n- **Post Form**: Blog post creation/editing\n- **Rich Text Editor**: Content creation with TinyMCE\n\n## 🔒 Security Features\n\n- Environment variable protection\n- Input validation and sanitization\n- XSS prevention\n- CSRF protection\n- Secure authentication flow\n\n## 🧪 Testing\n\n```bash\n# Run tests (when implemented)\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Generate coverage report\nnpm run test:coverage\n```\n\n## 📈 Performance Metrics\n\n- **Lighthouse Score**: 95+ (Performance, Accessibility, Best Practices, SEO)\n- **Bundle Size**: Optimized with Vite\n- **Load Time**: \u003c 2 seconds on 3G\n- **Core Web Vitals**: Optimized for all metrics\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n### Contribution Guidelines\n- Follow the existing code style\n- Add tests for new features\n- Update documentation as needed\n- Ensure all tests pass\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 👨‍💻 Author\n\n**Aditay Sharma**\n- GitHub: [@AditayCodes](https://github.com/AditayCodes)\n- LinkedIn: [Aditay Sharma](https://www.linkedin.com/in/aditay-sharma/)\n\n## 🙏 Acknowledgments\n\n- [Appwrite](https://appwrite.io/) for the backend services\n- [TailwindCSS](https://tailwindcss.com/) for the styling framework\n- [Vite](https://vitejs.dev/) for the build tool\n- [React](https://reactjs.org/) for the frontend framework\n\n## 📞 Support\n\nIf you have any questions or need help with the project:\n\n- **Issues**: [GitHub Issues](https://github.com/AditayCodes/React-/issues)\n- **Discussions**: [GitHub Discussions](https://github.com/AditayCodes/React-/tree/main/BlogProject)\n- **Email**: aditaysharma2001@gmail.com\n\n## 🔄 Changelog\n\n### Version 1.0.0 (Current)\n- Initial release\n- Complete blog functionality\n- Responsive design\n- User authentication\n- CRUD operations\n\n---\n\n⭐ **Star this repository if you found it helpful!**\n\nMade with ❤️ by [Aditay Sharma](https://github.com/AditayCodes)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faditaycodes%2Fblogproject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faditaycodes%2Fblogproject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faditaycodes%2Fblogproject/lists"}