Skip to content

README.md

Latest commit

 

History

History
207 lines (159 loc) · 7.04 KB

README.md

File metadata and controls

207 lines (159 loc) · 7.04 KB

Next.js Blog CMS

Next.js TypeScript MongoDB Tailwind CSS License: MIT

Note: This project is currently on hold. The backend is mostly complete, and the frontend will be finalized soon.

A modern blog content management system built with Next.js 15, TypeScript, MongoDB, and NextAuth.js. Features an admin panel for managing blogs, categories, and AI-Powered Content Creation using the Gemini API.

🚀 Features

  • Modern Tech Stack: Next.js 15, TypeScript, Tailwind CSS
  • Authentication: NextAuth.js with GitHub OAuth and credentials
  • Content Management: Full CRUD for blogs and categories
  • AI-Powered Content Creation: Generate blog content using Gemini API by providing title, summary, and category
  • Image Upload: Cloudinary integration for image hosting
  • Responsive Design: Mobile-first responsive UI
  • SEO Optimized: Meta tags, Schema.org structured data
  • Rich Text Editor: Markdown support for blog content

📸 Screenshots

🏠 Homepage

Homepage

Clean and modern homepage design with featured blog posts

📝 Blog Page

Blog Page

Responsive blog listing with category filtering and search functionality

📖 Blog Detail Page

Blog Detail

Rich blog post view with markdown rendering and SEO optimization

🔧 Admin Dashboard

Admin Dashboard

Comprehensive admin panel for content management

✨ AI Content Generation

AI Content Generation

AI-powered content creation using Google Gemini API

🚀 Performance & SEO

⚡ Perfect Performance & SEO Scores

PageSpeed Insights

Perfect 100/100 scores across all PageSpeed Insights

🛠️ Tech Stack

  • Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS
  • Backend: Next.js API Routes, MongoDB, Mongoose
  • Authentication: NextAuth.js (GitHub OAuth + Credentials)
  • Image Storage: Cloudinary
  • AI Integration: Google Gemini API
  • Styling: Tailwind CSS with custom components
  • Icons: React Icons
  • Notifications: React Toastify

📋 Prerequisites

  • Node.js (v18+)
  • npm or yarn
  • MongoDB (local or cloud)
  • Cloudinary account
  • GitHub OAuth app
  • Google Gemini API key

🚀 Quick Start

  1. Clone Repository

    git clone https://github.com/emrhngngr/nextblog.git
cd nextblog

  2. Install Dependencies

    npm install
# or
yarn install

  3. Set Up Environment Variables Create a .env.local file:

    MONGODB_URI=mongodb://localhost:27017/nextblog
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-super-secret-key
NEXTAUTH_GITHUB_ID=your-github-client-id
NEXTAUTH_GITHUB_SECRET=your-github-client-secret
CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name
CLOUDINARY_API_KEY=your-cloudinary-api-key
CLOUDINARY_API_SECRET=your-cloudinary-api-secret
GEMINI_API_KEY=your-gemini-api-key
OWNER_PASSWORD=random123

  4. Database Setup

    • Local MongoDB: Install and start MongoDB, use mongodb://localhost:27017/nextblog.
    • MongoDB Atlas: Create a cluster at MongoDB Atlas, get connection string, update .env.local.

  5. GitHub OAuth Setup

    • Create OAuth app at GitHub Developer Settings.
    • Set Homepage URL: http://localhost:3000, Callback URL: http://localhost:3000/api/auth/callback/github.
    • Add Client ID and Secret to .env.local.

  6. Cloudinary Setup

    • Sign up at Cloudinary.
    • Add Cloud Name, API Key, and API Secret to .env.local.

  7. Gemini API Setup

    • Obtain a Gemini API key from Google Cloud.
    • Add to .env.local as GEMINI_API_KEY.

  8. Run Development Server

    npm run dev
# or
yarn dev

📚 Database Models

  • User: Authentication, permissions
  • Blog: Title, summary, content, author, category, visibility
  • Category: Name, slug, description

🛠️ API Routes

  • /api/auth/*: NextAuth authentication
  • /api/blog: Blog CRUD operations
  • /api/categories: Category management
  • /api/ai/generate-content: Generate content via Gemini API (input: title, summary, category)

🚀 Deployment

Vercel

  1. Push code to GitHub.
  2. Connect to Vercel.
  3. Add environment variables in Vercel dashboard.
  4. Update NEXTAUTH_URL to production domain.

📊 Performance Metrics

Metric Score Description
Performance 100/100 ⚡ Optimized loading and rendering
Accessibility 100/100 ♿ WCAG compliance and screen reader support
Best Practices 100/100 🔒 Security and modern web standards
SEO 100/100 🔍 Search engine optimization

🛡️ Security Features

  • Environment variable validation
  • Input validation and sanitization
  • Secure password hashing with bcrypt
  • JWT token management

🤝 Contributing

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

📄 License

MIT License - see LICENSE for details.

👨‍💻 Author

Emirhan Güngör

⭐ If you found this project helpful, please give it a star! ⭐

Happy Blogging! 🎉

For support, open an issue on GitHub.