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.
🔗 Live Website: https://babulnathalloys.com
🔗 CodeSphere Agency: https://codesphere.agency
🔗 Book a Meeting with Us: https://codesphere.agency/meeting
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:
🔗 Book a Meeting: https://codesphere.agency/meeting
🔗 Visit CodeSphere Agency: https://codesphere.agency
🔗 Project Website: https://babulnathalloys.com
Thanks for reading.
— Hasnain Makada, CodeSphere Agency 🚀
Top comments (0)