🧠 BlogSphere — An AI-Enhanced Storytelling Platform

Summary

I built BlogSphere, a full-stack content platform that blends a delightful writing experience with real-time community features and AI assistance.
It uses Next.js App Router for performant server-rendered pages, MongoDB for content and engagement data, Pusher for instant feedback loops, Cloudinary for media, and OpenRouter-powered AI endpoints for rewriting, summarizing, and chat.

The system includes moderation tools, an analytics dashboard, billing flows, and SEO surfaces like RSS and sitemaps—shaped to feel like a production-ready product.

My Role

• Full-stack developer owning architecture, implementation, and integration

• Designed the data models, API surfaces, UI flows, and operational concerns (auth, caching, revalidation, SEO)

Motivation

I wanted a modern, realistic blog platform that moves beyond static publishing — where authors collaborate with AI, audiences engage in real-time, and the system scales with good defaults (auth, caching, revalidation, background updates).

It’s a proving ground for Next.js 14 App Router patterns and event-driven UX.

Tech Stack

• Framework: Next.js 14 (App Router, route handlers, SSR)

• Auth: NextAuth.js with Credentials, Google, GitHub

• Database: MongoDB via Mongoose

• Realtime: Pusher (private user channels, post/comment rooms)

• Storage/Images: Cloudinary (cover images, avatars, transformations)

• AI: OpenRouter (OpenAI-compatible client) for summarize/rewrite/continue and chatbot

• Search/Discovery: MongoDB/Atlas Search, custom feed ranking and trending

• Cache: Optional Redis helpers with safe fallbacks

• Email: Resend + HTML templates for likes, comments, bookmarks, and system emails

• Styling: Tailwind CSS (+ typography plugin)

• Editor: TipTap (rich text, extensions)

• Tooling: ESLint, Prettier, Husky/lint-staged

• Deployment: Vercel-ready (standalone output, images remotePatterns)

Architecture

App Router Structure (under src/app)

Includes server components and route handlers under /api:

• Auth: /api/auth/[...nextauth] (NextAuth wired to custom auth options)

• Content: /api/posts (create/list), /api/comments, /api/reactions, /api/bookmarks

• Discovery: /api/search, /api/trending, /api/feed

• Realtime: /api/pusher/auth (notifications broadcast to private-user-{providerId})

• AI: /api/ai-suggest (summarize/rewrite/continue), /api/chatbot (chat)

• Moderation: /api/moderation/(block-user|report|post-status)

• Profile: /api/profile (avatar upload via Cloudinary; followers/following; stats; posts)

• Admin: /admin pages + /api/admin/audit-log

• Billing: /billing pages + /api/billing/(initiate-payment|subscription|cancel)

Data Modeling (Mongoose, src/models)

• User: provider + providerId, credentials hash, profile, social graph (follows/followers), bookmarks, email prefs, subscription (plan, status, usage, expiry, PKR pricing flow)

• Post: slug, status (draft/published/archived), schedule date, tags/category, author snapshot, reactions, views/reads, SEO fields

• Comment: threaded replies, reactions, moderation status

• PostVersion: versioned snapshots for history

• Read/Audit/Report: analytics and admin oversight objects

Libraries (src/lib)

• db: idempotent Mongo connection

• auth/authOptions: unified auth across credentials and OAuth, session/JWT callbacks enriching session

• cloudinary: streaming uploads with transformations, avatar pipeline

• resend + emailTemplates: templated notifications; dev-only restrictions for safe sending

• pusherServer/pusherClient: real-time events for likes/comments/notifications/profile-stats

• redis: optional cache helpers with no-op fallbacks

• contentRules/validation: simple content gating and Zod request validation

• search/trending/analytics: custom ranking, trending scores, and dashboards

Middlewares and SEO

• middleware.js: gates /billing, /dashboard, and some API routes under auth cookie checks

• SEO Routes: robots, sitemap, RSS, and /feed.xml; dynamic base URL resolution for Vercel/local environments

Key Features

Rich Authoring

• TipTap editor with image upload (Cloudinary), markdown rendering, and SEO fields

• Version history via PostVersion; scheduling support (scheduledAt)

AI Assistance

• /api/ai-suggest supports summarize/rewrite/continue modes with OpenRouter models

