BloX - Modern Blog Platform

A full-featured, modern blog platform built with Next.js 15, MongoDB, and NextAuth.js. Create, publish, and engage with beautiful blog posts in a community-driven environment.

Features

• Rich Text Editor - Write with a powerful WYSIWYG editor supporting formatting, images, code blocks, and more
• User Authentication - Secure sign up/sign in with NextAuth.js
• User Dashboard - Manage your posts, bookmarks, and profile
• Admin Panel - Full admin control over posts and users
• Comments System - Engage with readers through comments with like/dislike functionality
• Bookmarks - Save your favorite posts for later reading
• Tag-based Organization - Filter and discover content by tags
• Search - Find posts quickly with full-text search
• Dark/Light Theme - Beautiful themes that adapt to your preference
• Responsive Design - Optimized for all screen sizes
• Image Uploads - Cloudinary integration for seamless image management
• Post Analytics - Track views and engagement on your content

Tech Stack

• Framework: Next.js 15 with App Router & Turbopack
• Database: MongoDB with Mongoose
• Authentication: NextAuth.js
• Styling: Tailwind CSS
• Animations: Motion (Framer Motion)
• UI Components: Radix UI
• Icons: Lucide React
• Rich Text Editor: React Quill
• State Management: Zustand
• Image Hosting: Cloudinary

Getting Started

Prerequisites

• Node.js 18+
• MongoDB database (local or MongoDB Atlas)
• Cloudinary account (for image uploads)

Environment Variables

Create a .env.local file in the root directory:

# MongoDB
MONGODB_URI=your_mongodb_connection_string

# NextAuth
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000

# Cloudinary
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/nextjs-blog.git
   cd nextjs-blog

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser.

Project Structure

├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── auth/          # Authentication endpoints
│   │   ├── posts/         # Post CRUD operations
│   │   ├── comments/      # Comment management
│   │   ├── bookmarks/     # Bookmark functionality
│   │   └── admin/         # Admin endpoints
│   ├── blog/              # Blog pages
│   ├── dashboard/         # User dashboard
│   ├── admin/             # Admin panel
│   └── auth/              # Auth pages (signin/signup)
├── components/            # React components
│   ├── ui/               # Reusable UI components
│   ├── home/             # Homepage sections
│   ├── comments/         # Comment components
│   └── dashboard/        # Dashboard components
├── models/               # Mongoose models
├── lib/                  # Utility functions
├── hooks/                # Custom React hooks
├── store/                # Zustand stores
└── public/               # Static assets

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.