Developer's Blog Platform – Next.js, MongoDB, Prisma, TanStack React Query FullStack Project (Blog for Coding Errors & Solutions)

A full-stack developer blog platform where programmers share real-world coding errors, bugs, and their solutions. Built with Next.js 16, React 19, TypeScript, MongoDB, Prisma, and TanStack React Query.

Live-Demo: https://dev-bug-coder-blog.vercel.app/

📋 Table of Contents

Overview
Features
Technology Stack
Project Structure
Getting Started
Environment Variables
Installation & Setup
Running the Project
API Endpoints
Components Documentation
Custom Hooks
Database Schema
Reusing Components
Deployment
Keywords
Conclusion

🎯 Overview

Dev-Bug-Coder-Blog is a modern, full-stack blogging platform designed for developers to share coding errors, bugs, and solutions. It features real-time interactions, optimistic UI updates, nested comments, image uploads, and a comprehensive notification system.

Key Highlights

Server-Side Rendering (SSR) with Next.js App Router
Client-Side Rendering (CSR) with React Query for instant updates
Optimistic Updates for seamless user experience
Real-time Notifications system
Nested Comments with threading support
Image Upload with ImageKit integration
Authentication with JWT tokens
Responsive Design with Tailwind CSS

✨ Features

Core Functionality

User Authentication
- Registration with avatar upload
- Login/Logout
- Password reset via email
- JWT-based session management
Post Management
- Create, edit, and delete posts
- Rich text content with code snippets
- Image/screenshot uploads
- Tag system for categorization
- Like and helpful marks
- Save/unsave posts
Comments System
- Nested comment threads
- Reply to comments
- Like comments
- Edit and delete own comments
- Image uploads in comments
Notifications
- Real-time notifications for interactions
- Mark as read/unread
- Notification count badge
Search & Filter
- Search posts by title, content, tags
- Filter by tags
- Recent posts sidebar
- Popular topics
Admin Features
- View and manage reported posts
- Admin dashboard

🛠 Technology Stack

Frontend

Next.js 16.1.1 - React framework with App Router
React 19.0.0 - UI library
TypeScript 5.8.3 - Type safety
Tailwind CSS 3.4.17 - Utility-first CSS
TanStack React Query 5.62.8 - Data fetching and caching
ShadCN UI - Reusable component library
Radix UI - Accessible component primitives

Backend

Next.js API Routes - Serverless API endpoints
Prisma 6.19.1 - Type-safe ORM
MongoDB - NoSQL database
JWT - Authentication tokens
bcrypt - Password hashing

Services & Tools

ImageKit - Image hosting and optimization
Nodemailer - Email sending (password reset)
React Icons - Icon library
Lucide React - Additional icons

📁 Project Structure

dev-blog/
├── app/                          # Next.js App Router
│   ├── api/                      # API routes
│   │   ├── auth/                 # Authentication endpoints
│   │   ├── posts/                # Post CRUD operations
│   │   ├── comments/             # Comment operations
│   │   ├── notifications/        # Notification endpoints
│   │   ├── upload/               # Image upload
│   │   └── users/                # User endpoints
│   ├── (pages)/                  # Public pages
│   │   ├── page.tsx              # Home page
│   │   ├── posts/                # Posts listing
│   │   ├── post/[id]/            # Post details
│   │   ├── login/                # Login page
│   │   ├── register/             # Registration page
│   │   ├── create-post/          # Create post
│   │   ├── edit-post/[id]/       # Edit post
│   │   ├── saved-posts/          # Saved posts
│   │   ├── notifications/        # Notifications page
│   │   └── admin/                # Admin pages
│   └── layout.tsx                # Root layout
├── components/                    # React components
│   ├── ui/                       # ShadCN UI components
│   ├── providers/                 # Context providers
│   └── (feature components)      # Feature-specific components
├── hooks/                         # Custom React hooks
│   ├── use-posts.ts              # Post operations
│   ├── use-auth.ts               # Authentication
│   ├── use-comments.ts           # Comments
│   └── use-notifications.ts      # Notifications
├── lib/                          # Utility libraries
│   ├── prisma.ts                 # Prisma client
│   ├── query-client.ts           # React Query config
│   ├── imagekit.ts               # ImageKit integration
│   └── utils.ts                  # Helper functions
├── types/                         # TypeScript types
├── prisma/                       # Database schema
│   └── schema.prisma
└── public/                       # Static assets

🚀 Getting Started

Prerequisites

Node.js 18.x or higher
npm or yarn package manager
MongoDB database (local or cloud)
ImageKit account (for image uploads)
Gmail account (for email sending)

🔐 Environment Variables

Create a .env file in the root directory with the following variables:

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Database
# MongoDB connection string
# Format: mongodb://username:password@host:port/database?authSource=admin
DATABASE_URL="mongodb://localhost:27017/dev-blog"

# JWT Secret
# Generate a secure random string (minimum 256 characters recommended)
# You can generate one using: openssl rand -base64 32
JWT_SECRET="your-super-secret-jwt-key-change-this-in-production"

# Admin Configuration
# Email address for admin user (exposed to client for admin checks)
NEXT_PUBLIC_ADMIN_EMAIL="[email protected]"

# Email Configuration (for password reset)
# Gmail SMTP credentials
EMAIL_USER="[email protected]"
EMAIL_PASS="your-app-specific-password"

# ImageKit Configuration
# Get these from your ImageKit dashboard
NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY="your-imagekit-public-key"
IMAGEKIT_PRIVATE_KEY="your-imagekit-private-key"
NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT="https://ik.imagekit.io/your-imagekit-id"

How to Get Environment Variables

1. MongoDB Connection String

Local MongoDB:

DATABASE_URL="mongodb://localhost:27017/dev-blog"

MongoDB Atlas (Cloud):

Create account at MongoDB Atlas
Create a cluster
Get connection string from "Connect" button
Replace <password> with your database password

DATABASE_URL="mongodb+srv://username:[email protected]/dev-blog?retryWrites=true&w=majority"

2. JWT Secret

Generate a secure random string:

# Using OpenSSL
openssl rand -base64 32

# Or use Node.js
node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"

3. Gmail App Password (for Email)

Enable 2-Factor Authentication on your Google Account
Go to Google App Passwords
Create a new app password for "Mail"
Use this password in EMAIL_PASS

4. ImageKit Credentials

Sign up at ImageKit
Create a new project
Get credentials from Dashboard → Developer Options
Copy Public Key, Private Key, and URL Endpoint

📦 Installation & Setup

Step 1: Clone the Repository

git clone <repository-url>
cd dev-blog

Step 2: Install Dependencies

npm install

Step 3: Set Up Environment Variables

Copy .env.example to .env:
```
cp .env.example .env
```
Fill in all required environment variables (see Environment Variables section)

Step 4: Set Up Database

Start MongoDB (if using local):

# macOS (using Homebrew)
brew services start mongodb-community

# Linux
sudo systemctl start mongod

# Windows
# Start MongoDB service from Services panel

Generate Prisma Client:
```
npm run prisma:generate
```
Push Database Schema:
```
npm run prisma:push
```
This creates all tables/collections in your MongoDB database.

Step 5: Run Development Server

npm run dev

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

🏃 Running the Project

Development Mode

npm run dev

Runs the app in development mode with Turbopack for faster builds.

Production Build

# Build the application
npm run build

# Start production server
npm start

Other Commands

# Lint code
npm run lint

# Generate Prisma Client
npm run prisma:generate

# Push database schema changes
npm run prisma:push

🔌 API Endpoints

Authentication

Method	Endpoint	Description
POST	`/api/auth/register`	Register new user
POST	`/api/auth/login`	Login user
GET	`/api/auth/validate`	Validate JWT token
GET	`/api/auth/me`	Get current user
POST	`/api/auth/forgot-password`	Request password reset
POST	`/api/auth/reset-password`	Reset password with token

Posts

Method	Endpoint	Description
GET	`/api/posts`	Get all posts (with filters)
GET	`/api/posts/[id]`	Get single post
POST	`/api/posts`	Create new post
PUT	`/api/posts/[id]`	Update post
DELETE	`/api/posts/[id]`	Delete post
POST	`/api/posts/[id]/like`	Like/unlike post
POST	`/api/posts/[id]/helpful`	Mark post as helpful
POST	`/api/posts/[id]/save`	Save post
POST	`/api/posts/[id]/unsave`	Unsave post
POST	`/api/posts/[id]/report`	Report post

Comments

Method	Endpoint	Description
GET	`/api/comments/post/[postId]`	Get comments for post
POST	`/api/comments/post/[postId]`	Create comment
PUT	`/api/comments/[id]`	Update comment
DELETE	`/api/comments/[id]`	Delete comment
POST	`/api/comments/[id]/like`	Like/unlike comment
POST	`/api/comments/[id]/helpful`	Mark comment as helpful

Notifications

Method	Endpoint	Description
GET	`/api/notifications`	Get user notifications
PUT	`/api/notifications/[id]/mark-read`	Mark notification as read
PUT	`/api/notifications/mark-all-read`	Mark all as read
DELETE	`/api/notifications/[id]`	Delete notification

