SaaS E-commerce Platform
"all-in-one" e-commerce solution that allows entrepreneurs to build online stores without needing technical or coding skills.
View Live ProjectDuration
8 months
Role
Backend Engineer
Team
Senior Tech Lead, 2 Frontend Developer, UI/UX Designer
Overview
Hanooty is an Custom e-commerce platform, and this is the admin dashboard built with Laravel, Livewire, Alpine.js, and Tailwind CSS. I implemented a pixel-perfect UI based on Figma designs and ensured a clean, well-structured architecture following best practices. The project includes dynamic components, real-time interactions, and robust backend logic to manage products, orders, users, and settings—all developed with maintainability and scalability in mind.
Problem & Solution
The Challenge
As the application grew, several Livewire components became responsible for complex workflows such as order management, delivery configuration, and administrative operations. Because Livewire re-renders components on the server after each interaction, large components with complex views and expensive queries increased response times and became harder to maintain.
The Engineering Solution
I refactored these components into smaller, focused units by separating business logic from the UI. Complex operations were moved to service classes and reusable query methods, Blade views were broken into reusable partials, and database queries were optimized to reduce rendering overhead. This improved responsiveness while making the codebase easier to maintain and extend.
Engineering Deep Dive
The platform integrates server-driven interfaces with client-side interactivity through Laravel, Livewire, Alpine.js, and React. Engineering the system involved defining clear responsibilities for each technology while ensuring smooth communication between them. Livewire powers the administrative workflows, Alpine.js provides lightweight UI interactions, and React handles highly interactive experiences such as the page builder. This layered architecture balanced development productivity with a responsive user experience.
Technology Stack
Gallery
Key Learnings
“the experience reinforced an important engineering lesson: while rapid feature development is valuable during the early stages of a project, long-term success depends on continuously investing in maintainable architecture. Refactoring became an essential part of the development process, ensuring that the application's complexity remained manageable as new functionality was introduced.”