Case study/Professional
Magrabi / DoctorM
Magrabi / DoctorM is a luxury eyewear e-commerce platform offering a wide range of prescription glasses and sunglasses from top brands like Ray-Ban, Prada, and Bulgari...
Open it live
Built with
Akeno
Azure ADB2C
Docker
Next JS
Saleor
Sanity
SAP ERP
Algolia
Grafana
React JS
Zustand
Kubernetes
TypeScript
Tailwind CSS
Checkout.com
The story
Role
Frontend Engineer.
Description
It is an e-commerce platform for luxury glasses. It offers an extensive selection of prescription eyewear and sunglasses from internationally recognized brands, such as Ray-Ban, Prada, Bulgari, Gucci, etc. Today, the company operates nearly 200 stores across 10 countries, including Saudi Arabia, Egypt, the UAE, and Turkey. The company emphasizes a customer-centric approach, providing personalized services and modern store designs to enhance the shopping experience.
Tech Stack
Frontend: NextJS, Typescript, ReactJS., Tailwind CSS (new), Bootstrap (old), Zustand.
Backend: Sanity (headless CMS), Saleor, Algolia (recommendation engine), Akeno, SAP ERP, Checkout.com, Azure ADB2C, Sendgrid.
DevOps: Docker, Kubernetes, Grafana.
Responsibilities
Research on using a styling solution for the given scope of work with long term positive impact.
Setting up i18n for the different locales.
Handling the "ltr" and "rtl" layout shifts across the application.
Looking over a team of 3 junior developers accessing their code quality and making sure the components are fluid and composable.
Implementing pixel perfect UI for the user checkout journey and handling dynamic URL's.
Improve website's first load response time.
Impact
Reduced CSS bundle size by 20% by replacing Bootstrap with Tailwind CSS, leading to an 11% faster CSS loading time. This shift not only enhanced page load performance but also streamlined the development workflow by simplifying responsive styling for different device sizes.
Implemented i18n using Next.js middleware, eliminating the reliance on heavy third-party libraries. This approach drastically improved code efficiency and reduced runtime overhead, making the localization process more seamless and scalable.
Leveraged the HTML
directionattribute based on URL path segments to handle LTR and RTL layouts, completely removing the need for additional context providers. This simplified the architecture, significantly improving maintainability and reducing complexity across the codebase.Organized weekly peer code review sessions, identifying potential risks and enforcing best practices for component design. This initiative led to a 30% improvement in team productivity, empowering developers to make changes quickly while maintaining code quality.