The Challenge The project started with only a rough sketch of a landing page and product page, along with a general idea from the client: an e-commerce website for a clothing brand. The client also required the ability to manage and update products independently without relying on a developer. This meant the core challenge was defining both the user-facing experience and the underlying system architecture from scratch in a way that supported easy product management while still maintaining a clean shopping experience.

The Outcome A complete e-commerce system was built from the ground up, covering the full user journey from product discovery through to checkout and order completion. This included the storefront, product listing, product details page, cart, and checkout flow, along with a fully integrated backend using Firebase. An admin dashboard was implemented to allow the client to manage products and stock independently, with real-time synchronization between the admin system and the user-facing store.

It started with three sketches. A landing page, a product page, and a gallery page. The landing page was meant to lead somewhere—two clear paths: shop or explore. The gallery was the more expressive side of the brand. Music playing in the background, the first 30 seconds looping, with images scattered across the screen. Not rigid, not uniform, something closer to a masonry layout. It had character. From there, the work began to take shape.

The landing page came first, then the foundation behind it. Firebase was set up to handle the data, but a problem showed up early. Product images, gallery images, all of it needed storage, and that meant moving to a higher Firebase plan. The client tried upgrading, but their card would not go through.

At that point, the direction could have stalled, Instead, it shifted. A workaround was introduced: images would live on Cloudinary, and only their URLs would be stored in Firebase’s Realtime Database. It kept things lightweight, avoided the billing issue, and allowed progress to continue without compromise.

With the gallery assets not ready yet, focus moved to the store itself.

The product system took shape piece by piece, product listings, detailed product views, cart, checkout. Behind it, a stock management system was built to keep everything in sync between what customers saw and what the client controlled from the admin side. Somewhere in the middle of that, the gallery page was almost removed.

It felt like a loss. It was one of the more distinctive parts of the original idea. But the hesitation was noticeable, it was not a firm decision, more uncertainty than rejection.

So instead of removing it completely, the structure stayed.

The gallery page remained in the system, fully wired, just out of sight. The button was removed from the landing page, but the functionality stayed intact. The moment images are added from the admin dashboard, the gallery becomes visible again. Nothing lost, just deferred. From there, the focus returned to making the store complete.

Payments were integrated using Paystack, ensuring transactions were secure and reliable. Then came the final piece of the loop; confirmation. A Node.js backend was introduced to trigger email notifications, sending purchase confirmations to both the customer and the client, while also pushing order details into the admin dashboard.

By the end, everything was connected.

The storefront, the admin system, payments, inventory, and communication all working together. The final step was deployment: setting up the domain, configuring secure email services, and bringing the store live on chibythem.store.