{"id":19972646,"url":"https://github.com/jpb06/nx-front-poc","last_synced_at":"2025-05-04T01:30:57.481Z","repository":{"id":37009309,"uuid":"419000450","full_name":"jpb06/nx-front-poc","owner":"jpb06","description":"Toying with react-hook-form and material-ui ...","archived":false,"fork":false,"pushed_at":"2023-02-19T19:30:43.000Z","size":112334,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T01:01:46.657Z","etag":null,"topics":["material-ui","nextjs","react-hook-form","sandbox","testing-library"],"latest_commit_sha":null,"homepage":"https://mui-rhf-sandbox.vercel.app/","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/jpb06.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}},"created_at":"2021-10-19T16:14:13.000Z","updated_at":"2023-03-08T23:41:58.000Z","dependencies_parsed_at":"2023-02-18T18:46:07.794Z","dependency_job_id":null,"html_url":"https://github.com/jpb06/nx-front-poc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fnx-front-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fnx-front-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fnx-front-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fnx-front-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpb06","download_url":"https://codeload.github.com/jpb06/nx-front-poc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252276955,"owners_count":21722447,"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":["material-ui","nextjs","react-hook-form","sandbox","testing-library"],"created_at":"2024-11-13T03:08:47.618Z","updated_at":"2025-05-04T01:30:52.470Z","avatar_url":"https://github.com/jpb06.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✨ nx-front-poc\n\n[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode\u0026label=\u0026message=Open%20in%20Visual%20Studio%20Code\u0026labelColor=2c2c32\u0026color=007acc\u0026logoColor=007acc)](https://github.dev/jpb06/nx-front-poc)\n[![Front deployment](https://img.shields.io/github/deployments/jpb06/nx-front-poc/production?label=front%20deploy\u0026logo=vercel\u0026logoColor=white)](https://nx-front-poc.vercel.app/)\n[![Storybook deployment](https://img.shields.io/github/deployments/jpb06/nx-front-poc/production%20–%20mui-rhf-sandbox-storybook?label=storybook%20deploy\u0026logo=vercel\u0026logoColor=white)](https://nx-front-poc-storybook.vercel.app/)\n[![Back deployment](https://img.shields.io/github/deployments/jpb06/nx-front-poc/rhf-mui-nx-sandbox-back?label=back%20deploy\u0026logo=heroku\u0026logoColor=dodgerblue)](https://rhf-mui-nx-sandbox-back.herokuapp.com/)\n![Github workflow](https://img.shields.io/github/workflow/status/jpb06/nx-front-poc/tests%20and%20sonarcloud%20scan?label=last%20workflow\u0026logo=github-actions)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=security_rating)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n[![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=code_smells)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=bugs)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n[![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=duplicated_lines_density)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=jpb06_mui-rhf-sandbox\u0026metric=ncloc)](https://sonarcloud.io/summary/new_code?id=jpb06_mui-rhf-sandbox)\n![Last commit](https://img.shields.io/github/last-commit/jpb06/nx-front-poc?logo=git)\n\nHere is a little POC to help our team move forward with our stack! ✨\n\n\u003c!-- readme-package-icons start --\u003e\n\n\u003cp align=\"left\"\u003e\u003ca href=\"https://docs.github.com/en/actions\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/GithubActions-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://www.typescriptlang.org/docs/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/TypeScript.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://nodejs.org/en/docs/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/NodeJS-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://pnpm.io/motivation\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Pnpm-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://axios-http.com/fr/docs/intro\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Axios-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://babeljs.io/docs/en/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Babel-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://github.com/conventional-changelog\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/CommitLint.Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://docs.cypress.io/guides/overview/why-cypress\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Cypress-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://emotion.sh/docs/introduction\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Emotion-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://eslint.org/docs/latest/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Eslint-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://expressjs.com/en/starter/installing.html\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/ExpressJS-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://www.i18next.com/overview/getting-started\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/I18next-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://jestjs.io/docs/getting-started\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Jest.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://jwt.io\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Jwt-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://mui.com/material-ui/getting-started/overview/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/MaterialUI-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://mswjs.io/docs/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Msw-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://docs.nestjs.com\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/NestJS-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://nextjs.org/docs/getting-started\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/NextJS-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://nx.dev/getting-started/intro\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Nx-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://prettier.io/docs/en/index.html\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Prettier-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://reactjs.org/docs/getting-started.html\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/React-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://react-hook-form.com/get-started\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/ReactHookForm-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://tanstack.com/query/v4/docs/overview\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/ReactQuery-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://rxjs.dev/guide/overview\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Rxjs-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://storybook.js.org/docs/react/get-started/introduction\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Storybook-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://styled-components.com/docs\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/StyledComponents.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://swagger.io\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Swagger-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://swc.rs/docs/getting-started\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Swc-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://testing-library.com/docs/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/TestingLibrary-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://github.com/typestack\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/TypeStack-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://webpack.js.org/concepts/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Webpack-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://github.com/colinhacks/zod#introduction\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Zod-Dark.svg\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003c!-- readme-package-icons end --\u003e\n\n## ⚡ Deployments\n\n| description     | url                                           |\n| --------------- | --------------------------------------------- |\n| 🚀 Backend app  | https://rhf-mui-nx-sandbox-back.herokuapp.com |\n| 🚀 Frontend app | https://mui-rhf-sandbox.vercel.app            |\n| 🚀 Storybook    | https://mui-rhf-sandbox-storybook.vercel.app  |\n\n## ⚡ Getting started\n\n```bash\n# using fnm to set node version - https://github.com/Schniz/fnm\nfnm use\n\n# Installing dependencies\npnpm i\n\n# starting backend and frontend in parallel\npnpm dev frontend-app,backend-app\n# on windows\npnpm dev \"frontend-app,backend-app\"\n\n# run all tests\npnpm test-all\n\n# launch cypress tests in watch mode\npnpm nx e2e front-e2e-app --watch\n\n# launch storybook in dev mode\npnpm storybook\n```\n\n## ⚡ Documentation\n\nSeriously, read these please 🥲\n\n### 🔶 [`Codebase structure (the monorepo wonderland)`](./docs/nx.md)\n\n### 🔶 [`Frontend architecture`](./docs/frontend-architecture.md)\n\n### 🔶 [`Multi languages support`](./docs/translations.md)\n\n### 🔶 [`Forms handling`](./docs/react-hook-form.md)\n\n### 🔶 [`Tests`](./docs/tests.md)\n\n### 🔶 [`Storybook`](./docs/storybook.md)\n\n### 🔶 [`Cypress`](./docs/cypress.md)\n\n## ⚡ A quick peek at the nx graph\n\n![`nx`](./docs/assets/nx-graph.png)\n\n## ⚡ Projects\n\n| Project                                                                | Description                                                                  |\n| ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- |\n| 🚀 [`frontend-app`](./apps/front/README.md) app                        | Our frontend app, containing a signup form                                   |\n| 🚀 [`front-e2e-app`](./apps/front-e2e/README.md) app                   | Our end to end testing code using cypress                                    |\n| 🚀 [`front-storybook-app`](./apps/storybook/README.md) app             | A next app used to serve storybook                                           |\n| 🚀 [`backend-app`](./apps/back/README.md) app                          | Our backend app, relying on an in-memory dataset                             |\n| 🧩 [`front-api-lib`](./libs/front/api/README.md) lib                   | Our api types, extracted from the backend swagger                            |\n| 🧩 [`front-components-lib`](./libs/front/components/README.md) lib     | Our generic components and the MUI theme shared by all our frontend apps     |\n| 🧩 [`front-contexts-lib`](./libs/front/contexts/README.md) lib         | Shared contexts                                                              |\n| 🧩 [`front-logic-lib`](./libs/front/logic/README.md) lib               | Shared logic code                                                            |\n| 🧩 [`front-storybook-lib`](./libs/front/storybook/README.md) lib       | Library centralizing the configuration necessary to build and run storybook. |\n| 🧩 [`front-tests-lib`](./libs/front/tests/README.md) lib               | Tests related helpers and wrappers.                                          |\n| 🧩 [`front-theme-lib`](./libs/front/theme/README.md) lib               | Our applications theme (Mui).                                                |\n| 🧩 [`front-translations-lib`](./libs/front/translations/README.md) lib | Translations locales and helpers for our UI.                                 |\n\n## ⚡ cli\n\n### 🔶 Running actions\n\n| Description                                          | Command                                                               |\n| ---------------------------------------------------- | --------------------------------------------------------------------- |\n| ▶️ Run an action on one project                      | `pnpm nx run \u003caction\u003e \u003cproject\u003e`                                      |\n| ▶️ Run an action on all projects                     | `pnpm nx run-many --target=\u003caction\u003e --all`                            |\n| ▶️ Run an action on a set of projects                | `pnpm nx run-many --target=\u003caction\u003e --projects=\u003cproject1\u003e,\u003cproject2\u003e` |\n| ▶️ Run an action only on projects containing changes | `pnpm nx affected:\u003caction\u003e`                                           |\n\n#### 🧿 Typical actions\n\nActions are defined by project in `project.json` files. Here are a few standard actions:\n\n| Action             | Description                                                  |\n| ------------------ | ------------------------------------------------------------ |\n| 🛠️ build           | Builds the app/lib. Use `--prod` flag for a production build |\n| 🚀 serve           | Runs the app                                                 |\n| ⚠️ lint            | Run the linter against project files                         |\n| ✔️ type-check      | Uses `tsc --noEmit` to validate types against project files  |\n| ✅ test            | Runs tests                                                   |\n| ☑️ e2e             | Runs end to end tests                                        |\n| 🕵️ Sonarcloud scan | Execute sonarcloud scanner on the targetted app of lib       |\n\n#### 🧿 Useful flags\n\n| flag                 | Description                                                    |\n| -------------------- | -------------------------------------------------------------- |\n| ⬛ `--target=x`      | specifies which action to run                                  |\n| ⬛ `--skip-nx-cache` | disables nx caching; the command will be ran fully             |\n| ⬛ `--verbose`       | prints additional error stack trace on failure                 |\n| ⬛ `--projects=x,x`  | `run-many`: specifies which projects to run the action against |\n| ⬛ `--parallel=x`    | `run-many`: allows x tasks to be ran in parallel               |\n\n### 🔶 Running tests\n\n| Description                               | Command                                                                     |\n| ----------------------------------------- | --------------------------------------------------------------------------- |\n| ✅ Run tests for a project (watch)        | `pnpm test-changes \u003cproject\u003e` or `pnpm nx test --project=\u003cproject\u003e --watch` |\n| ✅ Run all tests for a project (watchAll) | `pnpm test-dev \u003cproject\u003e` or `pnpm nx test --project=\u003cproject\u003e --watchAll`  |\n| ✅ Run all tests in parallel              | `pnpm test-all` or `pnpm nx run-many --target=test --parallel --all`        |\n\n### 🔶 Creating applications or libraries\n\n| Description                        | Command                                                                        |\n| ---------------------------------- | ------------------------------------------------------------------------------ |\n| 🗃️ Create a new front app or lib   | `pnpm nx g @nrwl/react:app \u003cappname\u003e` or `pnpm nx g @nrwl/react:lib \u003clibname\u003e` |\n| 🗃️ Create a new backend app or lib | `pnpm nx g @nrwl/nest:app \u003cappname\u003e` or `pnpm nx g @nrwl/nest:lib \u003clibname\u003e`   |\n| 🗃️ Create a vanilla node lib       | `pnpm nx g @nrwl/node:lib \u003clibname\u003e`                                           |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpb06%2Fnx-front-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpb06%2Fnx-front-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpb06%2Fnx-front-poc/lists"}