tagForge AI SEO Generator
Full-Stack AI SaaS with Google Cloud Identity Synchronization and Stripe Monetization
At a Glance
- Problem
- SEO teams manually wrote titles, descriptions, and alt text for every product page — slow and inconsistent.
- Role
- Designed the system architecture and implemented the frontend, REST API, authentication, billing, and deployment.
- Solution
- Built an AI SaaS that generates titles, meta descriptions, alt text, and keywords from product input.
- Result
- Generated content at 280+ tokens per second in testing, with quota-based Stripe monetization.
- Proof
- Live demo, GitHub repository, screenshots, and the architecture diagram below.
Executive Summary
tagForge is a premium AI-powered SEO SaaS application built to enable digital marketers, content creators, and SEO professionals to synthesize metadata: titles, meta descriptions, Open Graph parameters, image alternative texts, and high-relevancy keywords.
By engineering a high-fidelity monorepo architecture, tagForge co-hosts a **Next.js 14 App Router frontend** and a **TypeScript Express.js REST API** inside a single, unified serverless project on Vercel. Through integrated Google Cloud OAuth (NextAuth.js), robust **Stripe payments with real-time webhooks**, and rapid inference utilizing **Groq Llama-3-70B**, the platform bypasses CORS overhead, keeps hosting costs low, and achieves SEO content generation rates of **over 280 tokens per second** in the tested setup.
The Monorepo Nightmare
- • Routing Collisions: Hosting Next.js and Express inside a single serverless Vercel deploy typically overlaps routes and triggers endless 404 errors.
- • Session Disconnection: Google OAuth on the frontend needs complex backend check-ins to sync accounts and safely issue secure custom JWT payloads.
- • Lambda Resolution Failures: Relative backend fetch paths fail inside isolated serverless Lambdas because no browser context is active.
- • Build-Time Compilation Crash: Referencing client-side dynamic search query strings in App Router roots triggers build-time static pre-rendering bails.
The Engineering Solution
- • Double-Prefix Routing: Mapped Next.js to `/` and Express to `/_/backend` using a highly optimized `vercel.json` rewrite strategy.
- • NextAuth Proxy Synchronizer: Intercepted OAuth tokens client-side, proxied registration into Mongo, and generated custom session JWTs.
- • Context-Aware Resolver: Programmed a smart API client helper that detects runtime environments and resolves canonical serverless domains.
- • React Suspense Encapsulation: Isolated all query hook invocations inside dynamic `<Suspense>` boundaries, securing clean compilations.
tagForge SaaS System Architecture
Next.js Web Frontend
Sleek dark interface, NextAuth credential management, and responsive dynamic dashboards.
Vercel Rewrite Router
Multi-service double-prefix gateway translating `/` and `/_/backend` endpoints seamlessly.
Express API & Databases
Mongoose schemas, Stripe dynamic upgrades, and high-speed Groq Llama-3 endpoints.
Core Architecture Pillars
1. Multi-Service Monorepo Configuration (`vercel.json`)
To eliminate complex Multi-Domain CORS errors and maximize server deployment consolidation, we utilize Vercel's multi-service architecture within a single workspace:
- Next.js Frontend is mapped to the project root and listens on `/`, which lets client components pre-render efficiently and load fast.
- TypeScript Express.js API is mapped to `/backend` in the project directory, and answers queries under the prefix rewrite rules of `/_/backend/*`.
2. Google Cloud OAuth & Custom Backend JWT Synchronizer
Integrating NextAuth on the client side with a standalone Express/MongoDB backend requires secure synchronization protocols:
- When a user logs in via Google Cloud, NextAuth's `jwt` callback securely proxies a check-in request to the backend Express server.
- If the Google account does not exist in MongoDB, the Express backend registers the user record, compiles an internal security JWT access token, and passes it back to the Next.js frontend cache, achieving unified session consistency.
3. Context-Aware Base API Path Resolver
In production, backend data fetches take place both in the browser (client-side) and inside serverless Lambda engines (server-side).
Solving Route Resolution inside Lambda Environments
Because relative base URLs (e.g., `/_/backend/api`) break inside headless execution paths, a dynamic helper resolves canonical locations contextually:
- When running on the Server-side (Vercel Lambda), the helper detects the absence of `window` and resolves absolute domains canonicalized in `NEXTAUTH_URL` (e.g. `https://seo-project-21.vercel.app/_/backend`).
- When running in the Browser (client-side), the helper uses the relative routed prefix `/_/backend` to cleanly leverage the rewrite proxy setup.
- In Local Development, it falls back gracefully to `localhost:5000` to preserve developer velocity.
Database & Schema Design
The platform utilizes MongoDB Atlas coupled with Mongoose objects, establishing a clean schema layout that links user metadata, subscription configurations, and AI generation history:
User (Collection)
Document ID: ObjectId- email string (Unique, Lower)
- passwordHash string
- plan "free" | "pro"
- stripeCustomerId string (Nullable)
- stripeSubscriptionId string (Nullable)
- generationsThisMonth number (Default: 0)
- monthResetDate Date (Default: +30 Days)
Generation (Collection)
Document ID: ObjectId- userId [FK] ref User.id
- input.productName string
- input.description string
- output.title string
- output.metaDescription string
- output.altTexts array [string]
- Index Resolution { userId: 1, createdAt: -1 }
Indexing Strategy & Query Optimization
- Compound Indexes: The `Generation` model establishes a highly performant compound index mapping { userId: 1, createdAt: -1 }. When loading a user's chronological SEO history in the dashboard panel, the query operates in **O(log N) time**, completely avoiding full collection scans.
- Dynamic Mongoose Timestamps: Both models utilize automatic timestamps (`timestamps: true`), producing consistent creation and modification trackers without injecting custom manual date operations in controller routes.
SaaS Business Model: Plan & Quota Management
To support monetization, tagForge implements strict SaaS generation limit rules that dynamically restrict user API consumption according to active Stripe billing states:
| SaaS Tier Plan | Generation Volume Cap | Stripe Webhook Sync State | Access Badge |
|---|---|---|---|
| Free Plan | 5 Generation Slots (Per Month) | None / Stripe Customer Unmapped | Limited Access |
| Pro Premium Plan | High-Volume Syntheses (High Priority) | Active checkout.session.completed Sync | Unlocked Access |
* Note: The Express API intercepts checkout webhook events directly from Stripe servers to upgrade MongoDB account levels instantly, ensuring zero delays in the user payment experience.
Key Benefits & Tangible Outcomes
Fast AI Inference
Llama-3-70B on Groq Cloud produced metadata at 280+ tokens per second in testing, faster than typical general-purpose LLM endpoints.
Automated Billing Sync
Stripe Payment webhook loops eliminate manual account upgrades, allowing premium tier subscriptions to process securely in real-time.
Unified Single-Domain Routing
Double-prefix rewrites bypass the complex task of organizing cross-origin credentials, serving the whole SaaS from one Vercel URL.
Reliable Production Builds
Dynamic suspense boundaries avoid Next.js compiler exceptions in the tested setup, producing stable deployment builds and predictable code structures.
Want to build high-performance PWAs or full-stack platforms?
Let's coordinate to build custom software, offline-first mobile webapps, or high-throughput databases.
Get in Touch →