A modern blog platform built with Next.js, MongoDB, and TailwindCSS.

• 🌓 Dark mode support
• 📱 Responsive design
• 🎨 Modern and clean UI with glass morphism effects
• 🔒 User authentication with NextAuth.js
• 📝 Rich text editor with TipTap
• 🏷️ Category system with filtering
• 🔖 Bookmark system
• 📊 User dashboard
• 🖼️ Image upload support
• 💬 Comment system
• 🔍 SEO friendly

• Next.js 13 (App Router)
• TypeScript
• TailwindCSS
• MongoDB
• Prisma
• NextAuth.js
• TipTap Editor
• Cloudinary (for image uploads)

1. Clone the repository

git clone https://github.com/1d0u/nextjs-blog-project.git

2. Install dependencies

npm install

3. Set up environment variables

cp .env.example .env

Fill in the following environment variables in your .env file:

DATABASE_URL="your_mongodb_url"
NEXTAUTH_SECRET="your_nextauth_secret"
NEXTAUTH_URL="http://localhost:3000"
CLOUDINARY_CLOUD_NAME="your_cloudinary_cloud_name"
CLOUDINARY_API_KEY="your_cloudinary_api_key"
CLOUDINARY_API_SECRET="your_cloudinary_api_secret"

4. Set up the database

npx prisma generate
npx prisma db push

5. Seed the database (optional)

npm run seed

6. Run the development server

npm run dev

Open http://localhost:3000 with your browser to see the result.

• Email/Password authentication
• Profile management
• Role-based authorization

• Create, edit, and delete posts
• Rich text editor with markdown support
• Image upload and management
• Draft/publish system
• Category management
• Post bookmarking

• Modern glass morphism design
• Responsive layout
• Dark mode support
• Category filtering
• User dashboard
• Profile pages

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

MIT