QuickBlog - AI-Powered Blog Platform

QuickBlog is a modern, full-stack blogging platform built with the MERN stack, featuring AI-powered content generation using Google's Gemini AI, advanced image management with ImageKit, and a comprehensive admin dashboard for content management.

🚀 Features

🎯 Core Features

• AI-Powered Content Generation: Leverage Google Gemini AI for intelligent blog content creation
• Rich Text Editor: Integrated Quill.js editor for beautiful blog writing experience
• Image Management: Advanced image handling with ImageKit for optimization and CDN delivery
• Responsive Design: Mobile-first design with Tailwind CSS
• Real-time Notifications: Toast notifications for user feedback

👤 User Features

• Browse and read blog posts
• View blog posts by categories
• Comment on blog posts
• Search and filter functionality
• Newsletter subscription
• Mobile-responsive interface

🔧 Admin Features

• Dashboard: Comprehensive analytics and overview
• Blog Management: Create, edit, delete, and publish/unpublish blogs
• Comment Moderation: Approve or delete user comments
• Content Generation: AI-assisted blog content creation
• Image Upload: Drag-and-drop image uploads with optimization
• Authentication: Secure JWT-based admin authentication

🎨 Technical Features

• Server-Side Rendering: Optimized for SEO
• Image Optimization: Automatic WebP conversion and responsive images
• Performance: Code splitting and lazy loading
• Security: Protected admin routes and data validation
• Deployment Ready: Configured for Vercel deployment

🛠️ Tech Stack

Frontend

• React 19.1.0 - Modern UI library with latest features
• Vite - Lightning-fast build tool and dev server
• React Router DOM - Client-side routing
• Tailwind CSS 4.1.8 - Utility-first CSS framework
• Quill.js - Rich text editor for blog content
• Axios - HTTP client for API calls
• React Hot Toast - Beautiful notifications
• Marked - Markdown parser for content rendering
• Moment.js - Date and time handling
• Motion - Animation library

Backend

• Node.js - JavaScript runtime
• Express.js 5.1.0 - Web application framework
• MongoDB - NoSQL database with Mongoose ODM
• JWT - JSON Web Tokens for authentication
• Multer - File upload middleware
• CORS - Cross-origin resource sharing
• dotenv - Environment variable management

AI & External Services

• Google Gemini AI - AI content generation
• ImageKit - Image optimization and CDN
• Vercel - Deployment platform

📁 Project Structure

QuickBlog/
├── client/                 # Frontend React application
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   │   ├── admin/      # Admin-specific components
│   │   │   ├── BlogCard.jsx
│   │   │   ├── BlogList.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── Header.jsx
│   │   │   ├── Navbar.jsx
│   │   │   └── Newsletter.jsx
│   │   ├── pages/          # Page components
│   │   │   ├── admin/      # Admin dashboard pages
│   │   │   ├── Blog.jsx    # Individual blog page
│   │   │   └── Home.jsx    # Landing page
│   │   ├── assets/         # Static assets and images
│   │   ├── context/        # React Context for state management
│   │   ├── App.jsx         # Main application component
│   │   └── main.jsx        # Application entry point
│   ├── package.json        # Frontend dependencies
│   ├── vite.config.js      # Vite configuration
│   ├── vercel.json         # Vercel deployment config
│   └── eslint.config.js    # ESLint configuration
├── server/                 # Backend Node.js application
│   ├── configs/            # Configuration files
│   │   ├── db.js           # MongoDB connection
│   │   ├── gemini.js       # Google Gemini AI setup
│   │   └── imageKit.js     # ImageKit configuration
│   ├── controllers/        # Business logic
│   │   ├── adminController.js
│   │   └── blogController.js
│   ├── middleware/         # Custom middleware
│   │   ├── auth.js         # JWT authentication
│   │   └── multer.js       # File upload handling
│   ├── models/             # MongoDB data models
│   │   ├── Blog.js         # Blog schema
│   │   └── Comment.js      # Comment schema
│   ├── routes/             # API route definitions
│   │   ├── adminRouter.js  # Admin routes
│   │   └── blogRouter.js   # Blog routes
│   ├── server.js           # Server entry point
│   ├── package.json        # Backend dependencies
│   └── vercel.json         # Vercel deployment config
└── README.md               # Project documentation