• /api/chatbot provides a general chat endpoint for creative ideation

Real-Time Engagement

• Likes, reactions, and comment streams via Pusher

• Instant updates to post rooms and private user channels

• Event-driven notifications and profile stat updates

Discovery and Analytics

• Trending feeds and personalized “For You” feed with scoring function (interactions, age decay, follows, tag affinity)

• Read-time tracking with /api/reads for dashboard analytics

Social Graph and Bookmarking

• Follow authors and bookmark posts

• Bookmark-triggered notifications and email digests

Moderation and Admin

• Content rules validation for posts/comments

• Moderation endpoints for reports and block-user

• Admin area (tags, comments, users, reports) and audit logs

Subscriptions and Billing (PKR)

• One-time payment flow (EasyPaisa/JazzCash UX)

• 30-day access windows with plan limits (posts, storage, API calls)

• Subscription state stored on User with plan, usage, limits, startDate/expiresAt

Notable Implementation Decisions

• App Router with Route Handlers
  Consolidates server logic per resource, enables explicit GET/POST/PATCH handlers, and supports streaming uploads via web APIs

• Auth and Identity Normalization
  Unifies credentials and OAuth users by providerId; session/JWT callbacks enrich session with role and providerId while staying in sync with DB

• Slug and Scheduling Correctness
  Unique slug generator with collision checks; consistent published boolean based on status and schedule to prevent premature publishing

• Real-Time Notifications at Domain Boundaries
  private-user-{providerId} channels for direct notifications (likes, bookmarks, comments) and stats updates

• Safe, Optional Infrastructure
  Redis cache helpers act as no-ops without REDIS_URL; Resend emails guarded for dev-safe usage; DB connections idempotent

• Image Pipeline
  Cloudinary streaming uploads with transformations and distinct presets for avatars/covers; remotePatterns configured in next.config.js

• Performance and Consistency
  .lean() for heavy reads, selective revalidatePath calls, cache busting on create
  Backfills author fields in list queries to ensure resilient UI even when snapshots are missing

Challenges I Solved

• Multi-Provider Auth Coherence
  Reconciled OAuth and credentials identities, keeping sessions and JWTs enriched and consistent over time

• Realtime UX Without Over-Coupling
  Encapsulated Pusher logic, used stable channel naming, prevented self-notifications, and wired profile-stats updates as separate events

• Content Lifecycle
  Resolved complex logic for draft/published/scheduled states to avoid accidental publishing and maintain accurate SEO surfaces

• Reliable Media and Email in Development
  Hardened Cloudinary upload streams and added dev-safe Resend behavior to avoid 403s locally

• Ranking and Discovery
  Built a pragmatic scoring function mixing engagement signals, recency, follows, and tag affinity

Impact and Results

Author Experience

• Fast editor with AI helpers and clean media pipeline

• Predictable publishing with scheduling

Community Feel

• Real-time likes, comments, and notifications

• Immediate feedback loops that encourage engagement and repeat visits

Operable System

• Admin and moderation tools

• Analytics, RSS/sitemap/robots for SEO and distribution

• Cache and revalidation integration for smooth performance

What I’d Improve Next

• Security and Limits:
  Add rate limiting per route, stricter input validation everywhere, and more granular role checks on admin endpoints

• AI and Search:
  Expand to semantic/vector search and AI-assisted tagging; migrate to the Vercel AI SDK for streaming UX

• Observability and Jobs:
  Add centralized logging/metrics and background jobs/queues for email and analytics aggregation

• Payments:
  Unify billing with a provider SDK or webhooks; improve subscription expiry automation

• Testing/QA:
  Add unit/integration tests for API routes and E2E flows for editor/publishing/auth

• Performance:
  Pagination on heavy lists, selective field projections, and edge/runtime choices where appropriate

How This Reflects My Approach

I aim for cohesive systems that are delightful to use and robust to operate.
I keep the architecture modular, adopt pragmatic defaults (idempotent DB connects, optional caches, safe email), and lean into event-driven UX where it adds real value.

With BlogSphere, I focused on real features that demonstrate product thinking —
auth, AI, realtime, moderation, analytics, and distribution — woven into a consistent developer experience.