Technical debt

Next.js

Framework-first hiring

The library for web and native user interfaces

React

SaaS scalability

Startup technical audit

Early audits typically cost 10–20% of a complete rebuild

Hiring React or Next.js devs isn’t enough. Learn how framework-first choices cause tech debt and how founders scale SaaS & E-Commerce via better engineering.

SaaS & E-Commerce Success Isn’t About the Hottest Framework — Build Scalable Software That Lasts

SaaS & E-Commerce Success Isn’t About the Hottest Framework — Build Scalable Software That Lasts.jpg

ToC: SaaS & E-Commerce Success Isn’t About the Hottest Framework — Build Scalable Software That Lasts

Blog post TOC_ SaaS & E-Commerce Success Isn’t About the Hottest Framework — Build Scalable Software That Lasts.jpg

thumbnail_SaaS & E-Commerce Success Isn’t About the Hottest Framework — Build Scalable Software That Lasts.jpg

<h2 id="h2-when-code-isnt-enough-why-feature-complete-fails-in-production-8wm8rz">When Code Isn’t Enough: Why “Feature Complete” Fails in Production</h2>The software industry often confuses writing code with solving problems. That misconception quietly costs millions from startups and established companies alike. Teams rush to deliver MVPs built by developers who can “code React” but can’t design systems that scale — leading to unmaintainable apps, rebuild cycles, and soaring expenses.One founder’s experience made this painfully clear: after paying for a “senior Next.js developer”, their entire frontend had to be rewritten within months. When that story was <a href="https://www.linkedin.com/posts/varbin_nextjs-react-dev-activity-7363232479698112515-0CO5?utm_source=linkedin_articles&amp;lipi=urn%3Ali%3Apage%3Ad_flagship3_pulse_read%3B1qv362i5SUq5zwd6ckF9Pw%3D%3D">shared on LinkedIn</a>, hundreds of founders and CTOs echoed the same message: framework fluency does not equal engineering maturity.<blockquote>“Code is like humor. When you have to explain it, it’s bad.” — <a href="https://x.com/housecor">Cory House</a></blockquote>The pattern repeats worldwide. Companies of all shapes and sizes focus on checklists and tool adoption, prioritize building features over hiring engineers, and rack up technical debt faster than they can manage growth. In 2022, the Consortium for Information Technology Software Quality (CISQ) <a href="https://www.it-cisq.org/the-cost-of-poor-quality-software-in-the-us-a-2022-report/">estimated that U.S. companies lose over</a> $2.4 trillion annually due to poor software quality — money wasted on rebuilds, missed releases, and slow deliveries.<h2 id="h2-why-developers-think-they-were-hired-just-to-code-yhj5le">Why Developers Think They Were Hired Just to Code</h2>Job descriptions and incentives influence developer behavior. When postings appear like this:<ul><li>3+ years React</li><li>5+ years Next.js</li><li>TypeScript proficiency</li><li>Redux knowledge</li><li>REST API experience</li></ul>…it tells candidates, “your value is measured by tools and frameworks, not thinking.”Then performance reviews reinforce that idea. Developers are rewarded for tickets closed and story points completed, rarely for system reliability, maintainability, or user satisfaction.Add AI to the mix and the situation worsens. Tools like GitHub Copilot and ChatGPT allow junior developers to generate complex code without understanding its implications.<a href="https://survey.stackoverflow.co/2023/#sentiment-and-usage-ai-sent">According to Stack Overflow</a>, 77% of developers use AI assistants — yet many can’t critically evaluate the output. The result? When combined with vague requirements and little architectural oversight, it’s no surprise that inexperienced developers produce feature‑complete apps that crumble under real‑world conditions.<h2 id="h2-code-audit-reveals-the-real-cost-of-framework-first-development-f0nnma">Code Audit Reveals: The Real Cost of Framework-First Development</h2>When we inspected what was supposed to be a “clean React/Next.js app,” the first file told the whole story: one component managed 15 independent states with useState, lacked error handling, and had disabled ESLint rules.<img src="https://res.cloudinary.com/dlxpwfaic/image/upload/v1760557271/ewha9_173610_56d342fa17.jpg" alt="One component managed 15 independent states with useState, lacked error handling, and had disabled ESLint rules">This wasn’t an isolated mistake — it was structural. The full audit revealed predictable patterns of technical debt stemming from a framework-first hiring approach.Here is a compact table that provides a better understanding of the current state of the client project and the level of issues.<figure class="table" style="width:97.65%;"><table class="ck-table-resized"><colgroup><col style="width:22.2%;"><col style="width:20.71%;"><col style="width:29.33%;"><col style="width:27.76%;"></colgroup><thead><tr><th>Priority</th><th>Category</th><th>Key Technical Issues</th><th>Business Impact</th></tr></thead><tbody><tr><td>P0 — Critical</td><td>TypeScript &amp; Safety</td><td>•&nbsp;234 <code>any</code> types •&nbsp;Disabled strict mode • Inconsistent props •&nbsp;Missing <code>null</code> / <code>undefined</code> guards</td><td>•&nbsp;Runtime crashes •&nbsp;Unclear contracts •&nbsp;Slower onboarding</td></tr><tr><td>&nbsp;</td><td>Firebase Integration</td><td>•&nbsp;943-line utils file •&nbsp;Unclosed listeners •&nbsp;No retry logic •&nbsp;No central error handler</td><td>•&nbsp;Cloud-cost waste •&nbsp;Data loss •&nbsp;Unreliable sync</td></tr><tr><td>&nbsp;</td><td>Component Architecture</td><td>•&nbsp;1000+ line components; •&nbsp;UI + logic coupled; •&nbsp;No domain layers</td><td>•&nbsp;Slower feature delivery •&nbsp;Complex debugging •&nbsp;Scaling blocked</td></tr><tr><td>P1 — High</td><td>State Management</td><td>•&nbsp;Context overuse •&nbsp;Prop drilling •&nbsp;Inconsistent updates •&nbsp;No ownership split</td><td>•&nbsp;Performance lag •&nbsp;UI instability •&nbsp;Team confusion</td></tr><tr><td>&nbsp;</td><td>Performance &amp; Optimization</td><td>•&nbsp;No memoization •&nbsp;No code-splitting •&nbsp;Blocking main thread</td><td>•&nbsp;5-8s LCP •&nbsp;Lost SEO traffic •&nbsp;Conversion drop</td></tr><tr><td>&nbsp;</td><td>Security &amp; Error Handling</td><td>•&nbsp;104 <code>console.log</code>s in prod •&nbsp;Exposed API keys •&nbsp;No global boundaries</td><td>•&nbsp;Data leak risk •&nbsp;Compliance issues •&nbsp;Brand damage</td></tr><tr><td>P2 — Medium</td><td>Code Quality &amp; Consistency</td><td>•&nbsp;Mixed naming •&nbsp;Duplicate helpers •&nbsp;Dead code •&nbsp;CSS clutter</td><td>•&nbsp;40% larger bundles •&nbsp;Harder maintenance</td></tr><tr><td>&nbsp;</td><td>Testing &amp; Documentation</td><td>•&nbsp;Zero tests •&nbsp;No prop/API docs •&nbsp;Missing JSDoc</td><td>•&nbsp;Regression bugs •&nbsp;No knowledge transfer</td></tr><tr><td>&nbsp;</td><td>Accessibility &amp; UX</td><td>•&nbsp;No ARIA •&nbsp;No keyboard nav •&nbsp;No loading states</td><td>•&nbsp;Legal risk •&nbsp;User abandonment</td></tr><tr><td>P3 — Low (Structural)</td><td>Architecture Improvements</td><td>•&nbsp;No service layer •&nbsp;API calls in UI •&nbsp;No caching •&nbsp;No offline support</td><td>•&nbsp;Slow data fetch •&nbsp;Limited scaling</td></tr><tr><td>&nbsp;</td><td>Developer Experience (DX)</td><td>•&nbsp;No Storybook •&nbsp;No lint hooks •&nbsp;No debug tools</td><td>•&nbsp;Low morale •&nbsp;Bug leakage •&nbsp;Slow reviews</td></tr><tr><td>P4 — Forward-Looking</td><td>CI/CD &amp; Observability</td><td>•&nbsp;No auto build/test •&nbsp;No perf tracking •&nbsp;No structured logs</td><td>•&nbsp;Regression blind spots •&nbsp;Release anxiety</td></tr><tr><td>&nbsp;</td><td>Scalability &amp; Maintainability</td><td>•&nbsp;Hard-coded configs •&nbsp;No env separation •&nbsp;No feature flags</td><td>•&nbsp;Costly refactors •&nbsp;Downtime on deploys</td></tr></tbody></table></figure>P0 - Critical → Must fix immediately (show-stoppers, severe risks)P1 - High → Fix within 2 weeks (major performance/security issues)P2 - Medium → Fix within 1 month (quality, UX, consistency gaps)P3 - Low → Fix within 3 months (long-term architecture &amp; tooling improvements)P4 - Forward-Looking → Fix within 3 months (TODO list)The most critical issues included massive <code>useState</code> overuse creates performance bottlenecks. Thousands of lines of unused code inflate bundle sizes by 40%, and a complete reliance on client-side rendering, despite using Next.js, effectively ignores the framework’s core performance optimizations. The developer had disabled most ESLint rules, avoided TypeScript’s strict mode, and implemented no code review processes, resulting in a system where every architectural mistake was directly introduced into production.<blockquote>“If you think good architecture is expensive, try bad architecture.” — <a href="http://www.laputan.org/">Brian Foote</a>, Software Architect (author of “Big Ball of Mud”)</blockquote>That single quote encapsulates the entire audit: the illusion of “cheap” development often leads to the most expensive outcomes.<h2 id="h2-hidden-business-costs-of-technical-debt-0xagdq">Hidden Business Costs of Technical Debt</h2>Every architectural shortcut and misuse of the framework added compound costs that could eventually threaten the company’s competitive position and growth trajectory.Each problem was a predictable result of framework-focused development. The developer was familiar with React syntax but lacked the engineering judgment to select suitable rendering strategies, manage application state effectively, or apply performance optimizations.More importantly, they didn’t grasp the business impact of these technical choices—such as how poor <a href="https://developers.google.com/search/docs/appearance/core-web-vitals">Core Web Vitals</a> affect SEO rankings, how excessive client-side rendering lowers conversion rates, or how architectural inconsistency makes future development significantly more costly.Excessive client-side rendering and bloated JavaScript bundles caused pages to load in 5-8 seconds instead of the industry-standard 2 seconds, directly leading to user abandonment. Research from Google shows that 53% of users leave sites that take longer than 3 seconds to load³, highlighting that technical shortcuts lead to measurable revenue loss.<h3 id="h3-the-problem-solver-vs-checklist-coder-5tippq">The Problem-Solver vs. Checklist Coder</h3><figure class="table"><table><thead><tr><th>&nbsp;</th><th>Checklist Coder</th><th>Problem-Solver</th></tr></thead><tbody><tr><td>Mindset</td><td>•&nbsp;Executes tasks •&nbsp;Asks “what?”</td><td>•&nbsp;Explores context •&nbsp;Asks “why?”</td></tr><tr><td>Approach</td><td>Optimizes inside framework</td><td>Chooses architecture for outcome</td></tr><tr><td>Handling Change</td><td>Struggles with new requirements</td><td>Adapts patterns to constraints</td></tr><tr><td>Example Scenario</td><td>Adds <code>useMemo</code> to fix lag</td><td>Moves logic server-side or caches data</td></tr></tbody></table></figure>A problem-solver treats each feature as a business experiment rather than just a ticket. Checklist coders deliver quickly, but build up hidden risks.<h2 id="h2-how-to-build-engineering-culture-beyond-framework-skills-aezl7l">How to Build Engineering Culture Beyond Framework Skills</h2>Creating engineering excellence requires more than hiring the right people—it demands systematic practices that promote quality thinking over quick fixes.The audit revealed what happens when teams lack these guardrails: even well-intentioned developers make costly mistakes when organizational culture doesn’t support engineering discipline.Founders and CTOs must create processes and incentives that make good engineering the default:<ul><li>Conduct code reviews that focus on architectural decisions and performance, rather than just syntax and style. High‑impact changes should be approved by senior engineers who understand both technical and business implications.</li><li>Automate quality checks. Use tools such as ESLint, Prettier, or Biome with strict rules to catch anti-patterns, and integrate continuous integration (CI) pipelines to run tests, security scans, and performance benchmarks on every pull request.</li><li>Enforce type safety. Adopt TypeScript in strict mode, which catches errors early and serves as living documentation (it won’t replace the real dev documentation).</li><li>Invest in training. Provide education on architecture, performance optimisation, and business fundamentals. Encourage developers to participate in user research and product discussions so they understand the impact of their decisions.</li><li>Measure what matters. Track reliability, performance, and customer satisfaction alongside feature velocity. Celebrate engineers who prevent problems and improve design rather than those who simply ship the most code.</li></ul>When technical practices align with company values and user expectations, quality becomes a competitive advantage. Frameworks evolve, but engineering excellence endures.<h2 id="h2-next-steps-for-founders-smb-owners-and-ctos-zkdkhk">Next Steps for Founders, SMB Owners and CTOs</h2>If this story feels too familiar, don’t wait for a crisis to act. Here are practical steps to take now.<ul><li>Audit your systems. Run basic performance tests using tools such as Google PageSpeed Insights. Check bundle sizes and look for signs of architectural missteps (monolithic components, heavy client‑side logic).</li><li>Review your development process. Ensure that code reviews are substantive and that CI pipelines block poor code from reaching production. Examine whether architectural decisions are documented and revisited.</li><li>Reassess your hiring criteria. Update job descriptions to emphasise problem‑solving ability, architectural thinking, and communication skills. Balance teams with senior engineers who can mentor juniors and guide technical decisions.</li><li>Prioritise continuous improvement. Implement quality gates, performance monitoring, and technical leadership structures. Small investments here prevent the massive cost of later rebuilds.</li></ul><h3 id="h3-when-to-seek-external-review-kezssk">When to Seek External Review</h3>If you observe persistent slowness, high regression rates, or developer frustration, commission a technical audit.Independent reviewers often identify architectural flaws that internal teams may overlook.Early audits typically cost 10–20% of a complete rebuild and prevent months of delay.<h2 id="h2-next-steps-for-software-engineers-bdmnex">Next Steps for Software Engineers</h2>Framework knowledge might land you a job, but engineering excellence sustains your career. To become a developer who adds long‑term value:<ul><li>Learn the business context. Ask why features matter, how they affect revenue or user satisfaction, and what metrics they influence. Understanding the problem improves your solutions.</li><li>Master architectural patterns and performance. Study design patterns, layering strategies, and rendering techniques. Use tools like React DevTools and browser performance APIs to profile and optimize your code.</li><li>Embrace quality tools. Configure ESLint, Prettier, or Biome with strict rules. Advocate for TypeScript and automated testing to catch errors early.</li><li>Participate in code reviews thoughtfully. Focus on design, performance, and maintainability. Share knowledge and learn from peers.</li><li>Invest in continuous growth. Develop transferable skills—system design, database fundamentals, security, and user experience. Stay connected to users through support rotation or user research to understand the real‑world impact of your code.</li></ul>The developers who advance their careers aren’t necessarily the ones with the most GitHub stars or the latest framework certifications. They’re the ones who solve meaningful problems, communicate effectively, and build systems that scale with the business.<h2 id="h2-conclusion-70bb02">Conclusion</h2>Software development success isn’t about using the hottest framework—it’s about hiring and developing engineers who think holistically and solve real business problems. Companies that equate code output with problem-solving risk compounding technical debt and future failures.By focusing on engineering judgment, architectural discipline, and aligning technical practices with business goals, both founders and software engineers can create sustainable and competitive SaaS and E-commerce solutions.

