Skip to content
CloudAlt Documentation

Installed Packages, Tools, and Resources

OUTDATED AND NEEDS TO BE UPDATED - OCT. 7, 2025.

This document provides a comprehensive overview of the packages, tools, and resources used in this monorepo. Each entry includes the package name, its installed version, a description of its purpose, and links to its official documentation and other helpful resources.

Core Framework & Tooling

Section titled “Core Framework & Tooling”

This section covers the fundamental technologies that form the backbone of our development environment.

Nx

Section titled “Nx”
  • Version: 20.8.0
  • Purpose: Nx is a smart, extensible build framework that helps you develop and test applications in a monorepo. It provides powerful tooling for code generation, dependency graphing, and task orchestration.
  • Location: devDependencies (root package.json)
  • Official Documentation: nx.dev
  • YouTube Channel: Nx Official YouTube Channel
  • Tutorial Video: Nx Monorepo Tutorial

React

Section titled “React”
  • Version: ~18.3.1
  • Purpose: React is a JavaScript library for building user interfaces. It allows us to create reusable UI components and manage the state of our applications efficiently.
  • Location: dependencies (root package.json)
  • Official Documentation: react.dev
  • YouTube Channel: React Official YouTube Channel
  • Tutorial Video: React Full Course for Beginners

React Native

Section titled “React Native”

Expo

Section titled “Expo”
  • Version: ~52.0.11
  • Purpose: Expo is a framework and a platform for universal React applications. It provides a set of tools and services built around React Native that simplify the development and deployment process for iOS, Android, and web apps.
  • Location: dependencies (root package.json)
  • Official Documentation: docs.expo.dev
  • YouTube Channel: Expo Official YouTube Channel
  • Tutorial Video: Expo Crash Course

TypeScript

Section titled “TypeScript”

Yarn

Section titled “Yarn”
  • Version: 4.4.0
  • Purpose: Yarn is a fast, reliable, and secure dependency management tool. We use it to manage all the packages in our monorepo, ensuring consistent and reproducible builds.
  • Location: Global installation / defined in packageManager field.
  • Official Documentation: yarnpkg.com
  • Tutorial Video: Yarn Crash Course

Nx Plugins

Section titled “Nx Plugins”

This section details the specific Nx plugins used to integrate various technologies and workflows into our monorepo. All plugins are version 20.8.0 and are located in the root devDependencies.

@nx/react

Section titled “@nx/react”
  • Purpose: Provides generators and executors for building and managing React applications and libraries within the Nx workspace.
  • Official Documentation: Nx React Plugin

@nx/expo

Section titled “@nx/expo”
  • Purpose: Enables the creation, management, and building of Expo (React Native) applications. It includes generators for apps and libraries, as well as executors for running the development server and building for production.
  • Official Documentation: Nx Expo Plugin

@nx/react-native

Section titled “@nx/react-native”
  • Purpose: Provides tools for developing with vanilla React Native. While we primarily use Expo, this plugin offers underlying capabilities that are beneficial.
  • Official Documentation: Nx React Native Plugin

@nx/jest

Section titled “@nx/jest”
  • Purpose: Integrates the Jest testing framework into the monorepo, allowing for easy configuration and execution of unit tests for all our projects.
  • Official Documentation: Nx Jest Plugin

@nx/eslint

Section titled “@nx/eslint”
  • Purpose: Integrates ESLint for static code analysis. This helps us maintain code quality and enforce consistent coding standards across the entire monorepo.
  • Official Documentation: Nx ESLint Plugin

@nx/storybook

Section titled “@nx/storybook”
  • Purpose: Sets up Storybook for developing and documenting UI components in isolation. This is essential for building our shared component libraries.
  • Official Documentation: Nx Storybook Plugin

@nx/vite

Section titled “@nx/vite”
  • Purpose: Integrates Vite, a fast and modern build tool, for our web applications. It provides a significantly faster development experience compared to older bundlers.
  • Official Documentation: Nx Vite Plugin

@nx/web

Section titled “@nx/web”
  • Purpose: Provides generic generators and executors for web-related projects, including setting up web servers and other basic web configurations.
  • Official Documentation: Nx Web Plugin

Babel & Metro (Bundling & Transpiling)

Section titled “Babel & Metro (Bundling & Transpiling)”

This section covers the tools responsible for transforming our modern JavaScript and TypeScript code into a format that can be understood by different platforms and for bundling it all together.

Babel

Section titled “Babel”
  • Purpose: Babel is a JavaScript transpiler that converts edge JavaScript (ES2015+) code into a backwards-compatible version of JavaScript that can be run by older JavaScript engines. It’s essential for using modern language features.
  • Packages:
    • @babel/core (~7.25.2): The core engine.
    • @babel/preset-env (~7.25.2): A smart preset that allows you to use the latest JavaScript without needing to micromanage syntax transforms.
    • @react-native/babel-preset (~0.75.0): The official Babel preset for React Native projects.
    • babel-preset-expo (~12.0.1): A preset that builds on the React Native preset with additional transformations needed for Expo projects.
  • Location: devDependencies (root package.json)
  • Official Documentation: babeljs.io
  • Tutorial Video: Babel Explained in 100 Seconds

Metro

