DEV Community

Cover image for I Replaced WordPress + 3 Paid Tools With a Custom Stack for a $48K/Month Business. Here's the Full Breakdown.
Panda Code Gen
Panda Code Gen

Posted on

I Replaced WordPress + 3 Paid Tools With a Custom Stack for a $48K/Month Business. Here's the Full Breakdown.

Last year I was helping run an ecommerce business selling custom patches. The setup was the standard small business nightmare:

WordPress with WooCommerce for the storefront
A third-party CRM that didn't fit our workflow
Spreadsheets for production tracking and reporting
A separate attendance tracker nobody liked
20+ plugins holding it all together

Monthly cost: $350 between hosting, plugins, CRM subscriptions, and random tools. Every WordPress update was a coin flip. Plugin conflicts were a weekly event. The CRM couldn't handle our order lifecycle. And the pricing? We sell 9 types of custom patches with size variations, quantity tiers, backing options, and border types. Every combination is a different price. WordPress had no way to do this. Customers would fill out a form and wait for a manual quote.
So I rebuilt everything from scratch. The whole system. In about 30 days.
What I Built

  1. Full Ecommerce Storefront
    Replaced the entire WordPress + WooCommerce setup with a Next.js 14 app using the App Router.
    The storefront handles 13 product types across 9 patch categories and 4 additional products. Each category page has its own specifications, pricing logic, and configuration options. The pricing calculator runs client-side and handles the full complexity: patch type, size, quantity tiers, backing options, border types. Customers see real prices instantly instead of waiting 24 hours for a manual quote.
    Stack: Next.js, TypeScript, Tailwind CSS, Sanity CMS for content management, Stripe for payments. Deployed on Vercel.
    Content editors log into Sanity Studio and manage products, blog posts, FAQs, hero banners, and everything else without touching code. ISR keeps pages fresh without rebuilding the whole site.

  2. Full CRM + Operations Platform
    This was the bigger build. The business runs a 7-person sales team and needs to track orders from first contact through production to delivery.
    Built a complete CRM with:

Full order lifecycle management (NEW_ORDER → IN_PRODUCTION → READY_TO_SHIP → SHIPPED → DELIVERED)
Role-based access control. Sales agents see only their orders. Production sees only what they need. Admins see everything.
Customer intelligence with duplicate detection, lifetime value tracking, and order history
Quote management with PDF generation and quote-to-order conversion
Revenue analytics, profit margin tracking, and lead source analysis
Employee clock-in/out system with shift management and overtime calculation
Bulk cost entry for monthly expense tracking and profit calculations
CRM order lifecycle and role-based access control

Stack: React with Vite, TypeScript, Tailwind CSS, Supabase for database, auth, and storage. Framer Motion for animations. TanStack Query for server state.

The database runs on PostgreSQL with Row Level Security policies enforcing permissions at the database level, not just the UI. There's an API interceptor with exponential backoff retry, Zod validation on all inputs, rate limiting on form submissions, and offline-first architecture with a Service Worker.

  1. The Database The schema has tables for orders, quotes, order history, monthly costs, order communications, email templates, attendance sessions, attendance summaries, and performance metrics. Orders track everything: customer info, design details, production files, shipping info, financials with auto-calculated profit (order amount minus production, shipping, and marketing costs). Every change is logged automatically through triggers so there's a complete audit trail. The attendance system handles Pakistan timezone with a 5 AM cutoff for shift boundaries, auto-closes stale sessions after 10 hours, and recalculates monthly summaries through triggers whenever a session is updated.

RLS policies ensure sales agents can only see their own orders unless they have explicit view-all permissions. Admins bypass everything. Production users can update specific fields but can't touch financials or change order status.

CRM dashboard showing order management and sales pipeline
The Numbers
Before (WordPress + paid tools):

Site load time: 3+ seconds
Google PageSpeed: under 50
Monthly infrastructure: $200+
Manual quote turnaround: 24 hours
Data scattered across 4 different platforms

Old Wordpress Website

After (custom stack):

Site load time: under 1 second
Google PageSpeed: 95+
Monthly infrastructure: under $25
Quote turnaround: instant (live calculator)
Everything in one system

The business does $48K+/month in revenue on this stack. The CRM manages the full sales pipeline. The storefront converts visitors without manual intervention. Total infrastructure cost is less than a Netflix subscription.
What I'd Do Differently
Start with the data model. I spent too long on UI before nailing down the database schema. The order lifecycle, permission system, and financial calculations should be designed first because they dictate everything else.
Don't underestimate content migration. Moving 50+ blog posts, 9 product categories, and all the associated images from WordPress to Sanity took longer than expected. Build a migration script early.
Supabase RLS is powerful but tricky. Row Level Security policies that reference other tables can create recursive loops. I ended up writing helper functions like get_user_role() and is_admin() with SECURITY DEFINER to avoid recursion.
Tools That Made This Possible
Claude Pro and Claude Code handled a huge amount of the development velocity. AI is great for scaffolding components, writing database migrations, and debugging edge cases. But it doesn't replace architecture decisions. You still need to design the schema, plan the permission model, and make the product decisions. AI accelerates the building. It doesn't replace the thinking.

The Stack at a Glance

The Stack at a Glance

Layer Tool Cost
Frontend (storefront) Next.js 14, TypeScript, Tailwind Free
Frontend (CRM) React + Vite, TypeScript, Tailwind Free
CMS Sanity.io Free tier
Database + Auth Supabase (PostgreSQL) Free tier
Payments Stripe 2.9% per transaction
Hosting Vercel Free tier
Error Tracking Sentry Free tier
Analytics PostHog Free tier
Email Zoho ~$4/month
Domain Namecheap ~$12/year
Total ~$25/month

Panda Patches custom ecommerce storefront built with Next.js

If you're running a business on WordPress with a stack of plugins and separate tools that don't talk to each other, this is what the other side looks like. It's not easy to build, but once it's running, it basically runs itself.

Happy to answer questions about any part of the build.

Top comments (0)