Back to all projects

Building a Universal E-commerce App with Monorepo

React NativeNext.jsTamaguiMonorepoCode SharingGraphQLTailwind CSSFormikCross-platform DevelopmentE-commerce DevelopmentMobile DevelopmentWeb Development
E-commerce Cross-platform App

At my previous company, we had a robust, responsive e-commerce web application and a separate admin panel. My primary objective was to rapidly transition our existing web product into a native mobile experience while simultaneously establishing a scalable foundation for future cross-platform development initiatives.

The Challenge: Efficiency and Consistency

The core challenge was to achieve significant code reuse between web and mobile platforms to accelerate development cycles and ensure a consistent brand experience without sacrificing native performance.

My Approach: Embracing the Universal App Architecture

After extensive research into various cross-platform solutions, I identified the universal app architecture as the optimal path forward. This innovative approach, combining Tamagui for styling, Solito for navigation, Next.js for web, and Expo for mobile within a monorepo structure, promised maximum code sharing and a streamlined development workflow.

I built several proof-of-concept demos to rigorously test this architecture's capabilities and its compatibility with our existing team's React and TypeScript proficiency. The successful outcomes from these demos confirmed its suitability as our chosen technology stack.

Technical Implementation & Problem Solving

  • Seamless Backend Integration: I handled the setup and configuration to seamlessly integrate the new frontend with our existing GraphQL backend. This involved setting up the GraphQL client and leveraging GraphQL Code Generator for TypeScript to ensure robust type safety and efficient data fetching across the entire monorepo.
  • Component Development with Tamagui: I developed core UI components and various e-commerce specific screens, adhering to Tamagui's styling philosophy. This allowed for highly optimized and consistent UIs across both web and mobile.
  • Robust Form Handling: For managing user inputs and validations across various e-commerce forms, I integrated and utilized Formik, ensuring data integrity and a smooth user experience.

Establishing a Staging Environment & CI/CD

To support continuous development and testing, I was responsible for establishing a streamlined staging deployment pipeline for the web application. This involved:

  • Containerizing the Next.js web build using Docker standalone configurations.
  • Implementing automated deployments via GitLab CI, connected to our Portainer system. This ensured that every code push to the staging branch triggered an efficient and reliable update of the web application.

Key Learnings & Impact

My primary contribution was architecting and delivering the foundational codebase and infrastructure for the company's new universal app strategy. I successfully established a production-ready blueprint that empowered the team to build and scale efficiently across web and mobile.

This project was a testament to my ability to:

  • Research and Validate Cutting-Edge Technologies: Successfully identified, evaluated, and adopted a complex new tech stack (Tamagui, Solito, Monorepo).
  • Architect for Scalability and Reuse: Designed a system that maximized code sharing and accelerated future development.
  • Implement Robust DevOps Practices: Set up a fully automated CI/CD pipeline critical for rapid iteration and deployment.

Ultimately, this initiative laid the critical groundwork for the company's future. It provided a clear, scalable, and unified path for expanding their digital presence across all platforms.