Section titled “Metro”
  • Purpose: Metro is the JavaScript bundler for React Native. It’s responsible for taking all of our application code and its dependencies and packaging them into a single file. It’s known for its fast startup and hot reloading capabilities.
  • Packages:
    • metro (0.80.9): The core Metro bundler.
    • metro-config, metro-core, metro-resolver, etc. (0.80.9): Various sub-packages that make up the Metro ecosystem.
    • @expo/metro-config (~0.19.4): A pre-configured, easy-to-use Metro configuration tailored for Expo projects.
  • Location: devDependencies & dependencies (root package.json)
  • Official Documentation: metrobundler.dev
  • Tutorial Video: React Native & Metro: How It Works

Testing & Linting

Section titled “Testing & Linting”

This section outlines the tools we use to ensure code quality, consistency, and correctness through automated testing and static analysis.

Jest & Expo

Section titled “Jest & Expo”
  • Purpose: Jest is a delightful JavaScript Testing Framework with a focus on simplicity. We use it as our primary test runner for unit and component testing.
  • Packages:
    • jest-expo (~52.0.2): A preset for Jest that configures it with sensible defaults for testing Expo and React Native projects.
  • Location: devDependencies (root package.json)
  • Official Documentation: Jest, Expo Unit Testing
  • Tutorial Video: Testing React Native with Jest and Testing Library

React Native Testing Library

Section titled “React Native Testing Library”
  • Purpose: This library provides light-weight utility functions on top of react-test-renderer, encouraging better testing practices by making your tests resemble how users interact with your components.
  • Packages:
    • @testing-library/react-native (~12.5.2): The main library for testing components.
    • @testing-library/jest-native (~5.4.3): Provides custom Jest matchers (e.g., toBeVisible(), toHaveStyle()) that make your tests more declarative and readable.
  • Location: devDependencies (root package.json)
  • Official Documentation: React Native Testing Library
  • Tutorial Video: Confident React Native Testing

ESLint

Section titled “ESLint”
  • Purpose: ESLint is a pluggable linter for statically analyzing code to quickly find problems. It helps enforce coding standards and avoid common pitfalls.
  • Packages:
    • eslint (^9.8.0): The core ESLint library.
    • @typescript-eslint/parser (^8.19.0): The parser that allows ESLint to understand and lint TypeScript code.
  • Location: devDependencies (root package.json)
  • Official Documentation: eslint.org
  • Tutorial Video: ESLint Crash Course

Prettier

Section titled “Prettier”
  • Purpose: Prettier is an opinionated code formatter that enforces a consistent code style across the entire codebase. It integrates with ESLint to handle formatting, allowing ESLint to focus on code-quality rules.
  • Packages:
    • prettier (^2.6.2): The core Prettier library.
    • eslint-config-prettier (^10.0.0): Turns off all ESLint rules that are unnecessary or might conflict with Prettier.
  • Location: devDependencies (root package.json)
  • Official Documentation: prettier.io
  • Tutorial Video: Setup ESLint, Prettier, and Husky in 10 minutes

Miscellaneous & Utility

Section titled “Miscellaneous & Utility”

This section covers other important packages that provide specific functionalities, from building and deploying to rendering vector graphics.

EAS CLI

Section titled “EAS CLI”
  • Version: ^16.19.3
  • Purpose: The Expo Application Services (EAS) CLI is the command-line tool for interacting with EAS services, including EAS Build (for creating app binaries) and EAS Submit (for submitting to app stores).
  • Location: devDependencies (root package.json)
  • Official Documentation: Expo EAS CLI
  • Tutorial Video: Introduction to EAS Build

Storybook

Section titled “Storybook”
  • Purpose: Storybook is a frontend workshop for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
  • Packages:
    • storybook (~8.2.6): The core Storybook framework.
    • @storybook/react, @storybook/react-vite: Integrations for React and Vite.
    • @storybook/addon-*: Various addons that extend Storybook’s functionality.
  • Location: devDependencies (root package.json)
  • Official Documentation: storybook.js.org
  • YouTube Channel: Storybook Official YouTube Channel
  • Tutorial Video: Storybook Crash Course

Vite

Section titled “Vite”
  • Purpose: Vite is a next-generation frontend tooling that provides an extremely fast development server and optimized build process. We use it for our web applications.
  • Packages:
    • vite (^5.0.0): The core Vite tool.
    • @vitejs/plugin-react (^4.2.0): The official plugin for React integration.
  • Location: devDependencies (root package.json)
  • Official Documentation: vitejs.dev
  • Tutorial Video: Vite Crash Course

React Native SVG

Section titled “React Native SVG”
  • Purpose: Provides SVG support to React Native on iOS, Android, and Web. This allows us to use scalable vector graphics in our applications.
  • Packages:
    • react-native-svg (~15.8.0): The core library.
    • react-native-svg-transformer (~1.5.0): A transformer that allows you to import SVG files directly into your React Native components.
  • Location: dependencies (root package.json)
  • Official Documentation: GitHub - react-native-svg
  • Tutorial Video: How to Use SVGs in React Native

tslib

Section titled “tslib”
  • Version: ^2.3.0
  • Purpose: A runtime library for TypeScript that contains all of the TypeScript helper functions. It’s automatically included by the TypeScript compiler to avoid duplicating helper code in every file.
  • Location: devDependencies (root package.json)
  • Official Documentation: GitHub - tslib
  • Note: This is a helper library and not something you would typically interact with directly.