tagForge AI SEO Generator
High-Performance Full-Stack AI SaaS with Google Cloud Identity Synchronization and Dynamic Stripe Monetization
Executive Summary
tagForge is a premium, high-performance AI-powered SEO SaaS application built to enable digital marketers, content creators, and SEO professionals to instantly synthesize production-grade 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, cuts hosting expenses to zero, and achieves sub-second SEO content generation rates of **over 280 tokens per second**.
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 0-error 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 | Unlimited 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
High-Speed AI Inference
Utilizing Llama-3-70B on Groq Cloud bypasses the sluggish response rates of typical LLM services, yielding sub-second metadata formulations.
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.
0-Error Production Builds
Integrating dynamic suspense boundaries prevents Next.js compiler exceptions, leading to robust deployment builds and stable code structures.