Skip to content

Repository files navigation

A README for this repo should do three things:

  1. Explain why the monorepo exists
  2. Show how to run apps
  3. Explain shared packages and future architecture

Here's a professional version you can use as your root README.md:

React Monorepo

A collection of React applications and reusable packages managed with Turborepo and PNPM Workspaces.

This repository serves as a learning playground and scalable architecture example for building multiple React applications while sharing common components, hooks, utilities, and configurations.


Repository Structure

react-monorepo/
│
├── apps/
│   ├── calculator
│   ├── scientific-calculator
│   ├── snake-game
│   ├── pong-game
│   ├── password-generator
│   ├── language-explorer
│   ├── lorem-generator
│   ├── multi-step-form
│   └── recipe-manager
│
├── packages/
│   ├── ui
│   ├── hooks
│   ├── utils
│   └── config
│
├── turbo.json
├── pnpm-workspace.yaml
└── package.json

Applications

Calculator

A basic calculator application supporting standard arithmetic operations.

Scientific Calculator

Advanced calculator with scientific functions and mathematical operations.

Snake Game

Classic Snake game built with React.

Pong Game

Browser-based Pong game implementation.

Password Generator

Generate secure and customizable passwords.

Language Explorer

Explore languages, alphabets, and linguistic information.

Lorem Generator

Generate placeholder text for testing and prototyping.

Multi-Step Form

A reusable multi-step form workflow.

Recipe Manager

Manage, create, and organize recipes.


Shared Packages

@repo/ui

Reusable React UI components.

Examples:

  • Button
  • Input
  • Card
  • Modal
  • Form Components
  • Layout Components

@repo/hooks

Reusable React hooks.

Examples:

  • useLocalStorage
  • useTheme
  • useInterval
  • useDebounce
  • useClipboard

@repo/utils

Shared utility functions.

Examples:

  • String utilities
  • Math helpers
  • Validation helpers
  • Random generators
  • Storage helpers

@repo/config

Shared project configuration.

Examples:

  • TypeScript configuration
  • ESLint configuration
  • Shared constants
  • Build settings

Getting Started

Prerequisites

  • Node.js 20+
  • PNPM 10+

Install PNPM:

npm install -g pnpm

Installation

Clone the repository:

git clone <repository-url>
cd react-monorepo

Install dependencies:

pnpm install

Development

Run all applications:

pnpm dev

Run a specific application:

pnpm --filter calculator dev

Example:

pnpm --filter snake-game dev

Build

Build all projects:

pnpm build

Build a specific application:

pnpm --filter calculator build

Lint

pnpm lint

Monorepo Benefits

This project demonstrates:

  • Shared code across multiple applications
  • Faster dependency management with PNPM Workspaces
  • Incremental builds with Turborepo
  • Consistent project architecture
  • Easier maintenance and scaling

Future Improvements

  • Shared design system
  • Shared authentication package
  • Shared API client package
  • Storybook integration
  • Unit and integration testing
  • CI/CD pipelines
  • Docker support

Tech Stack

  • React
  • TypeScript
  • Vite
  • PNPM Workspaces
  • Turborepo
  • ESLint

License

MIT

After this, I'd recommend creating:

  • CONTRIBUTING.md
  • Individual README files inside each app (apps/snake-game/README.md, etc.)
  • An architecture diagram section showing how apps consume packages (this makes the repo look much more professional on GitHub).

About

Collection of React applications and shared packages demonstrating modern monorepo architecture with Turborepo, TypeScript, Vite, and PNPM Workspaces.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages