Driving Performance and Productivity in a B2B E-Commerce Platform

Brikl is a powerful B2B e-commerce platform that enables merchants to launch online stores in under 15 minutes, without writing any code. However, the original platform was built using an outdated version of Gatsby.js, which limited scalability, flexibility, and overall performance.

As a Senior Frontend Engineer, I played a key role in migrating the platform to the latest version of Next.js with App Router, while contributing to merchant- and customer-facing features across both the dashboard and storefront.

Goals

• Migrate from an outdated Gatsby.js codebase to Next.js App Router
• Boost performance and improve user experience
• Introduce merchant-focused productivity tools
• Enhance customer engagement via storefront upgrades

My Contributions

Platform Migration to Next.js

I led major efforts in the migration process, helping Brikl transition to Next.js App Router. This modern stack upgrade:

• Improved performance through streamlined routing and rendering
• Enhanced developer experience and future scalability
• Leveraged static and dynamic rendering for different use cases

Apollo GraphQL, Zustand & Caching Strategy

To manage data and UI state effectively, I combined Apollo GraphQL Client and Zustand:

• Used Apollo Client for efficient data fetching, caching, and invalidation
• Leveraged GraphQL subscriptions to enable real-time UI updates
• Used Zustand for complex UI state management, such as upload progress tracking, global UI feedback, and client-side logic separation
• Reviewed peer code to help maintain high-quality, scalable frontend architecture

Dashboard Productivity Features

• Bulk Product Upload (Frontend): I developed the file upload UI for bulk product imports, enabling merchants to upload large CSV files easily. Since imports could take time depending on file size, I used GraphQL subscriptions to show real-time progress and dynamically update the product list. Zustand was used to manage and isolate complex UI states related to upload feedback, progress tracking, and error handling.
• Custom SKU Overrides: I implemented a feature allowing merchants to override supplier SKUs with their own identifiers for internal tracking, while preserving the original supplier SKUs required for backend communication.

Storefront Enhancements

• Rebuilt Product Detail Page: I redesigned the product detail experience with tiered pricing functionality, allowing merchants to set volume-based discounts based on order quantity.
• Real-Time Order Tracking: I implemented an order status tracking UI for both merchants and customers. Using GraphQL subscriptions and Zustand, the frontend reflected order status updates in near real-time, while keeping shared state consistent across different components and views.

Outcome

• Successfully modernized the frontend architecture using Next.js App Router
• Delivered responsive, scalable UI components that improved merchant onboarding and retention
• Empowered merchants with real-time productivity tools and customization options
• Improved customer experience with transparent pricing and live order tracking
• Contributed to overall engineering quality through mentorship and code reviews

Key Takeaways

• Next.js App Router enables flexible rendering and layout control for complex B2B platforms
• Apollo Client combined with Zustand provides a powerful solution for managing data and UI state
• Frontend-driven tools like bulk upload UI and real-time tracking significantly enhanced platform usability
• Code quality and performance were ensured through consistent engineering practices

Tools & Technologies

• Next.js (App Router)
• Apollo GraphQL Client with Subscriptions
• Zustand for UI state management
• GraphQL APIs
• React, TypeScript