Technical Overview · Margarita Monorepo

Architecture

This project follows react-native-web philosophy of "Write Once, Render Anywhere". The web version is using Next.js and the mobile version is powered by Expo.

React Native - JS framework for writing real, natively rendered mobile applications for iOS and Android.
React Native for Web - Makes it possible to run React Native components and APIs on the web using React DOM.
Next.js - JS framework powering web part.
Expo - SDK and tools used for mobile part.
Storybook - Development environment for UI components, used by universal-components and margarita-components.
GraphQL - Query language for API.
GraphQL Voyager - Enables GraphQL API representation as an interactive graph.
Docusaurus - Open Source tool for making documentation websites.
Yarn Workspaces - Yarn functionality that ties all parts of the project together.
Relay - JS framework for building data-driven React applications.
Flow - Static type checker for JS.
Jest - JS testing framework with a focus on simplicity.
React Native Testing Library - Lightweight React Native testing utilities.

@kiwicom/orbit-design-tokens - Design tokens store visual design attributes. They help us make UI more consistent. We use them instead of static values like HEX codes for color or sizing units.
@kiwicom/babel-preset-kiwicom - Babel preset for JS used at Kiwi.com.
@kiwicom/eslint-config - Eslint configuration for JS used at Kiwi.com.
@kiwicom/fetch - Fetch function with advanced capabilities like retries with delay and request cancellation after timeout.
@kiwicom/graphql-global-id - Utility to manage ID fields in GraphQL correctly.
@kiwicom/graphql-utils - Collection of generic GraphQL utilities. These functions are helpful to deal with some complicated situations in GraphQL ecosystem like for example proper pagination structure.