🚀 TechBlog — Modern Blog Platform

A production-ready, full-stack blog platform built with Next.js 15, featuring authentication, comments, admin panel, categories & tags, search functionality, and a beautiful responsive UI.

---

📋 Table of Contents

• 🌟 Introduction
• 🎯 About
• ✨ Features
• 🛠️ Tech Stack
• 📱 Preview
• 🌐 URL Structure
• 📁 Project Structure
• ⚙️ Installation Guide
• 🗄️ Database Setup
• 🔧 Tools & Dependencies
• 🚀 Build & Usage
• 📚 Documentation
• ❓ FAQ
• 🤝 Contributing
• 📄 License
• ⚠️ Disclaimer
• 👨‍💻 Credits
• 📞 Contact

---

🌟 Introduction

TechBlog is a modern, feature-rich blog platform designed for developers, content creators, and tech enthusiasts. Built with cutting-edge technologies, it provides a seamless experience for both readers and content managers.

🎯 Key Highlights

• Modern Architecture: Built with Next.js 15 App Router for optimal performance
• Full-Stack Solution: Complete backend with PostgreSQL and Prisma ORM
• Beautiful UI: Responsive design with Tailwind CSS and dark mode support
• Admin Panel: Comprehensive content management system
• Authentication: Secure user authentication with NextAuth.js
• SEO Optimized: Built-in SEO features and meta tags
• Performance: Optimized for speed with static generation and caching

---

🎯 About

TechBlog is more than just a blog platform—it's a complete content management system designed for modern web applications. Whether you're a developer looking to share technical insights, a company wanting to maintain a knowledge base, or an individual building a personal brand, TechBlog provides all the tools you need.

🎨 Design Philosophy

• User-Centric: Every feature is designed with the end-user in mind
• Performance First: Optimized for speed and accessibility
• Scalable: Built to grow with your content and audience
• Maintainable: Clean, well-documented code that's easy to extend

---

✨ Features

🌐 Public Features

Feature	Description	Status
Homepage	Beautiful landing page with featured posts, trending content, and category exploration	✅
Blog Listing	Advanced filtering, sorting, and search functionality	✅
Post Reading	Rich text rendering, reading progress, table of contents, and social sharing	✅
Categories & Tags	Organized content with pagination and filtering	✅
Search	Real-time search with debouncing and result highlighting	✅
Contact Form	Validated contact form with spam protection	✅
Responsive Design	Mobile-first design that works on all devices	✅

💬 Community Features

Feature	Description	Status
User Authentication	Secure login/signup with email verification	✅
Comments System	Nested comments with moderation capabilities	✅
User Profiles	Customizable user profiles with avatars	✅
Rate Limiting	Protection against spam and abuse	✅

🔧 Admin Features

Feature	Description	Status
Dashboard	Analytics and overview of site statistics	✅
Post Management	Create, edit, schedule, and publish posts	✅
User Management	Manage users, roles, and permissions	✅
Comment Moderation	Approve, reject, or delete comments	✅
Category & Tag Management	Organize content with categories and tags	✅
Contact Management	Handle contact form submissions	✅
File Management	Upload and manage images and documents	✅

🚀 Performance Features

Feature	Description	Status
Static Generation	Pre-rendered pages for optimal performance	✅
Image Optimization	Automatic image optimization and lazy loading	✅
Caching	Intelligent caching strategies	✅
SEO Optimization	Meta tags, structured data, and sitemaps	✅
Dark Mode	Theme switching with system preference detection	✅

---

🛠️ Tech Stack

🎯 Core Technologies

Technology	Version	Purpose
Next.js	15.4.5	React framework with App Router
React	19.1.0	UI library
TypeScript	5.0+	Type safety and development experience
Prisma	6.14.0	Database ORM
PostgreSQL	13+	Primary database

🎨 Frontend

Technology	Version	Purpose
Tailwind CSS	4.0+	Utility-first CSS framework
Headless UI	2.2.7	Accessible UI components
Heroicons	2.2.0	Beautiful SVG icons
Framer Motion	12.23.12	Animation library
React Hook Form	7.62.0	Form handling

🔐 Authentication & Security

