{"id":29168342,"url":"https://github.com/mento-protocol/frontend-monorepo","last_synced_at":"2026-01-20T16:36:20.144Z","repository":{"id":288428210,"uuid":"968059123","full_name":"mento-protocol/frontend-monorepo","owner":"mento-protocol","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-17T15:09:50.000Z","size":3410,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-17T15:34:04.208Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ui.mento.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mento-protocol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-17T12:45:58.000Z","updated_at":"2025-07-11T12:36:22.000Z","dependencies_parsed_at":"2025-05-26T11:27:39.542Z","dependency_job_id":"8a14f601-6f8c-469e-b15c-74a62c91b2fc","html_url":"https://github.com/mento-protocol/frontend-monorepo","commit_stats":null,"previous_names":["mento-protocol/frontend-monorepo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mento-protocol/frontend-monorepo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mento-protocol%2Ffrontend-monorepo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mento-protocol%2Ffrontend-monorepo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mento-protocol%2Ffrontend-monorepo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mento-protocol%2Ffrontend-monorepo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mento-protocol","download_url":"https://codeload.github.com/mento-protocol/frontend-monorepo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mento-protocol%2Ffrontend-monorepo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266267532,"owners_count":23902389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-01T10:07:05.224Z","updated_at":"2026-01-20T16:36:20.139Z","avatar_url":"https://github.com/mento-protocol.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Monorepo\n\nA monorepo for all our frontend apps, designed to simplify sharing of code like components, styles, utils, and configs between different applications.\n\n## Technology Stack\n\n- **[Turborepo](https://turborepo.com/)**: For monorepo management and build tooling\n- **[PNPM](https://pnpm.io/)**: Our package manager\n- **[TypeScript](https://www.typescriptlang.org/)**: Our main language with shared, extendable config\n- **[NextJS](https://nextjs.org/)**: The framework for all our frontend apps\n- **[Tailwind CSS](https://tailwindcss.com/)**: For styling\n- **[shadcn/ui](https://ui.shadcn.com/)**: Our UI component base library to extend from\n- **[Trunk CLI](https://trunk.io/)**: Metalinter and formatter (ESLint, Prettier, Markdown, YAML, Shell, Commitlint)\n- **[Vercel](https://vercel.com/)**: For deployments and turborepo build remote caching\n- **[GitHub Actions](https://github.com/features/actions)**: For CI/CD (with Turborepo caching for builds via Vercel)\n\n## Repo Structure\n\n```txt\nfrontend-monorepo/\n├── apps/                     # Frontend applications\n│   ├── app.mento.org/        # Mento Exchange UI\n│   ├── governance.mento.org/ # Governance UI\n│   ├── minipay.mento.org/    # MiniPay DApp\n│   ├── reserve.mento.org/    # Reserve UI\n│   └── ui.mento.org/         # Component Library Showcase\n│\n├── packages/                 # Shared packages\n│   ├── eslint-config/        # Shared ESLint configuration\n│   ├── typescript-config/    # Shared TypeScript configuration\n│   ├── ui/                   # Shared UI library with tailwind styles and shadcn/ui components\n│   └── web3/                 # Shared library with web3-specific components and hooks\n│\n├── .github/                  # GitHub workflows\n│   └── workflows/            # CI/CD workflows\n├── .trunk/                   # Trunk CLI configuration and cache\n├── turbo.json                # Turborepo configuration\n└── pnpm-workspace.yaml       # PNPM workspace configuration\n```\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js (v22 or later)\n- PNPM (v10 or later)\n- [Trunk CLI](https://trunk.io/) (automatically installed during development)\n\n### Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/mento-protocol/frontend-monorepo \u0026\u0026 cd frontend-monorepo\n   ```\n\n2. Install dependencies:\n\n   ```bash\n   pnpm install\n   ```\n\n3. Build all packages:\n\n   ```bash\n   turbo build\n   ```\n\n4. Start the development server for all applications:\n\n   ```bash\n   turbo dev\n   ```\n\n## Development Workflow\n\n### Code Quality \u0026 Formatting\n\nWe use **[Trunk CLI](https://trunk.io/)** as our universal linter and formatter. It combines ESLint, Prettier, Markdown linting, YAML linting, and more into a single, fast tool.\n\n#### Available Commands\n\n```bash\n# Lint all files (comprehensive check)\npnpm lint\n\n# Lint with auto-fix\npnpm lint:fix\n\n# Format all files\npnpm format\n\n# Check formatting without making changes\npnpm format:check\n```\n\n#### App-Specific Linting\n\nTo lint a specific application:\n\n```bash\ncd apps/\u003capp-name\u003e\npnpm lint                    # Lints only this app\n```\n\nOr from the root directory:\n\n```bash\ntrunk check apps/\u003capp-name\u003e  # Direct Trunk usage\n```\n\n#### What Trunk Checks\n\n- **JavaScript/TypeScript**: ESLint with your existing rules\n- **Code Formatting**: Prettier (including Tailwind CSS class sorting)\n- **Markdown**: Documentation formatting and best practices\n- **YAML**: Configuration file formatting\n- **Shell Scripts**: shellcheck and shfmt\n- **Git**: Pre-commit and pre-push hooks\n\n#### VS Code Integration\n\nThe workspace is configured to use Trunk for:\n\n- **Auto-formatting on save** for JS/TS files\n- **Lint-on-type** feedback\n- **Code actions** for quick fixes\n\n### Running a Single Application\n\nTo run a specific application:\n\n```bash\ncd apps/\u003capp-name\u003e\npnpm dev\n```\n\nOr from the root directory:\n\n```bash\npnpm dev --filter \u003capp-name\u003e\n# i.e. pnpm dev --filter ui.mento.org\n```\n\n### Building a Single Application\n\nTo build a specific application:\n\n```bash\npnpm build --filter \u003capp-name\u003e\n```\n\n### Dependency Management with PNPM Catalog\n\nThis monorepo uses [PNPM's catalog feature](https://pnpm.io/catalogs) to centralize dependency version management. This ensures all packages and apps use consistent versions of shared dependencies, reducing conflicts and simplifying updates.\n\n#### How It Works\n\nThe catalog is defined in `pnpm-workspace.yaml` under the `catalog` section. Instead of specifying version numbers directly in each `package.json`, we reference the catalog using `\"catalog:\"`.\n\n**Example in `package.json`:**\n\n```json\n{\n  \"dependencies\": {\n    \"react\": \"catalog:\",\n    \"jotai\": \"catalog:\",\n    \"@tanstack/react-query\": \"catalog:\"\n  }\n}\n```\n\nThe actual versions are defined once in `pnpm-workspace.yaml`:\n\n```yaml\ncatalog:\n  \"react\": ^19.1.0\n  \"jotai\": ^2.12.5\n  \"@tanstack/react-query\": ^5.83.0\n```\n\n#### Adding a New Dependency\n\nWhen adding a new dependency that should be shared across packages:\n\n1. **Add the dependency to the catalog** in `pnpm-workspace.yaml`:\n\n   ```yaml\n   catalog:\n     \"new-package\": ^1.0.0\n   ```\n\n2. **Reference it in your `package.json`**:\n\n   ```json\n   {\n     \"dependencies\": {\n       \"new-package\": \"catalog:\"\n     }\n   }\n   ```\n\n3. **Run `pnpm install`** to update the lockfile.\n\n#### Updating a Dependency Version\n\nTo update a dependency version across the entire monorepo:\n\n1. **Update the version in `pnpm-workspace.yaml`**:\n\n   ```yaml\n   catalog:\n     \"react\": ^19.2.0 # Updated from ^19.1.0\n   ```\n\n2. **Run `pnpm install`** to update all packages using this dependency.\n\nAll packages referencing `\"react\": \"catalog:\"` will automatically use the new version.\n\n#### When to Use Catalog vs Direct Versions\n\n- **Use catalog (`\"catalog:\"`)**: For dependencies shared across multiple packages/apps (React, TypeScript, common utilities, etc.)\n- **Use direct versions**: For app-specific dependencies that aren't shared (e.g., a Next.js plugin only used in one app)\n\n### Working with Shared UI Components\n\nThe UI package is located in `packages/ui/` and contains reusable components built with shadcn/ui.\n\n#### Adding a New Component via shadcn/ui\n\nshadcn/ui is our component base layer we extend from.\n\n1. Install the shadcn/ui component you need: `pnpm dlx shadcn@latest add button`\n1. Customize it to your needs by simply editing `./packages/ui/src/components/ui/button.tsx`\n1. Export the new component from the main barrel file `./packages/ui/src/index.ts`\n1. Build the UI package: `pnpm build --filter @repo/ui`\n\n#### Adding a New Custom Component (without shadcn/ui)\n\n1. Create a new component in `packages/ui/src/components`\n1. Export it from `packages/ui/src/index.ts`\n1. Build the UI package: `pnpm build --filter @repo/ui`\n\n#### Using UI Components in Applications\n\nImport components into an application:\n\n```tsx\n// layout.tsx\nimport \"@repo/ui/globals.css\"; // Import once at the top of the app\nimport { Button } from \"@repo/ui\";\n```\n\n### Commit Convention\n\nWe use [Conventional Commits](https://www.conventionalcommits.org/) for standardized commit messages. This helps with automated versioning and generating changelogs.\n\nEach commit message should follow this format:\n\n```txt\n\u003ctype\u003e(\u003cscope\u003e): \u003cdescription\u003e\n\n[optional body]\n\n[optional footer(s)]\n```\n\nTypes include:\n\n- `feat`: A new feature\n- `fix`: A bug fix\n- `docs`: Documentation changes\n- `style`: Code style changes (formatting, etc.)\n- `refactor`: Code changes that neither fix bugs nor add features\n- `test`: Adding or fixing tests\n- `chore`: Changes to the build process or auxiliary tools\n- `perf`: Performance improvements\n\nExample:\n\n```txt\nfeat(ui): add new button component\n```\n\n**Git Hooks**: Trunk automatically manages git hooks that will:\n\n- **Pre-commit**: Format and lint staged files\n- **Pre-push**: Run comprehensive checks before pushing\n- **Commit-msg**: Validate commit message format\n\n## CI/CD Pipeline\n\nThe repository is set up with GitHub Actions for CI/CD:\n\n- **CI**: On every PR, it runs linting (via Trunk), type checking, and builds all packages\n- **CD**: On merges to main, it deploys applications to Vercel\n\n### Trunk in CI\n\nThe CI pipeline uses the [Trunk GitHub Action](https://github.com/trunk-io/trunk-action) to:\n\n- Install Trunk CLI in the CI environment\n- Run the same linting and formatting checks as local development\n- Ensure consistent code quality across all environments\n\n### Turborepo Remote Caching\n\nThis repo utilizes [Turborepo's Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching), to speed up local development and CI/CD runs. It works by storing the outputs (build artifacts, logs) of tasks (like `build`, `test`, `lint`) in a shared remote cache on Vercel. Before running a task, Turborepo calculates a hash based on the input files, environment variables, and dependencies. If that hash exists in the remote cache, Turborepo downloads the stored output and logs instead of executing the task locally, saving a lot of time.\n\n#### Local Development Remote Caching Setup\n\nTo connect your local machine to the remote cache:\n\n1. **Login to Vercel via Turbo CLI:**\n\n   ```bash\n   pnpm dlx turbo login\n   ```\n\n   Follow the prompts to authenticate with your Vercel account.\n\n2. **Link the Repository:**\n\n   ```bash\n   pnpm dlx turbo link\n   ```\n\n   This connects the local repository instance to your Vercel account/team's remote cache storage.\n\nOnce linked, `turbo` commands (like `pnpm build`, `pnpm test`) will automatically attempt to use the remote cache. You generally don't need to set `TURBO_TOKEN` or `TURBO_TEAM` locally after linking, as `turbo` stores the necessary credentials automatically.\n\n#### CI/CD (GitHub Actions) Setup\n\nThe `.github/workflows/ci.yml` workflow is configured to automatically leverage remote caching:\n\n- It uses the `TURBO_TOKEN` (a Vercel Access Token) and `TURBO_TEAM` (your Vercel team slug/ID) environment variables.\n- These variables **must** be configured in the GitHub repository settings under **Settings \u003e Secrets and variables \u003e Actions**:\n  - `TURBO_TOKEN`: As a Repository Secret.\n  - `TURBO_TEAM`: As a Repository Variable.\n- With these variables set, the CI runner can authenticate with Vercel to read from and write to the remote cache.\n\n#### Signed Remote Caching\n\nThis repository has Signed Remote Caching enabled (`\"signature\": true` in `turbo.json`) for enhanced security. This prevents cache poisoning by ensuring only trusted sources can write to the cache.\n\n- **How it works:** Artifacts uploaded to the cache are signed using a secret key. Artifacts downloaded are verified against this signature.\n- **CI Requirement:** The signing key must be provided to the CI environment via the `TURBO_REMOTE_CACHE_SIGNATURE_KEY` environment variable. This should be configured as a Repository Secret in GitHub Actions settings.\n- **Local Requirement:** If you need to _write_ to the cache locally (i.e., upload artifacts that weren't already there) with signing enabled, you would also need to set the `TURBO_REMOTE_CACHE_SIGNATURE_KEY` environment variable in your local shell. Reading from the cache generally doesn't require the key.\n\n## Potential Future Improvements\n\n\u003c!-- This link is working, idk what markdownlint's problem is here 🤷‍♂️ --\u003e\n\u003c!-- markdown-link-check-disable --\u003e\n\n- [x] ~~Add [syncpack](https://www.npmjs.com/package/syncpack) for consistent dependency versions across all monorepo packages~~ (Now using PNPM catalog)\n\u003c!-- markdown-link-check-enable --\u003e\n- [ ] Finetune builds. There's probably ways to make the builds of both packages and apps smaller and/or more performant.\n- [ ] Make VS Code's \"Go To Definition\" on a component jump to the actual TypeScript source file instead of the compiled JS file in ./dist\n- [ ] Enable additional Trunk linters for production CI (security scanning, image optimization)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmento-protocol%2Ffrontend-monorepo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmento-protocol%2Ffrontend-monorepo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmento-protocol%2Ffrontend-monorepo/lists"}