feat: add initial README.md with project overview, structure, and usage instructions
This commit is contained in:
@@ -0,0 +1,160 @@
|
|||||||
|
# Frontend Monorepo Template
|
||||||
|
|
||||||
|

|
||||||
|

|
||||||
|

|
||||||
|

|
||||||
|

|
||||||
|

|
||||||
|

|
||||||
|
|
||||||
|
A **scalable, enterprise-ready frontend monorepo template** built with **Turborepo**, **pnpm**, and **Vite**.
|
||||||
|
This repository is designed for long-term maintainability, featuring:
|
||||||
|
|
||||||
|
* Shared logic and UI libraries
|
||||||
|
* Centralized tooling configuration
|
||||||
|
* Turbo-powered task orchestration and caching
|
||||||
|
* Dedicated documentation & component playground using Storybook
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## π Repository Structure
|
||||||
|
|
||||||
|
The monorepo is organized into **Apps** (deployable applications) and **Packages** (shared libraries).
|
||||||
|
|
||||||
|
```text
|
||||||
|
.
|
||||||
|
βββ apps/
|
||||||
|
β βββ web/ # Main React Application (Vite + TypeScript)
|
||||||
|
β βββ docs-dev/ # Component Documentation & Playground (Storybook)
|
||||||
|
β
|
||||||
|
βββ packages/
|
||||||
|
β βββ ui/ # Shared UI Component Library
|
||||||
|
β βββ utils/ # Shared Utilities (Date, Encryption, Core Logic, etc)
|
||||||
|
β βββ configs/ # Shared Tooling Configurations
|
||||||
|
β βββ eslint/ # Shared ESLint rules
|
||||||
|
β βββ typescript/ # Shared TypeScript (tsconfig) bases
|
||||||
|
β
|
||||||
|
βββ package.json # Root scripts and dependencies
|
||||||
|
βββ pnpm-workspace.yaml # pnpm workspace definition
|
||||||
|
βββ turbo.json # Turborepo pipeline configuration
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## π Getting Started
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
Ensure your local environment matches the following versions to avoid compatibility issues:
|
||||||
|
|
||||||
|
* **Node.js**: `v24.11.1`
|
||||||
|
* **pnpm**: `v8.15.6`
|
||||||
|
(Enforced via the `packageManager` field in `package.json`)
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
|
||||||
|
Install all dependencies from the **root directory**:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## π Usage & Scripts
|
||||||
|
|
||||||
|
This repository uses **Turborepo** to orchestrate tasks efficiently. All commands are executed from the root.
|
||||||
|
|
||||||
|
### Development
|
||||||
|
|
||||||
|
| Command | Description |
|
||||||
|
| ------------------- | --------------------------------------------------------------------------- |
|
||||||
|
| `pnpm dev` | Start **all applications** (`web` and `docs-dev`) in parallel |
|
||||||
|
| `pnpm dev:web` | Start only the **Main Web App** (usually at `http://localhost:5173`) |
|
||||||
|
| `pnpm dev:docs-dev` | Start **Storybook** for UI development (usually at `http://localhost:6006`) |
|
||||||
|
|
||||||
|
### Building & Quality
|
||||||
|
|
||||||
|
| Command | Description |
|
||||||
|
| --------------------- | --------------------------------------------- |
|
||||||
|
| `pnpm build` | Build all apps and packages using Turbo cache |
|
||||||
|
| `pnpm build:web` | Build only the web application |
|
||||||
|
| `pnpm build:docs-dev` | Build only the docs-dev application |
|
||||||
|
| `pnpm test` | Run unit tests (Vitest) across all packages |
|
||||||
|
| `pnpm lint` | Run ESLint across the workspace |
|
||||||
|
| `pnpm format` | Format code using Prettier |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## π¦ Packages Overview
|
||||||
|
|
||||||
|
### 1. `apps/web`
|
||||||
|
|
||||||
|
The main consumer-facing application.
|
||||||
|
|
||||||
|
* Imports business logic from `@repo/utils`
|
||||||
|
* Uses shared UI components from `@repo/ui`
|
||||||
|
|
||||||
|
**Tech Stack**:
|
||||||
|
|
||||||
|
* React
|
||||||
|
* Vite
|
||||||
|
* TypeScript
|
||||||
|
* Tailwind CSS
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. `apps/docs-dev` (Storybook)
|
||||||
|
|
||||||
|
An isolated environment for developing and documenting UI components.
|
||||||
|
|
||||||
|
* Ensures components in `@repo/ui` are built and tested independently
|
||||||
|
* Acts as a living design system and playground
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. `packages/utils`
|
||||||
|
|
||||||
|
Shared business logic and reusable utility modules that can be consumed across multiple applications. Fully tested using Vitest.
|
||||||
|
|
||||||
|
This package is intended to hold non-UI, cross-cutting logic such as date/time handling, security helpers, and other common utilities. It is designed to be framework-agnostic, predictable, and easy to extend as the system evolves.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. `packages/ui`
|
||||||
|
|
||||||
|
Shared UI component library (Buttons, Inputs, Cards, Layouts).
|
||||||
|
|
||||||
|
* Ensures consistent design across all applications
|
||||||
|
* Designed to be consumed by both web apps and Storybook
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. `packages/configs`
|
||||||
|
|
||||||
|
Single source of truth for tooling configuration.
|
||||||
|
|
||||||
|
* **eslint-config**: Shared ESLint rules (React, libraries, Storybook)
|
||||||
|
* **typescript-config**: Shared `tsconfig.json` base configurations
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## βοΈ Configuration & Environment
|
||||||
|
|
||||||
|
|
||||||
|
### Turborepo Caching
|
||||||
|
|
||||||
|
This repository uses **Turborepo caching** for builds, tests, and other artifacts.
|
||||||
|
|
||||||
|
To fully clean the workspace (dependencies, build outputs, and Turbo cache):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
rm -rf node_modules **/*/node_modules .turbo **/*/.turbo dist **/*/dist
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## π License
|
||||||
|
|
||||||
|
This project is **private and proprietary**.
|
||||||
|
|||||||
Reference in New Issue
Block a user