TechPulse — AI-Powered Tech & Engineering Blog

A production-ready MERN stack blog platform for software engineers and AI practitioners. Dark-first editorial design, AI-assisted authoring, full SEO optimization, and JWT-secured admin dashboard.

Screenshots / Live Demo

📸 Add screenshots or a live demo link here once deployed.

Suggested screenshots:

• Homepage hero section
• Blog listing page with filters
• Individual post with TL;DR, code highlighting, comments
• Dashboard new-post editor with AI assist panel
• Mobile responsive views

---

Tech Stack

---

Project Structure

blogapp/
├── frontend/               # React + Vite app
│   ├── src/
│   │   ├── pages/          # Route-level page components
│   │   │   └── dashboard/  # Admin dashboard pages
│   │   ├── components/
│   │   │   ├── ui/         # Layout, Navbar, Footer, ProtectedRoute, SEOHead
│   │   │   └── blog/       # PostCard, NewsletterSignup
│   │   ├── hooks/          # useAuth (auth context)
│   │   ├── services/       # api.js (axios + all service functions)
│   │   └── utils/          # formatDate
│   ├── vercel.json         # SPA fallback config
│   └── .env.example
│
└── backend/                # Express.js REST API
    ├── src/
    │   ├── config/         # db.js (MongoDB connection)
    │   ├── models/         # Mongoose models
    │   ├── controllers/    # Route handlers
    │   ├── routes/         # Express routers
    │   ├── middleware/     # auth, admin, errorHandler, rateLimiter
    │   ├── services/       # aiService.js (OpenAI)
    │   ├── validators/     # Joi schemas
    │   └── utils/          # slugify, readTime
    ├── db/
    │   └── seed.js         # Database seeder (3 sample posts)
    ├── server.js
    └── .env.example

---

Local Setup

Prerequisites

• Node.js 18+
• MongoDB Atlas cluster (or local MongoDB)
• OpenAI API key (optional — AI features degrade gracefully)

1. Clone and install

git clone https://github.com/AbhisharSingh/blogapp.git
cd blogapp

# Install backend deps
cd backend && npm install

# Install frontend deps
cd ../frontend && npm install

2. Configure environment variables

Backend — copy and edit:

cd backend
cp .env.example .env
# Edit .env with your values

Frontend — copy and edit:

cd frontend
cp .env.example .env
# Edit .env with your backend URL

3. Seed the database

cd backend
SEED_ADMIN_PASSWORD=YourSecurePassword123! npm run seed

This creates:

• 3 sample published posts (RAG systems, React 18, LLM fine-tuning)
• 3 categories (Machine Learning, Web Development, AI Engineering)
• 1 admin user — email: admin@blogapp.dev, password: value of SEED_ADMIN_PASSWORD

4. Run the application

# Terminal 1 — Backend
cd backend
npm run dev   # starts on http://localhost:5000

# Terminal 2 — Frontend
cd frontend
npm run dev   # starts on http://localhost:5173

Open http://localhost:5173 in your browser.

---

Environment Variables Reference

Backend (backend/.env)

Frontend (frontend/.env)

---

API Documentation

Base URL: http://localhost:5000/api

All error responses follow: { "success": false, "message": "..." }

Health

Auth

Posts

Create/Update Post body:

{
  "title": "string",
  "excerpt": "string (max 300)",
  "content": "HTML string",
  "category": "string",
  "tags": ["tag1", "tag2"],
  "status": "draft|published",
  "coverImage": { "url": "string", "alt": "string" },
  "metaTitle": "string (max 60)",
  "metaDescription": "string (max 160)",
  "keywords": ["kw1", "kw2"],
  "tldr": ["point 1", "point 2", "point 3"]
}

Categories & Tags

Comments

Newsletter

AI (Admin only)

---

Deployment Guide

MongoDB Atlas

1. Create a free M0 cluster at mongodb.com/atlas
2. Create a database user with readWrite role
3. Whitelist IP 0.0.0.0/0 (or your Render/Railway IP)
4. Copy the connection string to MONGO_URI

Backend — Render

1. Push code to GitHub
2. Go to render.com → New Web Service
3. Connect your GitHub repo, set root directory to backend
4. Build command: npm install
5. Start command: node server.js
6. Add all environment variables from backend/.env.example
7. Health check path: /api/health

Backend — Railway

1. Go to railway.app → New Project → Deploy from GitHub
2. Select repo, set root to backend
3. Set PORT variable (Railway auto-detects)
4. Add all other env vars
5. Deploy

Frontend — Vercel

1. Go to vercel.com → New Project
2. Import GitHub repo, set root directory to frontend
3. Framework: Vite
4. Add environment variable: VITE_API_URL=https://your-backend.onrender.com/api
5. Deploy — vercel.json handles SPA routing fallback automatically

---

Features

• ✅ Dark-first editorial design (Syne + Lora typography)
• ✅ JWT auth with access + refresh token rotation
• ✅ Role-based access (admin / reader)
• ✅ TipTap rich text editor with code block syntax highlighting
• ✅ AI draft generation, paragraph improvement, SEO metadata (OpenAI)
• ✅ Full-text post search
• ✅ Infinite scroll blog listing with category/tag filters
• ✅ Related posts on single post page
• ✅ View counter on posts
• ✅ TL;DR summary box on posts
• ✅ Comment system (moderated)
• ✅ Newsletter subscription
• ✅ React Helmet Async (meta, OG, Twitter card, canonical, JSON-LD)
• ✅ robots.txt served from backend
• ✅ Rate limiting (global + auth-specific)
• ✅ Input validation (Joi)
• ✅ Centralized error handling
• ✅ Database seed script
• ✅ Vercel SPA fallback config
• ✅ .env.example for both frontend and backend