🚀 Blogotypo - A Modern Next.js Blogging Platform

🌍 Live Demo

🔗 Visit Blogotypo (Deployed on Vercel)

---

📖 About Blogotypo

Blogotypo is a feature-rich, secure, and user-friendly blogging platform built with Next.js. It allows users to create, publish, and manage blogs, with advanced features like search, filtering, sharing, and verified user authentication.

✅ Features:

• Anyone can create & publish blogs
• NextAuth with Google & GitHub authentication
• Secure password encryption using bcrypt
• Full CRUD operations for blogs
• Real-time blog views tracking
• Blog sharing options
• Recommended blogs section
• Advanced search & filtering (Sort by, Blogs per Page, etc.)
• Review system with ⭐⭐⭐⭐⭐ rating
• Admin dashboard for managing users
• User account deletion request system via /contact
• Legal pages: Terms & Conditions, Privacy Policy, License

---

🔥 Tech Stack

Technology	Usage
Next.js	Frontend & Backend
MongoDB + Mongoose	Database for storing blogs & users
NextAuth.js	Authentication (Google & GitHub)
Redux & Redux Toolkit	State management & global state
Jodit Editor	Rich text editor for writing blogs
Cloudinary	Upload & store images
bcrypt	Secure password hashing
Nodemailer	Email notifications
Chart.js + React Chart.js 2	Graphical blog statistics
Framer Motion	Smooth animations
Bootstrap & Tailwind CSS	Responsive UI design
Docker & Docker Compose	Containerization & Orchestration
Vercel	Hosting & Deployment

---

🚀 Installation & Setup

Option 1: Local Development (Standard Setup)

1️⃣ Clone the Repository

git clone https://github.com/MoinMN/blogotypo.git
cd blogotypo

2️⃣ Install Dependencies

npm install

3️⃣ Set Up Environment Variables

Create a .env file and add the following:

NEXT_PUBLIC_NEXTAUTH_URL=http://localhost:3000
MONGODB_URI=your-mongodb-uri
NEXTAUTH_SECRET=your-nextauth-secret
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret
SMTP_HOST=your_smtp_host
SMTP_USER=your_smtp_email_id
SMTP_PASS=your_smtp_password
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

4️⃣ Run the Development Server

npm run dev

Now, open http://localhost:3000 in your browser.

---

Option 2: Docker Setup (Recommended for Production) 🐳

Docker makes it easy to run Blogotypo with zero configuration. The setup includes:

• Blogotypo Next.js App (Port 3000)
• MongoDB Database (Port 27017)
• Automatic health checks
• Persistent data storage

Prerequisites

• Docker installed (Get Docker)
• Docker Compose installed (Get Docker Compose)

1️⃣ Clone the Repository

git clone https://github.com/MoinMN/blogotypo.git
cd blogotypo

2️⃣ Set Up Environment Variables

Create a .env file with the following configuration:

# Next.js & NextAuth
NEXT_PUBLIC_NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-nextauth-secret

# MongoDB (Docker)
MONGODB_URI=mongodb://admin:admin@mongodb:27017/Blogotypo?authSource=admin

# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# GitHub OAuth
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret

# SMTP Configuration
SMTP_HOST=your_smtp_host
SMTP_USER=your_smtp_email_id
SMTP_PASS=your_smtp_password

# Cloudinary
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

📝 Note: The MongoDB URI for Docker uses mongodb://admin:admin@mongodb:27017/Blogotypo?authSource=admin where mongodb is the service name defined in docker-compose.yaml.

3️⃣ Build and Run with Docker Compose

# Build and start all services
docker compose up -d

# View logs
docker compose logs -f

# Stop all services
docker compose down

# Stop and remove volumes (⚠️ deletes all data)
docker compose down -v

4️⃣ Access the Application

• Blogotypo App: http://localhost:3000
• MongoDB: localhost:27017 (username: admin, password: admin)

