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

Clone the repository

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

Install server dependencies
```
cd server
npm install
```
Install client dependencies
```
cd ../client
npm install
```
Start the development servers

Backend server:
```
cd server
npm run server
```
Frontend development server:
```
cd client
npm run dev
```
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)

Connect your GitHub repository to Vercel
Set build command: npm run build
Set output directory: dist
Add environment variables

Backend (Vercel)

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

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
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.

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
client		client
server		server
.gitignore		.gitignore
README.md		README.md

venkideshVenu/QuickBlog-AI-Powered-Blog

Folders and files

Latest commit

History

Repository files navigation