A modern, full-stack blogging platform with AI content generation capabilities.
- AI Content Generation: Generate blog content using Google Gemini AI
- Admin Dashboard: Complete blog management system
- Comment System: User comments with admin approval
- Image Upload: Cloud storage with ImageKit integration
- Responsive Design: Modern UI with Tailwind CSS
- Real-time Search: Filter blogs by category and search terms
Before running this project, you need:
- Node.js (v16 or higher)
- MongoDB database
- Google Gemini AI API Key
- ImageKit Account (for image storage)
git clone <repository-url>
cd QuickblogServer:
cd server
npm installClient:
cd client
npm installServer (.env) - REQUIRED:
# JWT Secret
JWT_SECRET = 'your-jwt-secret-key'
# Admin Credentials
ADMIN_EMAIL = "your-admin-email@gmail.com"
ADMIN_PASSWORD = "your-admin-password"
# MongoDB
MONGODB_URI = "your-mongodb-connection-string"
# ImageKit (Required for image uploads)
IMAGEKIT_PUBLIC_KEY = 'your-imagekit-public-key'
IMAGEKIT_PRIVATE_KEY = 'your-imagekit-private-key'
IMAGEKIT_URL = 'your-imagekit-url-endpoint'
# Gemini AI (Required for AI content generation)
GEMINI_API_KEY = "your-gemini-api-key"Client (.env):
VITE_BASE_URL = http://localhost:3000- Go to Google AI Studio
- Create a new API key
- Add it to your server
.envfile
- Sign up at ImageKit
- Get your public key, private key, and URL endpoint
- Add them to your server
.envfile
Start the Server:
cd server
npm run serverStart the Client:
cd client
npm run dev- Navigate to
/adminto access the admin panel - Login with credentials from your
.envfile - Manage blogs, comments, and generate AI content
- Add new blogs with AI-generated content
- Upload images for blog thumbnails
- Publish/unpublish blogs
- Manage user comments
- Enter a blog title in the "Add Blog" section
- Click "Generate Content" to use AI
- Edit and customize the generated content
- Add images and publish
Quickblog/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── context/ # React context for state
│ │ └── assets/ # Static assets
├── server/ # Node.js backend
│ ├── controllers/ # API controllers
│ ├── models/ # Database models
│ ├── routes/ # API routes
│ ├── middleware/ # Custom middleware
│ └── configs/ # Configuration files
GET /api/blog/all- Get all published blogsGET /api/blog/:id- Get specific blogPOST /api/blog/add- Add new blog (admin only)POST /api/blog/delete- Delete blog (admin only)POST /api/blog/toggle-publish- Toggle publish statusPOST /api/blog/generate- Generate AI content
POST /api/admin/login- Admin authenticationGET /api/admin/dashboard- Dashboard dataGET /api/admin/blogs- All blogs (admin view)GET /api/admin/comments- All commentsPOST /api/admin/approve-comment- Approve commentPOST /api/admin/delete-comment- Delete comment
POST /api/blog/add-comment- Add user commentPOST /api/blog/comments- Get blog comments
Frontend:
- React 19
- Vite
- Tailwind CSS
- React Router DOM
- Axios
- Quill Editor
- Framer Motion
Backend:
- Node.js
- Express.js
- MongoDB (Mongoose)
- JWT Authentication
- Multer (File uploads)
- ImageKit (Image storage)
- Google Gemini AI
-
API Keys Required: You must obtain and configure:
- Google Gemini AI API key for content generation
- ImageKit credentials for image storage
-
Database: Ensure MongoDB is running and accessible
-
Environment Variables: All required variables must be set in
.envfiles -
Admin Access: Default admin credentials are in the
.envfile
This project is licensed under the MIT License.
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
For support, please open an issue in the repository or contact the development team.