5️⃣ Useful Docker Commands

# Rebuild containers after code changes
docker compose up -d --build

# View running containers
docker compose ps

# Access container shell
docker exec -it blogotypo-app sh

# View MongoDB logs
docker compose logs mongodb

# Restart services
docker compose restart

# Stop specific service
docker compose stop blogotypo

---

🐳 Docker Configuration Details

Docker Architecture

The application uses a multi-stage Docker build for optimization:

1. Builder Stage: Installs dependencies and builds Next.js
2. Runner Stage: Creates a minimal production image with only necessary files

Services

Service	Container Name	Port	Description
blogotypo	blogotypo-app	3000	Next.js application
mongodb	blogotypo-db	27017	MongoDB database

Volumes

• mongo-data: Persistent storage for MongoDB data (survives container restarts)

Networks

• blogotypo-network: Bridge network for inter-container communication

Health Checks

Both services include health checks to ensure reliability:

• Blogotypo: Checks /api/health endpoint every 30s
• MongoDB: Runs mongosh ping every 10s

---

🛠 Features & Functionalities

📝 Blog System

• Create, Read, Update, Delete (CRUD) Blogs
• Rich Text Editing with Jodit
• Blog View Count Tracking
• Review System with ⭐⭐⭐⭐⭐ Ratings
• Share Blogs on Social Media
• Search & Advanced Filtering

🔒 User Authentication

• Login with Google & GitHub (NextAuth.js)
• Secure Password Encryption (bcrypt)
• Verified Users System
• Users Can Request Account Deletion

📊 State Management

• Redux & Redux Toolkit for global state management
• Centralized store for user, blog, and app state
• Async thunks for API calls and side effects
• Persistent state management for enhanced UX

🛠 Admin Features

• Manage Users (Delete & Set Verified Status)
• No Data Update Permissions for Admins

📊 Analytics & Reporting

• Graphical Stats on Blog Performance (Chart.js)
• Sort & Filter Blogs Easily

📜 Legal & Privacy Features

• Terms & Conditions, Privacy Policy, and License Pages
• GDPR-Compliant User Data Handling

---

🎨 Screenshots

Homepage	Blog Editor	Admin Dashboard

---

🚀 Deployment

Vercel Deployment

Deployed on Vercel. To deploy your own version:

vercel deploy

Docker Deployment (VPS/Cloud)

To deploy on a VPS or cloud server:

1. Install Docker and Docker Compose on your server
2. Clone the repository and set up .env file
3. Run Docker Compose:

docker compose up -d

4. Configure reverse proxy (Nginx/Caddy) for HTTPS
5. Update OAuth redirect URLs in Google/GitHub console

---

🤝 Contributing

Contributions are welcome!

1. Fork the repository
2. Create a new branch (feature/my-feature)
3. Commit your changes (git commit -m "Added a new feature")
4. Push to the branch (git push origin feature/my-feature)
5. Submit a pull request

---

🐛 Troubleshooting

Docker Issues

Problem: Port 3000 or 27017 already in use

# Find and kill the process using the port
lsof -ti:3000 | xargs kill -9
lsof -ti:27017 | xargs kill -9

Problem: MongoDB connection failed

• Ensure MongoDB service is healthy: docker-compose ps
• Check MongoDB logs: docker-compose logs mongodb
• Verify MONGODB_URI in .env matches Docker Compose configuration

Problem: Changes not reflected after rebuild

# Clear Docker cache and rebuild
docker-compose down
docker system prune -a
docker-compose up -d --build

---

📜 License

Blogotypo is licensed under its own custom license. See the full LICENSE for details.

---

🛠 Need Help?

📧 Contact: pixelmint.mail@gmail.com
🌐 Website: https://blogotypo.moinnaik.in
📣 Follow us on Socials: Twitter | LinkedIn | Instagram

---

⭐ Star this repo if you found it useful! ⭐

---

📊 Project Stats