Building the Next Bean Website: A Deep Dive into Node.js, Next.js & React

Why I’m Rebuilding Bean from the Ground Up

If there’s one thing I love, it’s building things that work better, faster, and smarter. That’s exactly what I’m doing with Bean’s next website—a complete overhaul that’s going to take us from “that’ll do for now” to “this is how it should be.”

I’ve been knee-deep in Node.js, Next.js, and React, and honestly? I’m loving it. These tools are game-changers for performance, scalability, and giving users (and Google) exactly what they want—speed, efficiency, and a smooth experience.

Tech Stack Breakdown

This build isn’t just about using modern frameworks—it’s about optimising every aspect of the site for performance, usability, and scalability. Here’s the core tech stack:

• Next.js – Handles server-side rendering (SSR) and static site generation (SSG) for optimal performance and SEO.
• React – Provides a fast, interactive UI with reusable components.
• TypeScript – Ensures type safety and better maintainability.
• Node.js – Powers the backend for API interactions and server-side logic.
• Sanity – A headless CMS for blog content management.
• Ubuntu Server (cPanel) – Self-hosted for maximum control and flexibility.
• Matomo – Privacy-focused analytics tracking.
• SuiteCRM – Manages mailing lists and CRM tracking.
• Google Analytics 4 (GA4) & Google Tags – Tracks user interactions and behaviour.
• NPM & VS Code – My go-to development tools for managing dependencies and writing clean code.

Why Next.js? Because I Want It Done Right.

I could have stuck with WordPress, Laravel, or any of the usual suspects—but let’s be real, I’ve been itching to go fully modern, fast, and lightweight for a while now.

Here’s why Next.js made the cut:

✅ Speed & Performance – Static site generation (SSG) and server-side rendering (SSR) make pages load lightning-fast. Google loves that.
✅ SEO-Friendly – Built-in optimisations mean I don’t have to faff about with plugins to get my content ranking properly. We’re already sitting at 99% SEO score on Google’s checker in beta testing.
✅ Scalability – Bean is growing. I need a site that grows with it instead of needing a full rebuild every time we scale.
✅ Lazy Loading & Image Optimisation – We’re using next/image for automatic image optimisations and lazy loading to enhance performance.

It’s the perfect framework for where I want Bean to go next—future-proof, slick, and not bogged down by bloat.

React: The Powerhouse Behind It All

React isn’t new to me, but it’s the first time I’m fully leaning into it for a major business website. Why?

• Component-based structure – Reusable components make updates and iterations effortless.
• Interactive UI – The new site integrates 3D elements and dynamic components to create a visually engaging experience.
• Better Dev Experience – Let’s be honest, I love working in React. It’s clean, structured, and once you’re in the zone, it just makes sense.

It’s a huge shift from our current setup, but it’s a shift that’s going to pay off.

Sales Funnel & Lead Generation

A great website doesn’t just look good—it drives business. The new Bean site is built to:

🎯 Generate leads with dynamic landing pages for different services.
📊 Track visitor behaviour using Matomo and Google Analytics 4 (GA4).
📧 Automate CRM processes with SuiteCRM, integrating sales funnels directly into our inbox.
⚡ Optimise conversions with faster navigation, intuitive CTAs, and fully responsive design.

Security & Hosting

We’re self-hosting the site on a dedicated Ubuntu server running cPanel with full control over the backend. Security is a priority, so we’re implementing:

• Cloudflare Protection – Adding an extra layer of DDoS protection and performance enhancements.
• SSL Encryption – Full end-to-end security.
• Server-Side Validations – Ensuring API interactions are secure.
• Rate Limiting – Protecting against excessive API requests.

We’re self-hosting the site on a dedicated Ubuntu server running cPanel with full control over the backend. Security is a priority, so we’re implementing:

• SSL Encryption – Full end-to-end security.
• Server-Side Validations – Ensuring API interactions are secure.
• Rate Limiting – Protecting against excessive API requests.

The Goal: A Website That Actually Works for the Business

Right now, Bean’s website is fine. It does what it needs to do. But it doesn’t work hard enough for me.

The new Bean site will:
🎯 Actively generate leads with sales funnels built into the structure.
📊 Track visitor behaviour properly—no more relying on basic analytics.
⚡ Be optimised for speed & conversions—because slow sites don’t sell.

What’s Next?

I’m deep into the build right now, ironing out the structure, UI, and core functionalities. Once the framework is locked in, it’s all about:
✅ Designing a visually stunning, on-brand experience.
✅ Implementing advanced lead tracking & marketing automation.
✅ Making sure it’s rock-solid in performance and security.

This isn’t just a redesign—it’s a complete re-engineering of how Bean operates online.

If you’re a small business thinking about your website’s next steps, take a minute to ask:

• Is my website working for me, or is it just... there?
• Does it generate leads, track behaviour, and convert visitors into clients?
• Is it built for where my business is going, or is it stuck where I was?

If the answer is “I’m not sure”—it’s time to rethink your approach.

I’ll be sharing more updates on the build process soon, so if you’re interested in the tech, strategy, or behind-the-scenes chaos, keep an eye out. 😉

Would love to hear from other business owners or devs—what’s been your biggest game-changer in web development recently?

Let’s talk