Technology	Version	Purpose
NextAuth.js	4.24.11	Authentication framework
bcryptjs	3.0.2	Password hashing
jsonwebtoken	9.0.2	JWT handling

📝 Content & Rich Text

Technology	Version	Purpose
TinyMCE	6.3.0	Rich text editor
React Markdown	10.1.0	Markdown rendering
Prism.js	1.30.0	Syntax highlighting

🛠️ Development Tools

Technology	Version	Purpose
ESLint	9.0+	Code linting
PostCSS	4.0+	CSS processing
Turbopack	Latest	Fast bundler

---

📱 Preview

🖥️ Desktop View

Modern, clean homepage with featured content and navigation

📱 Mobile View

Responsive design optimized for mobile devices

🎨 Admin Panel

Comprehensive admin dashboard with analytics and management tools

---

🌐 URL Structure

📄 Public Routes

/                           # Homepage
/blog                       # Blog listing with filters
/blog/[slug]                # Individual blog post
/categories                 # Categories listing
/categories/[slug]          # Category-specific posts
/tags                       # Tags listing
/tags/[slug]                # Tag-specific posts
/search                     # Search results
/about                      # About page
/contact                    # Contact form
/profile                    # User profile

🔧 Admin Routes

/admin                      # Admin dashboard
/admin/login                # Admin login
/admin/posts                # Post management
/admin/posts/new            # Create new post
/admin/posts/[id]/edit      # Edit post
/admin/categories           # Category management
/admin/tags                 # Tag management
/admin/users                # User management
/admin/comments             # Comment moderation
/admin/contacts             # Contact management
/admin/files                # File management
/admin/analytics            # Analytics dashboard

🔌 API Routes

