SmartBlog

Full-stack publishing platform for modern editorial workflows.
React + Vite frontend, Express + MongoDB backend, real-time notifications, analytics, newsletters, monetization, collaboration, and enterprise tooling.

Overview

SmartBlog is a multi-surface blogging platform built for both creators and operators. It combines publishing, discovery, engagement, moderation, analytics, newsletter delivery, premium content, collaboration, and enterprise administration in a single codebase.

✨ Highlights

Area	What is included
Publishing	Drafts, scheduled publishing, editorial review, revisions, inline uploads, AI assist
Social	Likes, comments, follows, bookmarks, notifications, personalized feeds
Growth	Search, recommendation feedback, analytics, source attribution
Revenue	Premium memberships, paid post unlocks, revenue tracking
Ops	Moderation, admin dashboards, newsletters, observability
Enterprise	Tenant policy, SSO endpoints, audit logs, export, retention

🧰 Tech Stack

Layer	Tools
Frontend	React 18, Vite, Tailwind CSS, React Router, Axios, Socket.IO client
Backend	Node.js, Express, Mongoose, JWT, Multer, Nodemailer, Socket.IO
Database	MongoDB
Optional services	OpenAI, SMTP provider, Stripe, Cloudinary, imgproxy

✅ Requirements

• Node.js 18+
• MongoDB running locally or an accessible MongoDB connection string

🚀 Quick Start

1. Install dependencies

cd backend
npm install

cd ../frontend
npm install

2. Configure environment variables

Copy backend/.env.example to backend/.env, then update values as needed:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/smartblog
JWT_SECRET=replace_with_a_strong_secret
FRONTEND_URL=http://localhost:5173
BACKEND_URL=http://localhost:5000
# FRONTEND_URLS=http://localhost:5173,http://127.0.0.1:5173

# Optional AI
# OPENAI_API_KEY=
# OPENAI_MODEL=gpt-4.1-mini

# Optional email delivery
# SMTP_HOST=
# SMTP_PORT=587
# SMTP_USER=
# SMTP_PASS=
# SMTP_FROM_EMAIL=

# Optional payments/cache/media
# STRIPE_SECRET_KEY=
# REDIS_URL=
# IMAGE_CDN_PROVIDER=none
# CLOUDINARY_FETCH_BASE=
# IMGPROXY_BASE_URL=

# Optional Cloudinary
# CLOUDINARY_CLOUD_NAME=
# CLOUDINARY_API_KEY=
# CLOUDINARY_API_SECRET=

# Optional enterprise SSO
# SSO_OAUTH_AUTHORIZE_URL=
# SSO_OAUTH_TOKEN_URL=
# SSO_OAUTH_USERINFO_URL=
# SSO_OAUTH_CLIENT_ID=
# SSO_OAUTH_CLIENT_SECRET=
# SSO_OAUTH_REDIRECT_URI=
# SSO_OAUTH_SCOPE=openid profile email
# SSO_SAML_ENTITY_ID=smartblog-local-entity
# SSO_SAML_ACS_URL=http://localhost:5000/api/enterprise/sso/saml/acs

Create frontend/.env:

VITE_API_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000

3. Run the apps

Terminal 1:

cd backend
npm run dev

Terminal 2:

cd frontend
npm run dev

Local URLs:

• Frontend: http://localhost:5173
• API: http://localhost:5000/api
• Health: http://localhost:5000/api/health

🛠️ Scripts

Backend

• npm run dev - start backend with nodemon
• npm start - start backend with Node.js
• npm run seed - seed demo data
• npm run seed:reset - clear and reseed demo data
• npm run check:crud - run CRUD verification for posts, comments, bookmarks, and follows

Frontend

• npm run dev - start Vite dev server
• npm run build - create production build
• npm run preview - preview the production build

✨ Features

Publishing and Editorial

• Create, update, read, and delete posts
• Draft, scheduled, published, and in-review post states
• Post revisions and revision restore
• Inline image uploads and file attachments
• AI-assisted writing support
• Pending review queue for admins

Social and Discovery

