I am building a web app called SorryClub, a collection of financial and productivity tools, all by myself. Currently, there are over 40 calculators, and I am continuously adding more. I would like to share how I technically structured it.
Technology Stack
- Framework: Next.js 16 (App Router, React 19, Turbopack)
- DB: TiDB Serverless (MySQL compatible)
- Storage: Cloudflare R2
- Hosting: Vercel Pro
- Auth: NextAuth 4 (Google, JWT)
- Payments: Lemon Squeezy
- AI: OpenAI GPT-4o (SEO Article Generation), Replicate Flux 1.1 Pro (Cover Image)
- Charts: Recharts
- Styling: Tailwind CSS 4 (Dark Mode Only)
Managing 40 Tools in a Single Codebase
All tools follow the same layout pattern. layout.js handles metadata, JSON-LD, FAQs, and related tools, while page.js is responsible for client-side logic. By establishing this pattern, we no longer need to worry about the structure when adding new tools.
Tool metadata (title, icon, category, gradient color) is managed in the database. The frontend uses slug-based dynamic routing, and the relationships between tools are managed in a separate file to be used for recommending related tools.
Premium Model: Does not lock pages
All tools provide core features for free. This is because users arriving via SEO traffic will leave immediately if they open a page and find it locked.
Instead, only advanced features (Monte Carlo simulation, scenario saving, advanced analytics) have been separated into the PRO model.
const isPro = userPlan === "PRO" || userPlan === "PRO_PLUS";
This single line handles the PRO branch consistently across all tools.
Server-side Pageview Tracking
We have built a proprietary tracking system unaffected by ad blockers. It collects IP, User-Agent, Country, and Language from API routes and records dwell time using sendBeacon. You can view daily traffic, patterns by time of day and day of the week, bounce rates, and dwell time by entry source on the admin dashboard.
AI-based SEO content generation
We configure SEO keyword manifests for each tool, and GPT-4o generates relevant articles based on them. Cover images are created using Replicate's Flux 1.1 Pro and stored on Cloudflare R2. By publishing articles with various keywords per tool, we are securing long-tail SEO.
Things I Learned
- Consistent patterns are the most important. If I had created 40 different tools, maintenance would have been impossible.
- It is better for revenue to keep it open for free. If you lock it up, traffic won't come at all.
- It is worth creating your own analytics. You can view detailed data that is not visible in GA.
- AI article generation is definitely effective for SEO. However, quality control is key.
I am currently running on the PRO $5/month plan. After posting on Reddit, 133 people visited in just one day, and I got my first sign-up.
Feedback or questions are welcome.
Top comments (1)
This is really solid. I tried something similar before and hit a mess around tool #10 😅
The “same layout + metadata-driven tools” part is the real win here — saves tons of time later. Also agree on not locking core features… every time I tested paywalls on small tools, users just bounced.
Curious how you’re handling SEO quality control though — that’s where things usually break long-term.