/api/auth/*                 # Authentication endpoints
/api/posts                  # Post CRUD operations
/api/categories             # Category operations
/api/tags                   # Tag operations
/api/comments               # Comment operations
/api/contact                # Contact form submission
/api/admin/*                # Admin-specific APIs
/api/upload                 # File upload handling

---

📁 Project Structure

blog-website-main/
├── 📁 src/
│   ├── 📁 app/                    # Next.js App Router
│   │   ├── 📁 (public)/           # Public routes
│   │   │   ├── 📄 page.js         # Homepage
│   │   │   ├── 📁 blog/           # Blog pages
│   │   │   ├── 📁 categories/     # Category pages
│   │   │   ├── 📁 tags/           # Tag pages
│   │   │   ├── 📁 about/          # About page
│   │   │   ├── 📁 contact/        # Contact page
│   │   │   └── 📁 profile/        # User profile
│   │   ├── 📁 admin/              # Admin panel
│   │   │   ├── 📄 layout.js       # Admin layout
│   │   │   ├── 📄 page.js         # Dashboard
│   │   │   ├── 📁 posts/          # Post management
│   │   │   ├── 📁 categories/     # Category management
│   │   │   ├── 📁 tags/           # Tag management
│   │   │   ├── 📁 users/          # User management
│   │   │   ├── 📁 comments/       # Comment moderation
│   │   │   └── 📁 contacts/       # Contact management
│   │   └── 📁 api/                # API routes
│   │       ├── 📁 auth/           # Authentication APIs
│   │       ├── 📁 admin/          # Admin APIs
│   │       ├── 📁 posts/          # Post APIs
│   │       ├── 📁 categories/     # Category APIs
│   │       ├── 📁 tags/           # Tag APIs
│   │       ├── 📁 comments/       # Comment APIs
│   │       └── 📁 contact/        # Contact APIs
│   ├── 📁 components/             # React components
│   │   ├── 📁 blog/               # Blog-specific components
│   │   ├── 📁 admin/              # Admin components
│   │   ├── 📁 ui/                 # Reusable UI components
│   │   ├── 📁 layout/             # Layout components
│   │   ├── 📁 forms/              # Form components
│   │   ├── 📁 auth/               # Authentication components
│   │   └── 📁 contact/            # Contact components
│   ├── 📁 lib/                    # Utility libraries
│   │   ├── 📄 db.js               # Database configuration
│   │   ├── 📄 auth.js             # Authentication utilities
│   │   ├── 📄 utils.js            # General utilities
│   │   ├── 📄 constants.js        # Application constants
│   │   └── 📄 validation.js       # Validation schemas
│   ├── 📁 hooks/                  # Custom React hooks
│   ├── 📁 styles/                 # Global styles
│   └── 📄 middleware.js           # Next.js middleware
├── 📁 prisma/                     # Database schema
│   └── 📄 schema.prisma           # Prisma schema definition
├── 📁 public/                     # Static assets
│   └── 📁 uploads/                # User uploads
├── 📁 scripts/                    # Utility scripts
│   ├── 📁 dummy_data/             # Seed data scripts
│   ├── 📄 create-admin.js         # Admin user creation
│   └── 📄 setup-env.js            # Environment setup
├── 📄 package.json                # Dependencies and scripts
├── 📄 next.config.mjs             # Next.js configuration
├── 📄 tailwind.config.js          # Tailwind CSS configuration
└── 📄 README.md                   # This file

---

⚙️ Installation Guide

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18.0.0 or higher)
• npm or yarn or pnpm
• PostgreSQL (v13.0 or higher)
• Git

🔧 Step-by-Step Installation

1. Clone the Repository

# Clone the repository
git clone https://github.com/dhruvpatel16120/blog-website.git

# Navigate to the project directory
cd blog-website

2. Install Dependencies

# Install dependencies using npm
npm install

# Or using yarn
yarn install

# Or using pnpm
pnpm install

3. Environment Setup

Use the interactive setup script to configure your environment:

# Run the setup wizard
npm run setup

This will guide you through:

• Database configuration (Railway, Supabase, Neon, etc.)
• Email setup (Gmail, Outlook, custom SMTP)
• TinyMCE editor configuration
• Maintenance mode settings
• Security and authentication setup

Alternatively, create a .env.local file manually:

# Copy the example environment file
cp .env.example .env.local

4. Configure Environment Variables

Edit .env.local with your configuration:

# Database Configuration
DATABASE_URL="postgresql://username:password@localhost:5432/techblog?schema=public"

# NextAuth Configuration
NEXTAUTH_SECRET="your-super-secret-key-here"
NEXTAUTH_URL="http://localhost:3000"

# Email Configuration (Optional)
SMTP_HOST="smtp.gmail.com"
SMTP_PORT="587"
SMTP_USER="[email protected]"
SMTP_PASS="your-app-password"
EMAIL_FROM="TechBlog <[email protected]>"

# Application Configuration
NEXT_PUBLIC_APP_URL="http://localhost:3000"
MAINTENANCE_MODE="false"
MAINTENANCE_MESSAGE="Site is under maintenance"

# TinyMCE Editor (Optional)
NEXT_PUBLIC_TINYMCE_API_KEY="your-tinymce-api-key"

5. Database Setup

# Generate Prisma client
npm run db:generate

# Push the schema to your database
npm run db:push

# (Optional) Run migrations
npm run db:migrate

6. Create Admin User

# Create an admin user
npm run create-admin

7. Seed Data (Optional)

# Seed all data (categories, tags, users, posts)
npm run seed:all

# Or seed individually
npm run seed:categories
npm run seed:tags
npm run seed:users
npm run seed:posts

8. Start Development Server

# Start the development server
npm run dev

Your application will be available at http://localhost:3000

---

🚀 Quick Setup Guides

🗄️ Railway PostgreSQL Setup

1. Create Railway Account

   • Visit railway.app
   • Sign up with GitHub or Google

2. Create New Project

   • Click "New Project"
   • Select "Provision PostgreSQL"

3. Get Database URL

   • Click on your PostgreSQL database
   • Go to "variables" tab
   • Copy the "DATABASE_PUBLIC_URL"

4. Configure in Setup Script

   npm run setup
   # Select "PostgreSQL (Railway/Heroku/AWS)"
   # Paste your Railway DATABASE_URL

📧 Email Setup Guide

Gmail (Recommended for Development)

1. Enable 2-Factor Authentication

   • Go to Google Account settings
   • Enable 2FA on your account

2. Generate App Password

   • Go to Security > App Passwords or search App passwords
   • Select "Mail" and "Other (Custom name)"
   • Copy the generated password

3. Configure in Setup Script

   npm run setup
   # Select "Gmail (Recommended for development)"
   # Use your Gmail address and App Password

Custom SMTP Server

EMAIL_SERVER_HOST="smtp.yourprovider.com"
EMAIL_SERVER_PORT="587"
EMAIL_SERVER_USER="[email protected]"
EMAIL_SERVER_PASSWORD="your-password"
EMAIL_FROM="[email protected]"

📝 TinyMCE Editor Setup

1. Get Free API Key

   • Visit tiny.cloud
   • Create a free account with github
   • Get your API key from dashboard

2. Configure in Setup Script

   npm run setup
   # Select "TinyMCE (Recommended)"
   # Enter your API key when prompted

3. Manual Configuration

   NEXT_PUBLIC_TINYMCE_API_KEY="your-api-key-here"

🔧 Maintenance Mode

The application includes a maintenance mode feature:

# Enable/disable maintenance mode
MAINTENANCE_MODE="true"
MAINTENANCE_MESSAGE="Site is under maintenance"

Usage:

• Set MAINTENANCE_MODE="true" to enable maintenance mode
• Customize the message with MAINTENANCE_MESSAGE
• Users will see a maintenance page instead of the site

---

🗄️ Database Setup

📊 Database Schema

The application uses PostgreSQL with Prisma ORM. Here's an overview of the main models:

👥 User Management

-- Users table
CREATE TABLE users (
  id TEXT PRIMARY KEY,
  username TEXT UNIQUE NOT NULL,
  email TEXT UNIQUE NOT NULL,
  fullName TEXT NOT NULL,
  password TEXT NOT NULL,
  avatar TEXT,
  bio TEXT,
  website TEXT,
  location TEXT,
  emailVerified TIMESTAMP,
  role TEXT DEFAULT 'USER',
  isActive BOOLEAN DEFAULT true,
  lastLogin TIMESTAMP,
  createdAt TIMESTAMP DEFAULT NOW(),
  updatedAt TIMESTAMP DEFAULT NOW()
);

-- Admins table
CREATE TABLE admins (
  id TEXT PRIMARY KEY,
  username TEXT UNIQUE NOT NULL,
  email TEXT UNIQUE NOT NULL,
  fullName TEXT NOT NULL,
  password TEXT NOT NULL,
  avatar TEXT,
  role TEXT DEFAULT 'ADMIN',
  permissions TEXT,
  isActive BOOLEAN DEFAULT true,
  lastLogin TIMESTAMP,
  loginAttempts INTEGER DEFAULT 0,
  lockedUntil TIMESTAMP,
  createdAt TIMESTAMP DEFAULT NOW(),
  updatedAt TIMESTAMP DEFAULT NOW()
);

📝 Content Management

-- Posts table
CREATE TABLE posts (
  id TEXT PRIMARY KEY,
  title TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  excerpt TEXT,
  content TEXT NOT NULL,
  coverImage TEXT,
  published BOOLEAN DEFAULT false,
  featured BOOLEAN DEFAULT false,
  viewCount INTEGER DEFAULT 0,
  readTime INTEGER,
  wordCount INTEGER,
  charCount INTEGER,
  authorId TEXT NOT NULL,
  createdAt TIMESTAMP DEFAULT NOW(),
  updatedAt TIMESTAMP DEFAULT NOW(),
  publishedAt TIMESTAMP,
  seoTitle TEXT,
  seoDescription TEXT,
  seoImage TEXT,
  metaKeywords TEXT,
  contentType TEXT DEFAULT 'html'
);

-- Categories table
CREATE TABLE categories (
  id TEXT PRIMARY KEY,
  name TEXT UNIQUE NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  description TEXT,
  color TEXT,
  icon TEXT,
  createdAt TIMESTAMP DEFAULT NOW(),
  updatedAt TIMESTAMP DEFAULT NOW()
);

-- Tags table
CREATE TABLE tags (
  id TEXT PRIMARY KEY,
  name TEXT UNIQUE NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  color TEXT,
  createdAt TIMESTAMP DEFAULT NOW(),
  updatedAt TIMESTAMP DEFAULT NOW()
);

💬 Community Features

-- Comments table
CREATE TABLE comments (
  id TEXT PRIMARY KEY,
  content TEXT NOT NULL,
  authorId TEXT NOT NULL,
  postId TEXT NOT NULL,
  parentId TEXT,
  approved BOOLEAN DEFAULT false,
  createdAt TIMESTAMP DEFAULT NOW(),
  updatedAt TIMESTAMP DEFAULT NOW()
);

-- Likes table
CREATE TABLE likes (
  id TEXT PRIMARY KEY,
  userId TEXT NOT NULL,
  postId TEXT,
  commentId TEXT,
  createdAt TIMESTAMP DEFAULT NOW()
);

🔧 Database Commands

# Generate Prisma client
npx prisma generate

# Push schema changes
npx prisma db push

# Create migration
npx prisma migrate dev --name init

# Reset database
npx prisma migrate reset

# Open Prisma Studio
npx prisma studio

# Seed database
npm run seed:all

---

🔧 Tools & Dependencies

📦 Core Dependencies

Package	Version	Purpose
next	15.4.5	React framework
react	19.1.0	UI library
react-dom	19.1.0	React DOM
@prisma/client	6.13.0	Database client
next-auth	4.24.11	Authentication

🎨 UI & Styling

Package	Version	Purpose
tailwindcss	4.0+	CSS framework
@headlessui/react	2.2.7	UI components
@heroicons/react	2.2.0	Icons
framer-motion	12.23.12	Animations
clsx	2.1.1	Conditional classes

📝 Forms & Validation

Package	Version	Purpose
react-hook-form	7.62.0	Form handling
@hookform/resolvers	5.2.1	Form validation
zod	4.0.16	Schema validation

🔐 Security & Auth

Package	Version	Purpose
bcryptjs	3.0.2	Password hashing
jsonwebtoken	9.0.2	JWT handling
@next-auth/prisma-adapter	1.0.7	Auth adapter

📧 Email & Communication

Package	Version	Purpose
nodemailer	6.10.1	Email sending
dot-env	0.0.1	Environment variables

🛠️ Development Tools

Package	Version	Purpose
eslint	9.0+	Code linting
@eslint/eslintrc	3.0+	ESLint configuration
eslint-config-next	15.4.5	Next.js ESLint config

---

🚀 Build & Usage

🔧 Development

# Start development server
npm run dev

# Run with Turbopack (faster)
npm run dev -- --turbopack

# Lint code
npm run lint

# Type check (if using TypeScript)
npm run type-check

🏗️ Production Build

# Build for production
npm run build

# Start production server
npm start

# Analyze bundle size
npm run analyze

Create build (fix: "Could not find a production build in the '.next' directory")

If you see this error when starting the server, it means the production build hasn't been created yet. Run:

npm run build && npm start

Notes:

• Ensure your environment variables (e.g., DATABASE_URL, NEXTAUTH_URL, NEXTAUTH_SECRET) are set.
• The build script already runs prisma generate. Make sure your database is reachable in production.
• Re-run npm run build after dependency or code changes before npm start.

📊 Available Scripts

Script	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint
npm run setup	Setup environment
npm run create-admin	Create admin user
npm run seed:all	Seed all data
npm run db:generate	Generate Prisma client
npm run db:push	Push schema to database
npm run db:studio	Open Prisma Studio

🌐 Deployment

Vercel (Recommended)

1. Connect Repository

   # Install Vercel CLI
   npm i -g vercel
   
   # Deploy
   vercel

2. Environment Variables

   • Set all environment variables in Vercel dashboard
   • Ensure DATABASE_URL points to production database
   • Set NEXTAUTH_URL to your production domain

3. Database Setup

   # Run migrations
   npx prisma migrate deploy
   
   # Seed data (if needed)
   npm run seed:all

Other Platforms

The application can be deployed to any platform that supports Node.js:

• Netlify: Configure build settings for Next.js
• Railway: Direct deployment with PostgreSQL
• DigitalOcean: App Platform deployment
• AWS: Elastic Beanstalk or ECS

---

📚 Documentation

🎯 Getting Started

1. Quick Start: Follow the Installation Guide
2. Configuration: Set up Environment Variables
3. Database: Configure Database Setup
4. Deployment: Deploy to Production

🔧 Configuration

Environment Variables

Variable	Required	Description	Example
DATABASE_URL	Yes	PostgreSQL connection string	postgresql://user:pass@localhost:5432/db
NEXTAUTH_SECRET	Yes	Secret for NextAuth.js	your-secret-key
NEXTAUTH_URL	Yes	Application URL	http://localhost:3000
SMTP_HOST	No	SMTP server host	smtp.gmail.com
SMTP_PORT	No	SMTP server port	587
SMTP_USER	No	SMTP username	[email protected]
SMTP_PASS	No	SMTP password	your-app-password
EMAIL_FROM	No	From email address	[email protected]

Customization

1. Styling: Modify tailwind.config.js for custom themes
2. Components: Edit components in src/components/
3. API Routes: Customize API endpoints in src/app/api/
4. Database: Update schema in prisma/schema.prisma

🔌 API Reference

Authentication Endpoints

// Sign in
POST /api/auth/signin
{
  "email": "[email protected]",
  "password": "password"
}

// Sign up
POST /api/auth/register
{
  "username": "username",
  "email": "[email protected]",
  "password": "password",
  "fullName": "Full Name"
}

Post Endpoints

// Get all posts
GET /api/posts?page=1&limit=10&category=tech

// Get single post
GET /api/posts/[slug]

// Create post (admin only)
POST /api/admin/posts
{
  "title": "Post Title",
  "content": "Post content",
  "excerpt": "Post excerpt",
  "published": true
}

Comment Endpoints

// Get comments for post
GET /api/comments?postId=post-id

// Create comment
POST /api/comments
{
  "content": "Comment content",
  "postId": "post-id"
}

🎨 Component Library

The application includes a comprehensive component library:

UI Components

import { Button, Card, Input, Modal, Toast } from '@/components/ui'

// Usage examples
<Button variant="primary" size="lg">Click me</Button>
<Card className="p-6">Content</Card>
<Input placeholder="Enter text" />
<Modal isOpen={isOpen} onClose={onClose}>Content</Modal>
<Toast message="Success!" type="success" />

Blog Components

import { BlogCard, BlogGrid, Comments, SocialShare } from '@/components/blog'

// Usage examples
<BlogGrid posts={posts} />
<BlogCard post={post} />
<Comments postId={postId} />
<SocialShare url={url} title={title} />

---

❓ FAQ

Frequently Asked Questions - Get answers to common questions about TechBlog

---

🚀 Getting Started

🤔 What is TechBlog?

TechBlog is a modern, full-stack blog platform built with Next.js 15, featuring authentication, comments, admin panel, and a beautiful responsive UI. It's designed for developers, content creators, and tech enthusiasts who want a professional blogging solution.

💸 Is TechBlog free to use?

Yes! TechBlog is completely open-source and free to use. You can:

• Deploy it on your own infrastructure
• Use it for personal or commercial projects
• Modify and customize as needed
• Contribute to the project

🗄️ What databases are supported?

Currently, TechBlog supports PostgreSQL as the primary database. The application uses Prisma ORM, which makes it easy to add support for other databases in the future.

Supported PostgreSQL providers:

• Railway
• Supabase
• Neon
• Heroku
• AWS RDS
• Local PostgreSQL

---

🔧 Technical Setup

🗄️ How do I set up the database?

Recommended: Use the interactive setup script

npm run setup

This will guide you through database configuration for:

• Railway, Supabase, Neon
• Local PostgreSQL
• Custom database providers

Manual setup: Follow the Database Setup guide.

👑 How do I create an admin user?

After setting up your environment variables:

npm run create-admin

This will prompt you to:

• Enter admin username
• Set admin email
• Create secure password
• Configure permissions

📧 How do I configure email and TinyMCE?

Use the setup wizard:

npm run setup

Email providers supported:

• Gmail (with App Password)
• Outlook/Hotmail
• Yahoo Mail
• Custom SMTP servers

TinyMCE setup:

1. Get free API key from tiny.cloud
2. Enter key during setup
3. Or manually add to .env:

   NEXT_PUBLIC_TINYMCE_API_KEY="your-api-key"

🎨 How do I customize the theme?

Customize Tailwind CSS:

• Modify tailwind.config.js for custom themes
• Edit CSS variables in src/styles/
• Update color schemes and fonts

Component customization:

• Edit components in src/components/ui/
• Modify layout components
• Update branding and logos

---

🚀 Deployment & Hosting

☁️ Can I deploy to Vercel?

Yes, but with limitations!

✅ What works:

• Basic blog functionality
• Static pages and API routes
• Authentication and user management

⚠️ What may not work:

• File uploads (use external storage)
• Email services (use external providers)
• Long-running database operations

Recommendation: Use Vercel for development/testing, consider VPS for production.

🔑 How do I set up environment variables in production?

Vercel:

1. Go to Project Settings > Environment Variables
2. Add all variables from your .env file
3. Ensure NEXTAUTH_URL matches your domain

Other platforms:

• Set variables in your hosting dashboard
• Use platform-specific environment management
• Consider using .env.production for production settings

🔄 How do I handle database migrations in production?

Safe migration process:

# Backup your database first
# Run migrations
npx prisma migrate deploy

# Verify changes
npx prisma studio

Best practices:

• Always backup before migrating
• Test migrations on staging first
• Use --dry-run to preview changes
• Monitor migration logs

---

🐛 Troubleshooting

❌ Database connection errors

Common causes:

• Invalid DATABASE_URL format
• Database server not running
• Firewall blocking connections
• Incorrect credentials

Solutions:

1. Verify your connection string format
2. Check database server status
3. Test connection with psql or database client
4. Verify network access and credentials

🔐 Authentication not working

Check these variables:

NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"

Common issues:

• Missing or invalid NEXTAUTH_SECRET
• Incorrect NEXTAUTH_URL (must match your domain)
• Database connection problems
• Session configuration issues

🖼️ Images not loading

Check image configuration:

1. Verify domains in next.config.mjs
2. Ensure image URLs are accessible
3. Check file permissions and paths
4. Verify image format support

For external images:

• Add domain to next.config.mjs
• Ensure CORS is properly configured
• Check image hosting service status

👑 Admin panel not accessible

Verification steps:

1. ✅ Created admin user with npm run create-admin
2. ✅ Logged in with admin credentials
3. ✅ Admin role properly assigned
4. ✅ No middleware blocking access

If still having issues:

• Check browser console for errors
• Verify session cookies
• Check admin route protection
• Review authentication middleware

---

💡 Pro Tips

🚀 Performance optimization

• Use Next.js Image component for optimized images
• Implement proper caching strategies
• Optimize database queries with indexes
• Use static generation where possible
• Monitor bundle sizes and optimize imports

🔒 Security best practices

• Regularly update dependencies
• Use strong, unique secrets
• Implement rate limiting
• Validate all user inputs
• Use HTTPS in production
• Regular security audits

📱 Mobile optimization

• Test on various devices
• Optimize touch interactions
• Ensure responsive design
• Test performance on slow networks
• Validate mobile SEO

---

Still have questions? Open an issue or start a discussion on GitHub!

---

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

🎯 How to Contribute

1. Fork the Repository

   git clone https://github.com/dhruvpatel16120/blog-website.git
   cd blog-website

2. Create a Feature Branch

   git checkout -b feature/amazing-feature

3. Make Your Changes

   • Write clean, well-documented code
   • Follow the existing code style
   • Add tests for new features
   • Update documentation as needed

4. Commit Your Changes

   git commit -m "feat: add amazing feature"

5. Push to Your Fork

   git push origin feature/amazing-feature

6. Create a Pull Request

   • Provide a clear description of your changes
   • Include screenshots if applicable
   • Reference any related issues

📋 Contribution Guidelines

Code Style

• Use ESLint and Prettier for code formatting
• Follow Conventional Commits for commit messages
• Write TypeScript when possible
• Add JSDoc comments for functions and components

Pull Request Process

1. Description: Provide a clear description of your changes
2. Testing: Ensure all tests pass
3. Documentation: Update README and other docs as needed
4. Screenshots: Include screenshots for UI changes
5. Review: Address any feedback from maintainers

Issue Reporting

When reporting issues, please include:

• Description: Clear description of the problem
• Steps to Reproduce: Step-by-step instructions
• Expected Behavior: What you expected to happen
• Actual Behavior: What actually happened
• Environment: OS, browser, Node.js version
• Screenshots: Visual evidence if applicable

🏷️ Issue Labels

• bug - Something isn't working
• enhancement - New feature or request
• documentation - Improvements to documentation
• good first issue - Good for newcomers
• help wanted - Extra attention is needed

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📜 License Summary

MIT License

Copyright (c) 2024 Dhruv Patel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

⚠️ Disclaimer

📋 Important Notes

• Educational Purpose: This project is created for educational and demonstration purposes
• No Warranty: The software is provided "as is" without warranty of any kind
• Use at Your Own Risk: Users are responsible for their own implementation and usage
• Third-Party Services: The project may use third-party services that have their own terms of service

🚨 Deployment Platform Limitations

⚠️ IMPORTANT: Some functionality may not work properly on Vercel and other serverless platforms

• File Uploads: May have issues with serverless functions and temporary storage
• Email Services: SMTP connections may timeout on serverless platforms
• Database Operations: Long-running queries may be interrupted
• Real-time Features: WebSocket connections are not supported on serverless

✅ Recommended Deployment Options:

• Local Development: Full functionality guaranteed
• VPS/Dedicated Server: Optimal performance and reliability
• Railway/Render: Better support for Node.js applications
• DigitalOcean App Platform: Good balance of features and reliability

🔧 Vercel Workarounds:

• Use external file storage (AWS S3, Cloudinary)
• Implement email via external services (SendGrid, Mailgun)
• Optimize database queries for serverless execution
• Consider using Vercel's Edge Functions for better performance

🔒 Security Considerations

• Environment Variables: Never commit sensitive information like API keys or database credentials
• Database Security: Use strong passwords and secure database configurations
• Authentication: Implement proper security measures for user authentication
• Input Validation: Always validate and sanitize user inputs
• Regular Updates: Keep dependencies updated to patch security vulnerabilities

📊 Performance Considerations

• Image Optimization: Use appropriate image formats and sizes
• Caching: Implement proper caching strategies for better performance
• Database Indexing: Optimize database queries with proper indexing
• Bundle Size: Monitor and optimize JavaScript bundle sizes

---

👨‍💻 Credits

🎨 Design & Development

Created by: Dhruv Patel

🛠️ Technologies Used

• Next.js - React framework
• Prisma - Database ORM
• Tailwind CSS - Styling framework
• NextAuth.js - Authentication
• PostgreSQL - Database
• Framer Motion - Animations

🎯 Inspiration & Resources

• Next.js Documentation - nextjs.org
• Prisma Documentation - prisma.io
• Tailwind CSS - tailwindcss.com
• NextAuth.js - authjs.dev

📚 Learning Resources

• React Documentation - reactjs.org
• TypeScript Handbook - typescriptlang.org
• PostgreSQL Tutorial - postgresqltutorial.com

🎨 Icons & Assets

• Heroicons - Beautiful hand-crafted SVG icons
• Unsplash - High-quality stock photos
• Figma - Design and prototyping tool

---

📞 Contact

👨‍💻 Developer

Dhruv Patel

• GitHub: @dhruvpatel16120
• LinkedIn: dhruvpatel16120
• Portfolio: dhruvpatelofficial.vercel.app

🌐 Project Links

• Live Demo: techblog-website.vercel.app
• Repository: github.com/dhruvpatel16120/blog-website-main
• Issues: GitHub Issues
• Discussions: GitHub Discussions

💬 Support

• Documentation: Check this README and the code comments
• Issues: Report bugs and request features on GitHub
• Discussions: Ask questions and share ideas
• Email: For private inquiries, use the contact form on the live site

---

Made with ❤️ using Next.js, Prisma, and Tailwind CSS

If you find this project helpful, please give it a ⭐ star on GitHub!