SmartBlog AI

A MERN app that generates GPT-4 blog drafts and scores them with a from-scratch SEO engine (readability, keyword density, structure) behind full JWT auth. Phase-1 MVP: backend complete, frontend covers auth + AI generation.

Built with React, Node.js, Express, MongoDB, OpenAI API, and 1 more.

SmartBlog AI is a full-stack MERN application that closes the loop between writing SEO content and grading it. An authenticated user enters a topic, tone, and target word count; the backend calls GPT-4 to produce a structured draft (with a gpt-3.5-turbo pass for title suggestions and a GPT-4 "improve" mode for readability/SEO/engagement rewrites), returning token usage to the client. The distinctive piece is a dependency-free SEO engine written in ~350 lines of backend JavaScript: it computes a Flesch-style readability score, keyword and keyphrase density with stopword filtering, reading time, and HTML structure metrics (headings, lists, images, links via regex), then blends them into a weighted 0-100 score (30% readability, 25% keyword, 25% structure, 20% length) and emits a priority-ranked list of concrete fixes. Auth is full JWT (7-day) + bcrypt with express-validator rules and a password-strength regex; the Express server is hardened with helmet, a 100-request / 15-minute rate limiter, configurable CORS, 10mb body limits, a health check, and centralized error and 404 handling. The Blog model does pre-save slug and reading-time computation, five indexes, revision history, and free/premium/enterprise usage tiers (free plan capped at 5 blogs). The build is explicitly scoped as Phase 1: the backend is complete across auth, blogs, ai, and seo routes, while the frontend ships the landing page, dashboard (the AI generation flow), and auth pages as real UI, with the rich-text editor, blog list, blog view, and profile pages left as placeholders for Phase 2 (their backend endpoints and the react-quill dependency already exist). It is not currently deployed and has no users; watchability is a recorded demo of the local generate-and-score flow.

• GPT-4 blog generation from topic + tone + word count, with optional keywords and additional instructions, returning token usage
• GPT-4 content-improvement mode (seo / readability / engagement / grammar / structure) and gpt-3.5-turbo title suggestions
• From-scratch SEO engine: weighted 0-100 score (30% readability / 25% keyword / 25% structure / 20% length) with priority-ranked, actionable suggestions
• Keyword and 2-3 word keyphrase extraction with stopword filtering, keyword density, and reading-time estimation
• Full JWT (7-day) + bcrypt auth: register, login, me, profile update, change password, logout, with express-validator and a password-strength regex
• Blog model with pre-save slug + word-count/reading-time hooks, 5 indexes, revision history + version fields, and free/premium/enterprise usage tiers (free capped at 5 blogs)
• Hardened Express server: helmet, 100 req / 15 min rate limiting, configurable CORS, 10mb body limits, health-check endpoint, centralized error + 404 handlers
• Typed OpenAI error handling for insufficient_quota (402) and rate_limit_exceeded (429)
• React 18 + react-router 6 + react-query 3 frontend with AuthContext, ProtectedRoute, a full landing page and an AI-generation dashboard (editor/list/view/profile pages stubbed for Phase 2)

Every project hits walls. Here's what nearly broke SmartBlog AI — and how it shipped anyway.

• Turning free-form GPT-4 prose into structured {title, content} fields reliably: the naive first-line-is-title split is fragile against markdown H1s, 'Title:' labels, and leading intros
• Designing a transparent SEO scoring rubric from scratch (weights, density thresholds, priority ranking) without leaning on an NLP library
• Approximating readability and syllable counts in plain JS, and parsing HTML structure with regex instead of a DOM parser — accepting known inaccuracy for a dependency-free MVP
• Bounding OpenAI token budget and cost while allowing variable word counts, and handling quota/rate-limit failures as typed, user-facing errors rather than generic 500s
• Keeping two representations of blog usage consistent (the blogsCreated counter that gates the free plan vs the countDocuments query the usage endpoint reports)
• Scoping honestly: shipping a complete backend and a deliberately partial frontend rather than a fully-stubbed everything

Every build leaves residue. The takeaways from SmartBlog AI that carry forward.

• LLM output should be constrained to a machine-readable contract (JSON mode / function calling) before you parse it — string-splitting model prose is a latent bug
• A single source of truth for quota/usage prevents the kind of drift seen between the blogsCreated counter and the countDocuments query
• Building the SEO engine by hand forces you to actually define what 'good SEO' means numerically, which is more defensible in an interview than importing a black-box scorer
• Naming and formula labels matter: the readability function implements Flesch Reading Ease but is commented as Flesch-Kincaid Grade Level, the kind of mislabel that erodes trust
• Committing a repo in one shot leaves no story; incremental commits would have captured the real obstacles this write-up has to infer
• Small hygiene like a case- and space-correct screenshot filename is the difference between a README that renders and one that shows a broken image