🚀 Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• MongoDB (local or Atlas)
• Google Gemini API key
• ImageKit account

Environment Variables

Create .env files in both client and server directories:

Server (.env)

PORT=3000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD=your_admin_password

# Google Gemini AI
GEMINI_API_KEY=your_gemini_api_key

# ImageKit Configuration
IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key
IMAGEKIT_URL_ENDPOINT=your_imagekit_url_endpoint

Client (.env)

VITE_BASE_URL=http://localhost:3000

Installation Steps

1. Clone the repository

   git clone https://github.com/venkideshVenu/QuickBlog-AI-Powered-Blog.git
   cd QuickBlog

2. Install server dependencies

   cd server
   npm install

3. Install client dependencies

   cd ../client
   npm install

4. Start the development servers

   Backend server:

   cd server
   npm run server

   Frontend development server:

   cd client
   npm run dev

5. Access the application

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:3000
   • Admin Dashboard: http://localhost:5173/admin

📚 API Documentation

Public Endpoints

Blogs

• GET /api/blog/all - Get all published blogs
• GET /api/blog/:blogId - Get specific blog by ID
• POST /api/blog/comments - Get comments for a blog
• POST /api/blog/add-comment - Add a comment to a blog

Protected Admin Endpoints (Require JWT)

Authentication

• POST /api/admin/login - Admin login

Blog Management

• POST /api/blog/add - Create new blog (with image upload)
• POST /api/blog/delete - Delete blog by ID
• POST /api/blog/toggle-publish - Toggle blog publish status
• POST /api/blog/generate - Generate AI content with Gemini

Admin Dashboard

• GET /api/admin/dashboard - Get dashboard statistics
• GET /api/admin/blogs - Get all blogs (including unpublished)
• GET /api/admin/comments - Get all comments
• POST /api/admin/approve-comment - Approve a comment
• POST /api/admin/delete-comment - Delete a comment

🎨 Key Components

Frontend Components

• BlogCard: Displays blog preview with image, title, and excerpt
• BlogList: Grid layout for blog cards with pagination
• Header: Site navigation and branding
• Footer: Site footer with links and information
• Newsletter: Email subscription component
• Admin Components: Dashboard, blog management, and comment moderation

Backend Models

Blog Model

{
  title: String (required),
  subTitle: String,
  description: String (required),
  category: String (required),
  image: String (required),
  isPublished: Boolean (default: false),
  timestamps: true
}

Comment Model

{
  blog: ObjectId (ref: Blog, required),
  name: String (required),
  content: String (required),
  isApproved: Boolean (default: false),
  timestamps: true
}

🔧 Configuration

Vite Configuration

The frontend uses Vite with React and Tailwind CSS plugins for optimal development experience and build performance.

Vercel Deployment

Both client and server are configured for seamless Vercel deployment with proper routing and build settings.

Image Optimization

ImageKit integration provides:

• Automatic WebP conversion
• Responsive image generation
• CDN delivery
• Real-time image transformations

🚀 Deployment

Frontend (Vercel)

1. Connect your GitHub repository to Vercel
2. Set build command: npm run build
3. Set output directory: dist
4. Add environment variables

Backend (Vercel)

1. Deploy server directory to Vercel
2. Configure vercel.json for proper routing
3. Add all environment variables
4. Ensure MongoDB Atlas connectivity

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Google Gemini AI for intelligent content generation
• ImageKit for powerful image management
• Vercel for seamless deployment
• MongoDB for flexible data storage
• React and Tailwind CSS for modern UI development

📞 Support

For support, email support@quickblog.com or join our Slack channel.

---

Built with ❤️ by the QuickBlog Team

Making blogging intelligent and effortless with AI-powered content creation.