Upload

Method	Endpoint	Description
POST	`/api/upload`	Upload image to ImageKit

Users

Method	Endpoint	Description
GET	`/api/users/me/saved-posts`	Get saved posts
PUT	`/api/users/me`	Update user profile

🧩 Components Documentation

Core Components

PostCard

Displays a post card with all interactions.

import PostCard from "@/components/PostCard";

<PostCard
  post={{
    id: "post-id",
    title: "Post Title",
    description: "Description",
    // ... other post fields
  }}
  saved={false}
  onUnsave={(postId) => {
    /* handle unsave */
  }}
  onDelete={(postId) => {
    /* handle delete */
  }}
  onLikeHelpfulUpdate={(postId, data) => {
    /* handle update */
  }}
/>;

Props:

post: Post object with all post data
saved: Boolean indicating if post is saved
onUnsave: Callback when post is unsaved
onDelete: Callback when post is deleted
onLikeHelpfulUpdate: Callback for like/helpful updates

CommentSection

Nested comment system with replies.

import CommentSection from "@/components/CommentSection";

<CommentSection
  postId="post-id"
  parentId="comment-id" // Optional: for nested replies
/>;

Props:

postId: ID of the post
parentId: Optional parent comment ID for nested replies

ConfirmDialog

Reusable confirmation dialog (replaces window.confirm).

import { ConfirmDialog } from "@/components/ConfirmDialog";

const [showConfirm, setShowConfirm] = useState(false);

<ConfirmDialog
  open={showConfirm}
  onOpenChange={setShowConfirm}
  title="Delete Post"
  description="Are you sure you want to delete this post?"
  confirmText="Delete"
  cancelText="Cancel"
  onConfirm={() => deletePost()}
  variant="destructive" // "default" | "destructive"
/>;

InputDialog

Reusable input dialog (replaces window.prompt).

import { InputDialog } from "@/components/InputDialog";

const [showDialog, setShowDialog] = useState(false);

<InputDialog
  open={showDialog}
  onOpenChange={setShowDialog}
  title="Report Post"
  description="Why are you reporting this post?"
  placeholder="Enter reason..."
  onConfirm={(value) => reportPost(value)}
  type="textarea" // "text" | "textarea"
/>;

UI Components (ShadCN)

All UI components are in components/ui/:

skeleton.tsx - Loading skeletons
toast.tsx - Toast notifications
dialog.tsx - Dialog component
alert-dialog.tsx - Alert dialog component

🎣 Custom Hooks

usePosts

Fetch and manage posts with React Query.

import { usePosts, usePost, useCreatePost } from "@/hooks/use-posts";

// Fetch all posts
const { data: posts, isLoading } = usePosts({
  tag: "react", // Optional filter
  search: "error", // Optional search
});

// Fetch single post
const { data: post } = usePost("post-id");

// Create post
const createPost = useCreatePost();
createPost.mutate(formData);

Available Hooks:

usePosts() - Get all posts
usePost(id) - Get single post
useSavedPosts() - Get saved posts
useCreatePost() - Create post mutation
useUpdatePost() - Update post mutation
useDeletePost() - Delete post mutation
useLikePost() - Like/unlike mutation (optimistic)
useMarkHelpful() - Mark helpful mutation (optimistic)
useSavePost() - Save post mutation
useUnsavePost() - Unsave post mutation

useAuth

Authentication hooks.

import { useAuth, useLogin, useLogout } from "@/hooks/use-auth";

// Check authentication
const { data: authData } = useAuth();
const user = authData?.user;
const isLoggedIn = !!user;

// Login
const login = useLogin();
login.mutate({ email: "[email protected]", password: "password" });

// Logout
const logout = useLogout();
logout.mutate();

Available Hooks:

useAuth() - Get current user
useLogin() - Login mutation
useRegister() - Register mutation
useLogout() - Logout mutation
useUpdateProfile() - Update profile mutation
useRequestPasswordReset() - Request password reset
useResetPassword() - Reset password with token

useComments

Comment management hooks.

import { useComments, useCreateComment } from "@/hooks/use-comments";

// Fetch comments
const { data: comments } = useComments("post-id");

// Create comment
const createComment = useCreateComment();
createComment.mutate({
  postId: "post-id",
  content: "Comment text",
  parentId: "parent-comment-id", // Optional: for replies
});

Available Hooks:

useComments(postId) - Get comments for post
useCreateComment() - Create comment mutation
useUpdateComment() - Update comment mutation
useDeleteComment() - Delete comment mutation
useLikeComment() - Like/unlike comment (optimistic)

useNotifications

Notification hooks.

import {
  useNotifications,
  useMarkAllNotificationsRead,
} from "@/hooks/use-notifications";

// Fetch notifications
const { data: notifications } = useNotifications();

// Mark all as read
const markAllRead = useMarkAllNotificationsRead();
markAllRead.mutate();

Available Hooks:

useNotifications() - Get notifications (auto-refetches every 2 minutes)
useUnreadCount() - Get unread count
useMarkNotificationRead() - Mark single as read
useMarkAllNotificationsRead() - Mark all as read
useDeleteNotification() - Delete notification

useImageUpload

Image upload hook.

import { useImageUpload } from "@/hooks/use-image-upload";

const { uploadImage, uploading, progress } = useImageUpload();

const handleUpload = async () => {
  const result = await uploadImage(file, "posts");
  if (result) {
    console.log(result.url); // Image URL
    console.log(result.fileId); // ImageKit file ID
  }
};

🗄 Database Schema

Models

User

id: String (ObjectId)
name: String
email: String (unique)
password: String (hashed)
country: String (optional)
avatarUrl: String (optional)
resetToken: String (optional)
resetTokenExpiry: DateTime (optional)

Post

id: String (ObjectId)
title: String
description: String
content: String
codeSnippet: String (optional)
createdAt: DateTime
tags: String[]
imageUrl: String (optional)
fileId: String (optional) - ImageKit file ID
likes: Int
helpfulCount: Int
authorId: String (ObjectId) - Reference to User

Comment

id: String (ObjectId)
content: String
createdAt: DateTime
avatarUrl: String (optional)
imageUrl: String (optional)
fileId: String (optional)
postId: String (ObjectId)
authorId: String (ObjectId)
parentId: String (ObjectId, optional) - For nested comments

Notification

id: String (ObjectId)
userId: String (ObjectId)
type: String - 'like', 'helpful', 'comment', etc.
message: String
isRead: Boolean
postId: String (optional)
commentId: String (optional)
fromUserId: String (ObjectId, optional)
createdAt: DateTime

Relationships

User has many Posts, Comments, Likes, SavedPosts
Post belongs to User, has many Comments, Likes, Helpfuls
Comment belongs to User and Post, can have parent Comment (nested)
Notification belongs to User

🔄 Reusing Components

How to Reuse PostCard in Another Project

Copy Component Files:

# Copy PostCard and its dependencies
components/PostCard.tsx
components/PostHeader.tsx
components/PostContent.tsx
components/PostStats.tsx
components/PostActionsBar.tsx
components/PostDropdownMenu.tsx

Copy Required Hooks:
```
hooks/use-posts.ts
hooks/use-auth.ts
```

Copy UI Components:

components/ui/skeleton.tsx
components/ui/toast.tsx
components/ui/toaster.tsx
hooks/use-toast.ts

Install Dependencies:

npm install @tanstack/react-query react-icons

Set Up React Query Provider:

// In your root layout
import { QueryProvider } from "@/components/providers/query-provider";

export default function Layout({ children }) {
  return <QueryProvider>{children}</QueryProvider>;
}

Use the Component:

import PostCard from "@/components/PostCard";
import { usePosts } from "@/hooks/use-posts";