SaaS & E-Commerce success isn’t about the hottest framework — it’s about building systems that last

thumbnail_Blog post TOC_ SaaS & E-Commerce Success Isn’t About the Hottest Framework — Build Scalable Software That Lasts.jpg

For UI Component Libraries:  5 Must-Try Picks for Next.js in 2025

UI Component Libraries

Frontend

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Tailwind CSS

An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.

Radix

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

shadcn/ui

Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.

Beautiful, fast and modern React UI library for building accessible and customizable web applications.

HeroUI

Let's Build a Bold Experience Together

Explore the top 5 UI component libraries for Next.js in 2025—from Tailwind CSS and Radix UI to shadcn/ui, Material UI, and Hero UI.

UI Component Libraries:  5 Must-Try Picks for Next.js in 2025

ui-component-libraries-5-must-try-picks-for-next-js-in-2025.jpg

Top 5 UI Libraries for Your Next.js Project in 2025

Blog post TOC_ Top 5 UI Component Libraries for Your Next.js Project in 2025.jpg

thumbnail_ui-component-libraries-5-must-try-picks-for-next-js-in-2025.jpg

UI Component Libraries:  5 Must-Try Picks for Next.js in 2025 

thumbnail_Blog post TOC_ Top 5 UI Component Libraries for Your Next.js Project in 2025.jpg