• Post likes
• Comment CRUD and comment likes
• Follow and unfollow with suggestions
• Bookmark folders with optional notes
• Real-time notifications with Socket.IO
• Personalized following feed and "for you" recommendations
• Standard and advanced search flows

Analytics and Growth

• Author dashboard metrics
• Post-level analytics and deeper trend views
• Source attribution and conversion funnel tracking
• Recommendation feedback capture
• Internal-link suggestions for SEO workflows

Monetization

• Premium memberships with monthly or yearly modes
• One-time premium post unlocks
• Revenue ledger tracking for author and platform share
• Stripe checkout flow with development mock fallback

Collaboration and Workspace Tools

• Publications with member roles
• Workspaces with shared access control
• Draft comment threads and resolution flow

Platform Operations

• Moderation reports, appeals, and shadow-ban controls
• Admin dashboards and operational reporting
• Newsletter subscriptions, broadcasts, unsubscribe flow, and delivery stats
• Observability metrics and health alerts
• Media URL optimization for CDN-style delivery

Enterprise and Compliance

• Tenant-aware policy management
• OAuth SSO start and callback endpoints
• SAML metadata endpoint placeholder
• Audit logging, tenant export, and retention cleanup
• SEO schema, OG image generation, sitemap, and robots endpoints

🏗️ System Architecture

SmartBlog is split into two runtime applications with MongoDB as the primary store and optional external services enabled through environment configuration.

flowchart TD
    FE["React + Vite Frontend<br/>Public pages, auth flows, dashboards, admin, enterprise<br/>API client, auth context, Socket.IO notifications"]
    BE["Node.js + Express Backend<br/>REST API under /api<br/>Auth, posts, comments, follows, bookmarks<br/>Newsletter, monetization, collaboration, enterprise<br/>SEO, observability, media optimization, Socket.IO"]
    DB["MongoDB<br/>users and profiles<br/>posts, comments, follows<br/>metrics, audit, revenue"]
    EXT["External / Optional<br/>OpenAI<br/>SMTP provider<br/>Stripe<br/>Cloudinary / imgproxy"]

    FE -->|"HTTP / WebSocket"| BE
    BE --> DB
    BE --> EXT

Loading

Architecture Visuals

🖼️ Screenshots

Product Screens

🔌 API Route Groups

All API routes are served under /api.

Group	Purpose
/auth	Authentication and profile management
/posts	Publishing, feeds, analytics, revisions, AI assist
/users	User profile retrieval
/comments	Comment creation, update, deletion, likes
/bookmarks	Bookmark folders and saved posts
/follows	Follow graph and suggestions
/notifications	Notification inbox and read state
/admin	Admin dashboards and moderation-oriented management
/newsletter	Subscriber flows, broadcasts, and email job stats
/monetization	Memberships, checkout, premium access, revenue
/moderation	Reports, appeals, decisions, shadow-ban flows
/seo	Schema, OG image generation, internal-link suggestions
/collaboration	Publications, workspaces, and draft comments
/enterprise	SSO, tenant policy, audit, export, retention
/media	Media optimization URL generation
/observability	Metrics and health alerts

Additional backend endpoints:

• /uploads/*
• /sitemap.xml
• /sitemap-posts.xml
• /robots.txt

🧭 Frontend Routes

Main frontend pages currently include:

• /
• /login
• /register
• /search
• /search/advanced
• /post/:id
• /profile
• /profile/:id
• /create
• /edit-post/:id
• /feed
• /bookmarks
• /dashboard
• /dashboard/post/:id/analytics
• /admin
• /collaboration
• /enterprise

📝 Notes

• Uploads are stored locally in backend/uploads.
• Backend workers handle scheduled publishing and queued email processing on intervals.
• Optional integrations activate only when their environment variables are configured.
• .env, uploads, build output, logs, and node_modules are ignored by git.

🔎 Verification

Useful checks after setup:

• Backend health check: open http://localhost:5000/api/health
• Frontend production build: run cd frontend && npm run build
• Demo data seed: run cd backend && npm run seed
• CRUD smoke check: run cd backend && npm run check:crud