The Problem
The Client struggled with converting their strong visual identity into a smooth and engaging online shopping experience. Users encountered friction across pages on the previous site, which affected engagement and overall conversion. The previous architecture made iteration painful and slow.
The objective was to create a modern ecommerce experience that balanced aesthetics with usability. Improving navigation flow, mobile responsiveness, and performance, while establishing a frontend foundation that supports scalability and future growth.
Slow Performance
Poor UX
My Role & Responsibilities
As the Fullstack Engineer, I managed both frontend and backend development, building the architecture from the ground up to deployment. I implemented responsive interfaces while also handling data flow, API integration, and server-side logic to deliver a seamless user experience.
Designing and building the fullstack architecture for scalable e-commerce functionality
Developing responsive, reusable React components with Tailwind CSS
Integrating APIs and managing data flow for dynamic product listings and user interactions
Solution Architecture
To address mobile friction and inconsistent layouts, the frontend was rebuilt with React and Tailwind CSS. Components were made reusable and fully responsive, ensuring smooth product browsing across devices and reducing visual clutter.
The backend previously limited dynamic content delivery. By integrating a modular API layer, product data, orders, and user interactions were efficiently fetched and rendered, reducing load times and improving Core Web Vitals.
To streamline checkout, the Paystack payment gateway was implemented. This enabled secure, real-time transaction processing, simplified frontend handling of payments, and ensured a seamless end-to-end shopping experience.
Technical Decision
Why I used React Context + useState + localStorage sync to manage the shopping cart across the app.
This decision centralizes cart state across all components, persists cart data for logged-out users and ensures seemless syncng when user logs in.
End-to-end JavaScript development: Using MongoDB, Express, React, and Node.js allows both the frontend and backend to be built entirely in JavaScript, enabling faster development, easier debugging, and seamless data flow between client and server.
The Outcome
40%
Increase in conversion
Mobile users finalized purchases more often
97
Performance Score
Page speed Score
1.2s
Load Time
Average time to interactive