Introduction

This project is a monorepo and uses yarns workspace feature to manage the separate workspaces.

Why use a monorepo?

• Gives visibility of the companies entire codebase
• Provides consistency in how projects are configured company wide (shared linting configs, component libraries)
• Simplified dependency management, if a dependency is changed all affected applications will know immediately. E2E tests can easily be run across all applications at once.
• De-dupes packages required by multiple applications.

In order to scale the monorepo as more apps are added we use Turborepo to add caching and parallelization for tasks such as building and linting.

Repository structure

This repository follows the common convention of placing workspaces within 2 folders.

• Apps: For applications such as cats and docs.
• Packages: For supporting code that is shared across apps.

Packages

Core workspace

The core workspace contains the main NextJS middleware that is common across multiple apps. This workspace provides a framework agnostic to the UI it renders. It provides authentication, access to the API and other core features.

Functionality, translations and design tokens which are to be shared across multiple platforms (web and apps) belong in the shared workspace.

Shared workspace

The shared workspace contains functionality, translations or design tokens shared across both brands and/or platforms. Design tokens specific to the product that should be synced between the website and app, for example colors, fonts and iconography belong here.

Examples

• Colors used in the cats website and app.
• A function used to format a date consistently on both the website and app.
• A common translation shared across platforms AND brands such as “Login” or “Save”.
• A common translation shared across the website and app such as a list of cat breeds.

What are design tokens?

Design tokens represent the small, repeated design decisions that make up a design system’s visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names.

This workspace contains design tokens shared for our various brands.

Recommended reading

• Design tokens (Material)
• What Are Design Tokens?
• Extending atomic design

Components workspace

Contains reusable atomic components which are shared across apps.

The project uses constraints and cross-references to keep packages synced across the project.

Setup

See the project README file for information on setting up the project.