📰 TechBlog – Full Stack Blogging Platform

TechBlog is a modern full-stack blogging platform built with Next.js 16, TypeScript, PostgreSQL, and Prisma ORM. It enables users to explore technology articles while providing authenticated authors with a powerful dashboard to create, edit, and manage rich-text blog posts.

Designed with performance, scalability, and user experience in mind, the application includes secure authentication, Cloudinary image uploads, SEO-friendly URLs, category & tag organization, and a responsive interface.

---

🚀 Live Demo

🌐 https://tech-blog-website-omega.vercel.app/

---

✨ Features

🔐 Authentication

• Secure Authentication using Better Auth
• User Registration & Login
• Protected Routes
• Session Management

✍️ Rich Blog Editor

• Rich Text Editor using Jodit
• Create Articles
• Edit Articles
• Delete Articles
• Draft & Publish Workflow
• Image Support inside Articles

📰 Blog Management

• Create Blog Posts
• Update Existing Posts
• Delete Posts
• Featured Articles
• Latest Articles
• Trending Articles

🏷️ Categories

• Organize Articles by Categories
• SEO Friendly Slugs
• Dynamic Blog URLs

🔍 Search

• Search Articles
• Search by Title
• Search by Topics
• Quick Content Discovery

☁️ Image Uploads

• Cloudinary Integration
• Secure Image Storage
• Optimized Media Delivery

⚡ State & Data Fetching

• Zustand for Global State Management
• TanStack React Query
• Axios API Requests

🎨 UI & UX

• Responsive Design
• Modern User Interface
• Clean Typography
• Fast Navigation
• Optimized Performance

---

🛠️ Tech Stack

Frontend

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS v4

Backend

• Next.js Server Actions / Route Handlers

Database

• PostgreSQL
• Prisma ORM

Authentication

• Better Auth

State Management

• Zustand

Server State

• TanStack React Query

API Client

• Axios

Rich Text Editor

• Jodit React

Image Storage

• Cloudinary

---

⚙️ Installation

Clone Repository

git clone https://github.com/Shivam0099x/TechBlog-Website.git

Move into Project

cd TechBlog-Website

Install Dependencies

npm install

Configure Environment Variables

Create a .env file.

DATABASE_URL=

BETTER_AUTH_SECRET=
BETTER_AUTH_URL=

CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

Generate Prisma Client

npx prisma generate

Run Database Migration

npx prisma migrate dev

Start Development Server

npm run dev

---

📚 Core Functionalities

• User Authentication
• Blog Publishing
• Rich Text Editing
• Image Uploads
• Article Search
• Featured Articles
• Trending Articles
• Categories
• SEO Friendly URLs
• Responsive Layout

---

🔒 Security

• Secure Authentication using Better Auth
• Protected Routes
• Environment Variable Management
• Secure Database Access with Prisma
• Input Validation
• Server-side Rendering for Improved Security

---

🌟 Highlights

• Built with Next.js 16 App Router
• Full Stack TypeScript Application
• PostgreSQL Database Integration
• Prisma ORM
• Cloudinary Image Uploads
• Rich Text Blog Editor
• SEO Friendly Dynamic Routing
• Modern Responsive Design
• Optimized Data Fetching with React Query
• Lightweight Global State using Zustand

---

🚀 Future Improvements

• Comments System
• Likes & Reactions
• Bookmark Articles
• User Profiles
• Social Login
• Newsletter Subscription
• Reading History
• Dark Mode
• Admin Analytics Dashboard
• Email Notifications
• Reading Time Estimation
• Related Articles
• Markdown Support
• API Documentation
• Unit & Integration Testing

---

👨‍💻 Author

Shivam Patel

GitHub: https://github.com/Shivam0099x

---

⭐ Support

If you found this project helpful, consider giving it a ⭐ on GitHub.