Stripe powers online and in-person payment processing and financial solutions for businesses of all sizes.

Stripe

The web development framework for building modern apps.

Angular

Firebase, Google's mobile and web app development platform that helps developers build apps and games that users will love.

Firebase

Express is a fast, unopinionated, minimalist web framework for Node.js, providing a robust set of features for web and mobile applications.

Express.js

👋 Let's Build a Bold Experience Together

Fix StripeSignatureVerificationError in Firebase Functions with Express.js and Angular. Debug, prevent body parsing issues, and test Stripe webhooks.

connect-stripe-to-angular-toc.jpg

thumbnail_stripe-angular-firebase-how-to-fix-webhook-signature-errors.jpg

stripe-angular-firebase-how-to-fix-webhook-signature-errors.jpg

<h3 id="h3-intro-m25xmy">Intro</h3>One of our long-term clients recently approached us with a new request. After integrating Stripe’s JavaScript library, they started encountering cryptic error messages. The surprising part? Stripe had been integrated into the project two to three years ago, and it was working fine in the development environment but failing in production.The project had been put on hold multiple times, leaving the issue unresolved - until now.<h3 id="h3-problem-m1pryc">Problem</h3>The error message we encountered was:<blockquote>StripeSignatureVerificationError: No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe? <a href="https://github.com/stripe/stripe-node#webhook-signing">Stripe Node.js Webhook Signing Docs</a></blockquote>This error indicated an issue with Stripe webhook signature verification, likely caused by how the request body was being processed before reaching Stripe’s validation mechanism.<h3 id="h3-tech-stack-sx1phm">Tech Stack</h3>The project was built using the following technologies:

Connect Stripe to Angular project with Firebase

<h3 id="h3-diving-into-the-investigation-zis8sq">Diving into the Investigation</h3>Our first step was to analyze Firebase logs and Stripe dashboard logs while inspecting the responses from the Stripe API. However, the error message was generic and didn’t provide enough context.While searching through Stripe’s developer documentation, we found the following warning:<blockquote>Stripe requires the raw body of the request to perform signature verification. If you’re using a framework, make sure it doesn’t manipulate the raw body. Any manipulation to the raw body of the request causes the verification to fail.</blockquote>This seemed like a probable cause, but we needed confirmation.<h3 id="h3-challenges-we-faced-efvirh">Challenges We Faced</h3><ul><li>The project had been maintained by multiple development teams over three years, making it difficult to track changes.</li><li>The application’s backend ran on Firebase Functions with Express.js middleware, which might be altering the request body.</li><li>Local debugging was impossible due to dependencies on the production environment.</li><li>Testing Stripe webhooks required deploying every change to production, causing delays.</li></ul><h3 id="h3-approach-to-fixing-the-issue-zpu2tn">Approach to Fixing the Issue</h3>To streamline debugging and avoid production delays, we rebuilt a minimal version of the backend focused on payment processing. The only things that we needed to reimplement were Express.js, middlewares, and Firebase Functions, which were in charge of payment handling. This step helped us to deal with two issues:<ul><li>Couldn’t run the application on the local machine</li><li>Debug possible root causes</li></ul>For the next issue (connecting to Stripe webhooks), we decided to use <a href="https://docs.stripe.com/stripe-cli/overview">Stripe CLI</a> and <a href="https://github.com/stripe/stripe-node">stripe-node</a> (Node.js library for the Stripe API). Fortunately, Stripe CLI provides tools to connect to the existing environment, listen to it, and forward responses somewhere else (in our case, it was a local environment with a pre-configured API set - the same as in the client environment).During debugging, one of our developers suggested that some middleware might be modifying the request body before it reached Stripe’s signature validation.Here’s the original Express.js middleware stack:<pre><code class="language-typescript">app.use(cors({ origin: true }));
app.use(helmet());
app.use(express.json()); // it's the main root cause
app.use(express.urlencoded({ extended: true }));
app.use(compression());</code></pre>We decided to start our testing environment without middlewares at all and then add one by one. On each stage we did a testing payment and see if the error is popping up.We use <a href="https://github.com/stripe-archive/developer-office-hours/tree/master/2020-10-30-client-libraries/node/webhooks">one of the examples</a> from the Stripe dev team and changed it for our needs. Specifically speaking, we added middlewares and payment events handling.On the first run we didn’t face any issues, the Stripe API returns success and everything went as expected.We still didn’t face any issues until we added <code>express.json()</code> middleware. That was the main root cause. To make a long story short, this middleware parses incoming requests with JSON payloads and is based on <a href="https://expressjs.com/resources/middleware/body-parser.html">body-parser</a>. A new&nbsp;<code>body</code>&nbsp;object containing the parsed data is populated on the&nbsp;<code>request</code>&nbsp;object after the middleware (i.e.&nbsp;<code>req.body</code>), or an empty object (<code>{}</code>) if there was no body to parse, the&nbsp;<code>Content-Type</code>&nbsp;was not matched, or an error occurred.<h3 id="h3-final-fix-8z103v">Final Fix</h3>To prevent body parsing for Stripe webhook endpoints, we modified the middleware setup:<pre><code class="language-typescript">app.use(cors({ origin: true }));
app.use(helmet());
app.use((req, res, next) =&gt; {
 if (req.url.startsWith("/api/user/payment-success")) {
 next();
 }
 express.json()(req, res, next);
});
app.use(express.urlencoded({ extended: true }));
app.use(compression());</code></pre><h3 id="h3-why-this-works-vmupx6">Why this Works</h3><ul><li>Requests to <code>/api/user/payment-success</code> bypass <code>express.json()</code>, ensuring the raw body reaches Stripe.</li><li>Other routes still use <code>express.json()</code> for standard JSON parsing.</li></ul>After testing, we deployed the fix. The client’s response?<blockquote>🎉&nbsp;it works. So cool. What exactly have you done? What was the issue?</blockquote><h3 id="h3-key-takeaways-898o2b">Key Takeaways</h3><ul><li>Use Stripe CLI to test webhooks locally before deploying.</li><li>Recreate a minimal version of the backend for debugging.</li><li>Check middleware modifications - avoid using <code>express.json()</code> on webhook endpoints.</li><li>Review Stripe dev docs and API logs for debugging clues.</li></ul><h3 id="h3-final-thoughts-3bfycr">Final Thoughts</h3>This issue highlights how a single middleware can break critical functionality. Understanding how frameworks handle request bodies is crucial when integrating third-party APIs like Stripe.By following structured debugging steps, leveraging developer tools like Stripe CLI, and simplifying our approach, we quickly identified and fixed the problem.

Angular is a web framework that empowers developers to build fast, reliable applications.

Maintained by a dedicated team at Google, Angular provides a broad suite of tools, APIs, and libraries to simplify and streamline your development workflow. Angular gives you a solid platform on which to build fast, reliable applications that scale with both the size of your team and the size of your codebase.

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

Bootstrap

Ngx Bootstrap

Firebase was a company that developed backend software. It was founded in San Francisco in 2011 and was incorporated in Delaware. In 2014, Firebase was bought by Google. Its name continues as a set of backend cloud computing services and application development platforms provided by Google.

TypeScript

Sass

Jenkins – an open source automation server which enables developers around the world to reliably build, test, and deploy their software.

Stay inspired by Varbintech blog

We share our knowledge and experience in E-Commerce and SaaS solutions, front-end development, software engineering, and more.

contact@varbintech.com