function MyPage() {
  const { data: posts } = usePosts();

  return (
    <div>
      {posts?.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

How to Reuse CommentSection

Copy Files:

components/CommentSection.tsx
components/CommentItem.tsx
components/CommentInput.tsx
components/CommentHeader.tsx
components/CommentAvatar.tsx
components/CommentActionsBar.tsx
hooks/use-comments.ts
hooks/use-image-upload.ts

Set Up API Endpoint:

Create /api/comments/post/[postId]/route.ts in your Next.js app.

Use the Component:

import CommentSection from "@/components/CommentSection";

<CommentSection postId="post-id" />;

How to Reuse Dialog Components

Copy Files:

components/ConfirmDialog.tsx
components/InputDialog.tsx
components/ui/dialog.tsx
components/ui/alert-dialog.tsx

Install Dependencies:

npm install @radix-ui/react-dialog @radix-ui/react-alert-dialog

Use Components:

import { ConfirmDialog } from "@/components/ConfirmDialog";

// Replace window.confirm
<ConfirmDialog
  open={showConfirm}
  onOpenChange={setShowConfirm}
  title="Confirm Action"
  description="Are you sure?"
  onConfirm={handleConfirm}
/>;

🚢 Deployment

Deploy to Vercel

Push code to GitHub
Import project in Vercel:
- Go to Vercel
- Click "New Project"
- Import your GitHub repository
Add Environment Variables:
- Go to Project Settings → Environment Variables
- Add all variables from .env file
- Make sure NEXT_PUBLIC_* variables are added
Configure Build Settings:
- Build Command: npm run build
- Output Directory: .next
- Install Command: npm install
Deploy:
- Click "Deploy"
- Vercel will automatically build and deploy

Environment Variables for Production

All environment variables from .env must be added to Vercel:

DATABASE_URL
JWT_SECRET
NEXT_PUBLIC_ADMIN_EMAIL
EMAIL_USER
EMAIL_PASS
NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY
IMAGEKIT_PRIVATE_KEY
NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT
NEXT_PUBLIC_APP_URL (your Vercel URL)

Database Setup for Production

Use MongoDB Atlas (cloud database)
Whitelist Vercel IP ranges (or use 0.0.0.0/0 for all)
Update DATABASE_URL in Vercel environment variables

🏷 Keywords

Technologies: Next.js, React, TypeScript, MongoDB, Prisma, TanStack React Query, Tailwind CSS, ShadCN UI, ImageKit, JWT, bcrypt, Nodemailer

Features: Blog Platform, Developer Community, Code Sharing, Bug Tracking, Error Solutions, Nested Comments, Real-time Notifications, Image Upload, Authentication, Search & Filter

Concepts: Server-Side Rendering, Client-Side Rendering, Optimistic Updates, React Query, Caching, API Routes, Type Safety, Component Reusability, Responsive Design

📝 Conclusion

Dev-Bug-Coder-Blog is a comprehensive, production-ready blogging platform that demonstrates modern web development practices. It showcases:

Modern React Patterns: Hooks, Context, Custom Hooks
State Management: React Query for server state
Type Safety: Full TypeScript implementation
Performance: Optimistic updates, caching, code splitting
User Experience: Skeleton loaders, toast notifications, smooth animations
Best Practices: Reusable components, centralized hooks, proper error handling

This project serves as an excellent learning resource for:

Next.js App Router
React Query patterns
TypeScript in React
MongoDB with Prisma
Authentication flows
Image handling
Real-time features

Happy Coding! 🎉

Feel free to use this project repository and extend this project further!

If you have any questions or want to share your work, reach out via GitHub or my portfolio at https://arnob-mahmud.vercel.app/.

Enjoy building and learning! 🚀

Thank you! 😊

Name		Name	Last commit message	Last commit date
Latest commit History 55 Commits
app		app
components		components
hooks		hooks
lib		lib
prisma		prisma
public		public
scripts		scripts
types		types
.cursorignore		.cursorignore
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
SEO_IMPLEMENTATION.md		SEO_IMPLEMENTATION.md
components.json		components.json
eslint.config.ts		eslint.config.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vercel.json		vercel.json

arnobt78/Developer-Blog-Platform--NextJS-FullStack

Folders and files

Latest commit

History

Repository files navigation

Developer's Blog Platform – Next.js, MongoDB, Prisma, TanStack React Query FullStack Project (Blog for Coding Errors & Solutions)

📋 Table of Contents

🎯 Overview

Key Highlights

✨ Features

Core Functionality

🛠 Technology Stack

Frontend

Backend

Services & Tools

📁 Project Structure

🚀 Getting Started

Prerequisites

🔐 Environment Variables

How to Get Environment Variables

1. MongoDB Connection String

2. JWT Secret

3. Gmail App Password (for Email)

4. ImageKit Credentials

📦 Installation & Setup

Step 1: Clone the Repository

Step 2: Install Dependencies

Step 3: Set Up Environment Variables

Step 4: Set Up Database

Step 5: Run Development Server

🏃 Running the Project

Development Mode

Production Build

Other Commands

🔌 API Endpoints

Authentication

Posts

Comments

Notifications

Upload

Users

🧩 Components Documentation

Core Components

PostCard

CommentSection

ConfirmDialog

InputDialog

UI Components (ShadCN)

🎣 Custom Hooks

usePosts

useAuth

useComments

useNotifications

useImageUpload

🗄 Database Schema

Models

User

Post

Comment

Notification

Relationships

🔄 Reusing Components

How to Reuse PostCard in Another Project

How to Reuse CommentSection

How to Reuse Dialog Components

🚢 Deployment

Deploy to Vercel

Environment Variables for Production

Database Setup for Production

🏷 Keywords

📝 Conclusion

Happy Coding! 🎉

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages