{"id":13567058,"url":"https://github.com/regen-network/regen-web","last_synced_at":"2026-01-16T19:56:30.442Z","repository":{"id":36965277,"uuid":"258044476","full_name":"regen-network/regen-web","owner":"regen-network","description":":seedling: Website and marketplace application","archived":false,"fork":false,"pushed_at":"2026-01-12T16:34:04.000Z","size":397189,"stargazers_count":15,"open_issues_count":41,"forks_count":10,"subscribers_count":7,"default_branch":"dev","last_synced_at":"2026-01-12T19:04:41.980Z","etag":null,"topics":["biodiversity","carbon","climate","climate-tech","credit","marketplace","origination"],"latest_commit_sha":null,"homepage":"https://app.regen.network","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/regen-network.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-04-22T23:33:22.000Z","updated_at":"2026-01-12T11:00:01.000Z","dependencies_parsed_at":"2023-10-03T14:45:56.721Z","dependency_job_id":"b1c84faa-1f4b-4fc6-b6df-addc0591ee98","html_url":"https://github.com/regen-network/regen-web","commit_stats":{"total_commits":3427,"total_committers":43,"mean_commits":79.69767441860465,"dds":0.6232856725999416,"last_synced_commit":"ee1177eddfad5cc786f11f0bbe0c20911345f58f"},"previous_names":[],"tags_count":70,"template":false,"template_full_name":null,"purl":"pkg:github/regen-network/regen-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regen-network%2Fregen-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regen-network%2Fregen-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regen-network%2Fregen-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regen-network%2Fregen-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/regen-network","download_url":"https://codeload.github.com/regen-network/regen-web/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regen-network%2Fregen-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28482137,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["biodiversity","carbon","climate","climate-tech","credit","marketplace","origination"],"created_at":"2024-08-01T13:02:22.579Z","updated_at":"2026-01-16T19:56:30.437Z","avatar_url":"https://github.com/regen-network.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Regen Website\n\nThe website for the [Regen Network](https://regen.network) decentralized infrastructure.\n\n## Table of Contents\n\n- [Regen Website](#regen-website)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n    - [Prerequisites](#prerequisites)\n      - [Mac](#mac)\n    - [Install dependencies](#install-dependencies)\n  - [Environment variables](#environment-variables)\n  - [Development](#development)\n  - [Deployment](#deployment)\n    - [Marketplace](#marketplace)\n      - [GraphQL Type generation](#graphql-type-generation)\n    - [Storybook](#storybook)\n    - [Website](#website)\n  - [Testing](#testing)\n    - [- Running tests](#--running-tests)\n    - [- Writing tests](#--writing-tests)\n  - [Code style](#code-style)\n  - [Code documentation](#code-documentation)\n  - [i18n](#i18n)\n    - [Important notes](#important-notes)\n    - [web-components](#web-components)\n  - [Typography](#typography)\n    - [Sizing guide](#sizing-guide)\n  - [Netlify](#netlify)\n    - [Debugging Netlify deploys](#debugging-netlify-deploys)\n\n## Installation\n\nThis project uses [bun](https://bun.sh/) with [bun workspaces](https://bun.sh/docs/install/workspaces) to manage multiple packages:\n\n- `web-marketplace`: Registry React application\n- `web-components`: React components and [material-ui](https://material-ui.com/) custom theme\n- `web-storybook`: [Storybook](https://storybook.js.org/) config\n\n[Lerna](https://github.com/lerna/lerna) is also used to bump packages versions and push new releases.\n\n### Prerequisites\n\n#### Mac\n\nIf you haven't already, you can set up system dependencies by running the following commands:\n\n```sh\nbrew install python\nsudo ln -s /opt/homebrew/bin/python3 /opt/homebrew/bin/python\nbrew install vips\n```\n\nNote: `python` and `vips` are dependencies via `sharp`.\n\n### Install dependencies\n\n```sh\nbun install\n```\n\n## Environment variables\n\nSet variables in `.env` files in `web-marketplace/` and `web-storybook/` folders based on provided `.env.example` files.\n\n## Development\n\nTo run the marketplace app:\n\n```sh\nbun run dev\n```\n\nTo run Storybook:\n\n```sh\nbun run storybook\n```\n\nTo run the website:\n\n```sh\ncd web-www \u0026\u0026 bun run dev\n```\n\n## Deployment\n\n### Marketplace\n\nCompile `web-marketplace` to `web-marketplace/.next` respectively:\n\n```sh\nbun run build\n```\n\n#### GraphQL Type generation\n\nTo generate Type definitions from our GraphQL Schema, as well as custom react hooks, make sure the [graphQL server is running locally](https://github.com/regen-network/registry-server/blob/5adc07f89c0d4ee74d65779cfad591025c8bebc2/README.md#starting-a-development-server), `cd` into the appropriate sub-folder and run (per repo):\n\nFor `/web-marketplace` there are two commands for the separate sources:\n\n1. `bun run graphql:codegen` - for registry server graphql types\n2. `bun run graphql:codegen-sanity` - for sanity CMS graphql types\n\nwhich generates types for any **_named_** GraphQL queries and mutations in `web-marketplace/src/graphql/*.graphql` (note - it does not generate types for unnamed queries)\n\n```sh\nbun run graphql:codegen\n```\n\nThis should be done anytime a `.graphql` file is created or modified.\n\nAs part of https://github.com/regen-network/regen-server/pull/186, we've added some additional filtering features to our GraphQL server (using [postgraphile-plugin-connection-filter](https://github.com/graphile-contrib/postgraphile-plugin-connection-filter)), though we restricted the filters to only work on certain fields and operators for now for [performance and security](https://github.com/graphile-contrib/postgraphile-plugin-connection-filter#performance-and-security) reasons:\nhttps://github.com/regen-network/regen-server/blob/aa97096c9a8e88e1af97655586e0222e263b8df5/server/Server.ts#L111-L115\n\nIf you try to use a filter that is not allowed yet, you'll get the following error when trying to generate types:\n`GraphQLDocumentError: Field \"${fieldName}\" is not defined by type \"${TableName}Filter\".`\nIn this case, you might want to submit a PR on https://github.com/regen-network/regen-server first to allow more filtering options.\n\nSimilarly, types can be generated for Sanity GraphQL Schema (from `web-marketplace/src/graphql/sanity/*.graphql`) using:\n\n```sh\nbun run graphql:codegen-sanity\n```\n\n### Storybook\n\n```sh\nbun run build-storybook\n```\n\n### Website\n\n```sh\nbun run build-www\n```\n\n## Testing\n\n#### - Running tests\n\nWe are using [Vitest](https://vitest.dev/) as a test runner.\n\nTests can be run in the terminal with the following commands from the project root:\n\n- To run `web-marketplace` tests\n\n  ```sh\n  bun run test-marketplace\n  ```\n\n- To run `web-components` tests\n  ```sh\n  bun run test-components\n  ```\n  In both cases the test runner is launched in the interactive watch mode.\n\n#### - Writing tests\n\nWhen writing test in `web-marketplace` remember to import the methods from`'web-marketplace/test/test-utils'`, specially the `render` method, as it is a custom render that wraps components with the necessary providers.\n\nIn `web-components`, methods should be imported directly from `'@testing-library/*'`\n\n## Code style\n\n[Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) are used as\ncode formatter and linter.\n\nCode can be formatted and any auto-fixable errors corrected through the command:\n\n```sh\nbun run format-and-fix\n```\n\nIf you are using VsCode, there are suggested workspace settings in `.vscode/settings.json.suggested` - copy those over to your workspace `settings.json` and things should format automatically.\n\nNote: You'll need the VsCode extensions for [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n\n## Code documentation\n\nWrite self explanatory code, and **add comments only when necessary** to explain **why** a part of the code exists, to **explain complex logic** or when the purpose of the code isn't immediately clear.\n\n- Use [TSDoc](https://tsdoc.org/) when writing documentation.\n- Components should have a short comment explaining their role in the overall codebase.\n- For hooks, utilities, and other code elements, add documentation only when necessary to clarify their purpose or behavior, especially if their functionality is not immediately obvious.\n- If a _Type_ requires clarification, use a **block** comment to describe its purpose. This will help provide context in the IntelliSense tooltip.\n\n### Examples:\n\n#### Type documentation\nWhen needed, explain the purpose of the type's properties\n```ts\n/**\n * Props for the useSaveProjectSelectedOption hook.\n */\ninterface Props {\n  /** The ID of the project to be matched. */\n  projectId: string;\n  /** The list of available project options to search through. */\n  projectOptions: Option[];\n  /** Callback function to be triggered when a matching option is found. */\n  saveProjectOptionSelected: (isFound: Option) =\u003e void;\n}\n```\n\n#### Hook/Utilities documentation\nExplain the code's role, parameters, and return values adding links to the types.\n```ts\n/**\n * Triggers a callback whenever a selected ID matches an option from a list.\n *\n * @param props - See {@link Props}\n * @returns {void}\n */\nexport default function useSaveProjectSelectedOption({\n  projectId,\n  projectOptions,\n  saveProjectOptionSelected,\n}: Props): void {\n  ...\n};\n```\n#### Complex Logic Explanation\n```ts\n// We're using a timeout here because the animation needs to complete\n// before we can safely remove the element from the DOM\nsetTimeout(() =\u003e {\n  setIsVisible(false);\n}, 300);\n```\n\n#### TODOs\nUse `// TODO:` to mark incomplete implementations, temporary solutions, or areas that need improvement.\n\n```ts\n// TODO: find a better solution than this hack.\nsomethingHacky();\n```\n\n#### What NOT to do\n```ts\n// user\nconst x = getIt(id)\n```\nDo this instead - code is self explanatory and doesn't need a comment\n```ts\nconst user = getUserById(id);\n```\n\n\n\n## i18n\n\nRegen codebase use [lingui](https://lingui.dev/) Internationalization Framework.\n\n**Lingui package usage:**\n\n * static text in JSX: \n```\n\u003cTrans\u003e{'static text'}\u003c/Trans\u003e\n```\n* attributes: \n```\n  const { _ } = useLingui();\n  _(msg\\`static text\\`)\n  ```\n* constants:\n```\n  const elements = [msg\\`some element\\`]\n  _(elements[0])\n```\n  - If the constant is an object:\n```\nimport { i18n } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\n\nconst myObject = {\n  myKey: i18n._(msg`MyValue`)\n}\n```\n**Lingui CLI usage:**\n\nRun `i18n:extract` inside `web-marketplace` to update the `.po` files with the newly added translation keys (with `\u003cTrans\u003e` or `_(msg)`).\n\n**Tips**\n\nHere's a vscode snippet to make string translation easier:\n\n```\n\"Lingui translate\": {\n  \"prefix\": \"lin\",\n  \"body\": [\n    \"_(msg`$1`)\",\n  ],\n  \"description\": \"Translate text\"\n}\n```\n\n### Important notes\n\n`\u003cTrans\u003e` component should be imported from `@lingui/macro` most of the time. This component is used at compile-time.\nThere is another `\u003cTrans\u003e` component in `@lingui/react` for [special cases](https://lingui.dev/tutorials/react-patterns#lazy-translations). This component is used at runtime.\n\n### web-components\n\ncomponents in `web-components` should not use any i18n code in order to make them more generic and reusable.\n\n## Typography\n\nThis repo utilizes custom MUI Typography components to normalize styles with the mockups based on the typography in [figma](\u003chttps://www.figma.com/file/MuSpCtCdU2ns4cFAsPfvsx/Text-Styles-%26-Components-(current)?node-id=0:1\u003e):\n\n1. `\u003cTitle /\u003e` corresponds to \"Header\" text in the mockups\n2. `\u003cLabel /\u003e` corresponds to \"Button Text\" in the mockups\n3. `\u003cSubtitle /\u003e`\n4. `\u003cBody /\u003e`\n\nResponsive styles are generally normalized (e.g. an `H1` on desktop translates to an `H3` on mobile in most cases), however these can be overridden with `variant` / `mobileVariant` (for Titles) and `size` / `mobileSize` (for the others). For example:\n\n```tsx\n\u003cTitle /\u003e // renders an h1 (default) on desktop, h3 on mobile\n\u003cTitle variant=\"h3\" /\u003e // renders an h3 on desktop, h4 on mobile\n\u003cTitle variant=\"h3\" mobileVariant=\"h3\" /\u003e // renders an h3 on desktop \u0026 mobile\n\u003cSubtitle size=\"xl\" mobileSize=\"sm\" /\u003e\n\u003cBody mobileSize=\"md\" /\u003e // keep default `md` size on mobile\n```\n\nOne small gotcha: due to how `styled` components and the `sx` prop function together, if you want to use a custom `fontSize` through `sx`, you have to pass responsive values:\n\n```tsx\n\u003cTitle sx={{ fontSize: 12 }}\u003e // does not work as expected\n\u003cTitle sx={{ fontSize: [12] }}\u003e // works\n\u003cTitle sx={{ fontSize: [12, 18] }}\u003e // works\n\u003cTitle sx={{ fontSize: { xs: 12 } }}\u003e // works\n```\n\nAll of these components also accept MUI's [SX Prop](https://mui.com/system/the-sx-prop/).\n\nThe `\u003cBody\u003e` component by default will add styles to child `Link` and `ul/ol` elements, which can be overridden through props:\n\n```tsx\n\u003cBody\u003e\n  \u003cLink\u003etext\u003c/Link\u003e // will render as green w/ bold text\n  \u003col\u003e\n    \u003cli\u003elist text\u003c/li\u003e // will render with a green dot and custom positioning\n  \u003c/ol\u003e\n\u003c/Body\u003e\n\u003cBody styleLinks={false} styleLists={false}\u003e\n  \u003cLink\u003etext\u003c/Link\u003e // will render as default text\n  \u003col\u003e\n    \u003cli\u003elist text\u003c/li\u003e // will render with default list styles\n  \u003c/ol\u003e\n\u003c/Body\u003e\n```\n\n### Sizing guide\n\n| **Px** | **Rem**  | **theme.spacing** |            **Figma Component**            |      **UI Components**       | **MUI Variants** |\n| :----: | :------: | ----------------- | :---------------------------------------: | :--------------------------: | :--------------: |\n|  48px  |   3rem   | 12                |                    H1                     |            Title             |        H1        |\n|  38px  | 2.375rem | 9.5               |                    H2                     |            Title             |        H2        |\n|  32px  |   2rem   | 8                 |                    H3                     |            Title             |        H3        |\n|  24px  |  1.5rem  | 6                 |                    H4                     |            Title             |        H4        |\n|  22px  | 1.375rem | 5.5               |        bodyXLarge, subtitleXLarge         |        Body, Subtitle        |    textXLarge    |\n|  21px  | 1.313rem | 5.252             |              H5, ButtonLarge              |         Title, Label         |        H5        |\n|  18px  | 1.125rem | 4.5               | H6, subtitleLarge bodyLarge, buttonMedium | Title, Subtitle, Body, Label |  h6, textLarge   |\n|  16px  |   1rem   | 4                 |        subtitleMedium, bodyMedium         |       Subtitle, Label        |    textMedium    |\n|  14px  | 0.875rem | 3.5               |   subtitleSmall, bodySmall, buttonSmall   |    Subtitle, Body, Label     |    textSmall     |\n|  12px  | 0.75rem  | 3                 |  subtitleXSmall bodyXSmall, buttonXSmall  |    Subtitle, Body, Label     |    textXSmall    |\n\n## Netlify\n\nCurrently we use netlify to deploy this application.\nPlease see the `netlify.toml` in the project root for information about the different deployment environments.\n\n### Debugging Netlify deploys\n\nIn case you are seeing a build/deploy failure from Netlify, there is a helpful way to debug.\nNetlify provides the source code for [their build-image](https://github.com/netlify/build-image).\nThis docker image can be used to run a netlify build worker on your local machine.\nThis allows you to test settings and parameters of the build.\nHopefully this allows you to reproduce the error/failure you are dealing with.\n\n```sh\ngit clone https://github.com/netlify/build-image\ncd build-images\ndocker pull netlify/build:focal\n./test-tools/start-image.sh ../regen-web/\n```\n\nMake sure that any changes you want to test in the local build are committed.\nUncommited changes are ignored by the Netlify build image.\n\nAfter running the `start-image.sh` script you will drop into the docker container.\nThen you will be able to run any commands, i.e. the build:\n\n```sh\n/opt/build-bin/build bun run build\n```\n\n**Note:** In some instances we had experienced issues when buiding the Next.js app in Netlify because the CI build produces a serverless function that in some cases exceeds the 250 MB limit, even though the local build does not. For detailed debugging instructions, please refer to the [netlify-plugin-upload-function-bundle README](./web-marketplace/scripts/netlify-plugin-upload-function-bundle/README.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fregen-network%2Fregen-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fregen-network%2Fregen-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fregen-network%2Fregen-web/lists"}