Hey everyone 👋

I’m Hasnain Makada, Founder & CEO of CodeSphere Agency, and this is a deep dive into one of our latest engineering-heavy projects:

the complete design and development of babulnathalloys.com, a power-generation spare parts platform.

This wasn’t just “another website build.”

It was an end-to-end system designed for scale, speed, and real-world usage by a company handling hundreds of critical diesel engine components every month.

In this case study, I’ll walk through the challenges, the architecture we put in place, and how we used Next.js 16, Prisma, and Supabase to build a powerful, future-ready solution.

---

🧩 Understanding the Challenge

Babulnath Alloys supplies spare parts for engines from Wärtsilä, MAN, MAK, Sulzer, and more.

Their operations involve:

• Managing multiple engine brands and series
• Handling large catalogs of industrial-grade spare parts
• Frequent updates of product photos, specs, and categories
• Responding quickly to enquiries from power plants and marine clients

Their previous digital presence didn’t reflect the structure or reliability of their business.

So our challenge was to build:

• A clean, modern digital identity
• A highly structured product ecosystem
• A scalable backend for continuous expansion
• A simple yet powerful admin panel for non-technical users

This became the foundation of the system.

---

🏗️ Designing the System Architecture

To ensure long-term scalability, we structured the platform around three core data layers:

1. Brands Layer

(Example: Wärtsilä, MAK, MAN, Sulzer…)

Each brand gets its own dedicated section with its own product series.

2. Engine Series Layer

(Example: Wartsila 20, 26, 32, 38 / MAN L28/32 / MAK M20, M25, M32…)

This creates a drill-down path from brand → series → products.

3. Product Categories

(Pistons, liners, valves, fuel pumps, turbocharger parts, bearings, etc.)

This ensures clean organization even when the catalog grows into the thousands.

This structure keeps the UI simple while giving the admin panel room to grow.

---

⚙️ Tech Stack (Next.js 16 + Prisma + Supabase)

We chose a modern and scalable stack built around performance and flexibility.

🔹 Next.js 16

• Server Actions
• Optimized Routing
• Suspense-based loading
• Built-in security enhancements
• Perfect for fast, SEO-ready industrial websites

🔹 Prisma ORM

• Clean database models
• Easy migrations
• Stable type-safe queries
• Ideal for large relational structures like brands → series → products

🔹 Supabase

• A highly reliable managed Postgres database
• Built-in authentication
• Edge functions support
• Perfect for powering the admin panel and enquiry system

The combination of these tools gave us the flexibility of a custom backend with the speed of a modern full-stack framework.

---

🧰 Building the Admin Panel

For Babulnath Alloys, the admin panel was non-negotiable.

They needed complete control without touching a single line of code.

We built a secure, simple, and scalable dashboard where they can:

• Upload & manage product images
• Add new engine series and categories
• Edit brand pages
• Update homepage banners
• Manage all customer enquiries
• View structured tables for products, brands & series

Supabase Auth handles authentication, while Prisma manages the relational structure behind the scenes.

The goal was to give them freedom — and we achieved exactly that.

---

🎨 UX & Design Philosophy

Since the engineering industry depends on clarity and trust, we designed with:

• A blue + yellow industrial palette
• Bold headings for strong brand presence
• Clean product cards
• Mobile-first layouts for field engineers
• Simple navigation focused on speed
• High-contrast CTAs

The entire experience is engineered to feel solid, honest, and reliable — just like their business.

---

🚀 Performance & Optimization

We ensured peak performance with techniques like:

• Next.js 16 caching strategies
• Image optimization + lazy loading
• Database indexing with Prisma + Supabase
• Static generation where possible
• Server Actions for minimal API requests

The result:

a fast, smooth, and efficient corporate-grade platform.

---

🎯 Final Outcome

The final system delivered:

• A professional, modern brand identity
• A scalable backend with room for hundreds of parts
• A simple admin panel that anyone can use
• A fast and secure website built for real-world industrial users
• A strong foundation for future e-commerce or quotation automation

Babulnath Alloys now has a digital platform that reflects their engineering strength — not just a website, but a long-term asset.

---

🙌 Closing Thoughts

As the Founder of CodeSphere Agency, it’s always fulfilling to build systems that create real value.

This project was a reminder of why I love what I do — creating digital foundations for businesses that keep industries running.

If you’d like to build something similar or want a custom system for your company, feel free to connect below:

Thanks for reading.

— Hasnain Makada, CodeSphere Agency 🚀