🤖 AI Blog Website

---

📋 Table of Contents

• ✨ Features
• 🛠️ Tech Stack
• 🏗️ Architecture
• ⚡ Quick Start
• 🔧 Installation
• 🌍 Environment Variables
• 📱 Usage
• 🎨 Screenshots
• 🤝 Contributing
• 📄 License
• 👨‍💻 Author

---

✨ Features

🎯 Core Features

• 🤖 AI-Powered Content Generation - Leverage Google Gemini AI for intelligent blog content creation
• 📝 Rich Text Editor - Advanced Quill.js editor with formatting options
• 🎨 Modern UI/UX - Beautiful, responsive design with Tailwind CSS
• 📱 Mobile Responsive - Optimized for all device sizes
• 🔐 Admin Authentication - Secure JWT-based admin panel
• 📊 Dashboard Analytics - Real-time blog statistics and insights

🚀 Advanced Features

• 🖼️ Image Management - ImageKit integration for optimized image handling
• 💬 Comment System - Interactive commenting with moderation
• 🏷️ Category Management - Organize blogs by categories (Technology, Startup, Lifestyle, Finance)
• ⚡ Fast Performance - Optimized with Vite and modern React patterns
• 🔄 Real-time Updates - Live content updates without page refresh

---

🛠️ Tech Stack

Frontend

Backend

AI & Services

Development Tools

---

🏗️ Architecture

---

⚡ Quick Start

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or cloud instance)
• Git

🚀 One-Command Setup

---

🔧 Installation

1️⃣ Clone the Repository

2️⃣ Backend Setup

3️⃣ Frontend Setup

4️⃣ Environment Configuration

Server

Client

5️⃣ Start Development Servers

Terminal 1 - Backend

Terminal 2 - Frontend

• Frontend: http://localhost:5173
• Backend: http://localhost:3000

---

🌍 Environment Variables

Required API Keys

🔑 Getting API Keys

Google Gemini API

1. Visit Google AI Studio
2. Create a new project
3. Generate API key
4. Add to
   in server

ImageKit Setup

1. Sign up at ImageKit.io
2. Get your URL endpoint, public key, and private key
3. Add to server
   file

---

📱 Usage

🏠 Public Features

• Browse Blogs: View all published blogs with category filtering
• Read Articles: Full blog posts with rich content
• Newsletter: Subscribe to updates
• Responsive Design: Works on all devices

🔐 Admin Features

• Dashboard: Overview of blog statistics
• Create Blogs: AI-assisted content creation with rich text editor
• Manage Blogs: Edit, delete, and publish/unpublish blogs
• Comments: Moderate user comments
• Analytics: Track blog performance

🤖 AI Integration

• Generate blog content based on Title and subtitle

---

🎨 Screenshots

---

🚀 Deployment

🌐 Frontend (Vercel)

⚙️ Backend (Railway/Heroku)

📦 Docker Deployment

---

🤝 Contributing

🐛 Bug Reports

1. Check existing issues
2. Create detailed bug report
3. Include steps to reproduce

💡 Feature Requests

1. Search existing requests
2. Create detailed feature request
3. Explain use case and benefits

🔧 Pull Requests

1. Fork the repository
2. Create feature branch (
   )
3. Commit changes (
   )
4. Push to branch (
   )
5. Open Pull Request

---

📈 Roadmap

• Multi-language Support - Internationalization
• Advanced Analytics - Detailed blog metrics
• Social Media Integration - Share to platforms
• Email Notifications - Comment and blog alerts
• Advanced SEO - Schema markup and optimization
• Mobile App - React Native companion app

---

📄 License

---

👨‍💻 Author

---

🙏 Acknowledgments

• React Team - For the amazing React framework
• Google - For Gemini AI capabilities
• Tailwind CSS - For the utility-first CSS framework
• MongoDB - For the flexible database solution
• ImageKit - For image optimization services

---