{"id":19972619,"url":"https://github.com/jpb06/dev-friends-workshop","last_synced_at":"2025-05-04T01:30:54.616Z","repository":{"id":42035440,"uuid":"342902804","full_name":"jpb06/dev-friends-workshop","owner":"jpb06","description":"Helping my team move forward with our frontend","archived":false,"fork":false,"pushed_at":"2024-05-13T15:19:32.000Z","size":4472,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T01:01:45.713Z","etag":null,"topics":["functional-components","msw","nextjs","react","react-hooks","react-query","testing-library","workshop"],"latest_commit_sha":null,"homepage":"https://workshop-react-front.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-27T16:27:30.000Z","updated_at":"2024-05-13T15:19:33.000Z","dependencies_parsed_at":"2024-04-02T16:43:05.451Z","dependency_job_id":null,"html_url":"https://github.com/jpb06/dev-friends-workshop","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%2Fdev-friends-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fdev-friends-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fdev-friends-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fdev-friends-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpb06","download_url":"https://codeload.github.com/jpb06/dev-friends-workshop/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":["functional-components","msw","nextjs","react","react-hooks","react-query","testing-library","workshop"],"created_at":"2024-11-13T03:08:44.079Z","updated_at":"2025-05-04T01:30:54.601Z","avatar_url":"https://github.com/jpb06.png","language":"TypeScript","readme":"# Workshop\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/workshop-react-front)\n[![Front deployment](https://img.shields.io/github/deployments/jpb06/workshop-react-front/production?label=front%20deploy\u0026logo=vercel\u0026logoColor=white)](https://workshop-react-front.vercel.app/front)\n![Github workflow](https://img.shields.io/github/actions/workflow/status/jpb06/workshop-react-front/tests-scan.yml?branch=master\u0026logo=github-actions\u0026label=last%20workflow)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=jpb06_workshop-react-front\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=jpb06_workshop-react-front)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_workshop-react-front\u0026metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=jpb06_workshop-react-front)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_workshop-react-front\u0026metric=security_rating)](https://sonarcloud.io/summary/new_code?id=jpb06_workshop-react-front)\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_workshop-react-front\u0026metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=jpb06_workshop-react-front)\n![Coverage](./badges/coverage-total.svg)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=jpb06_workshop-react-front\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=jpb06_workshop-react-front)\n[![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=jpb06_workshop-react-front\u0026metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=jpb06_workshop-react-front)\n[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=jpb06_workshop-react-front\u0026metric=code_smells)](https://sonarcloud.io/summary/new_code?id=jpb06_workshop-react-front)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=jpb06_workshop-react-front\u0026metric=bugs)](https://sonarcloud.io/summary/new_code?id=jpb06_workshop-react-front)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=jpb06_workshop-react-front\u0026metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=jpb06_workshop-react-front)\n[![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=jpb06_workshop-react-front\u0026metric=duplicated_lines_density)](https://sonarcloud.io/summary/new_code?id=jpb06_workshop-react-front)\n![Last commit](https://img.shields.io/github/last-commit/jpb06/workshop-react-front?logo=git)\n\nHere is a little workshop to help my team move forward with our frontend :sparkles:\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://biomejs.dev/guides/getting-started/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Biome-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://fakerjs.dev/guide/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Faker-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://jotai.org/docs/introduction\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Jotai-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://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://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://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://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://vitejs.dev/guide/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Vite-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://vitest.dev/guide/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Vitest-Dark.svg\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003c!-- readme-package-icons end --\u003e\n\nThis is a continuation of the [Workshop react FCs repo](https://github.com/jpb06/workshop-react-fcs). Take a look at this archived repo if you want to know more about old implementations like the ones based on redux, for example.\n\nYou can find the [deployed app here](https://workshop-react-front.vercel.app).\n\n## ⚡ What is this repo about?\n\nThe original repo was created to convince everyone about React 16.8 features: hooks. Using only function components and hook is just great! Then the subject shifted to redux. Let's just say good bye to redux and its ecosystem for asynchronous tasks (thunks, sagas, whatever floats your boat).\n\nYou will find a few branches on [the original repo](https://github.com/jpb06/workshop-react-fcs); from oldest to newest:\n\n| Branch                                                                          | Description                                                                                                   |\n| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n| ❌ [noredux](https://github.com/jpb06/workshop-react-fcs/tree/noredux)          | Bearbone comparison between class components and FCs/hooks, using CRA                                         |\n| ❌ [redux](https://github.com/jpb06/workshop-react-fcs/tree/redux)              | Adding redux \u0026 redux-thunk to the mix. Still using CRA                                                        |\n| ❌ [react-query](https://github.com/jpb06/workshop-react-fcs/tree/react-query/) | No more redux. Time for server state libraries! Using nextjs this time and making sure we reach 100% coverage |\n\nThe current repo is an import of the react-query branch. We splitted frontend and backend in two different repos to tackle deployment issues.\n\n## ⚡ Guidelines\n\n### 🔶 [General guidelines](./docs/bp-general-guidelines.md)\n\n### 🔶 [Making sure we are understood](./docs/bp-conveyintent-guidelines.md)\n\n### 🔶 [Code guidelines](./docs/bp-code-guidelines.md)\n\n### 🔶 [Frontend guidelines](./docs/bp-frontend-guidelines.md)\n\n## ⚡ The Dev Friends application\n\nOur objective here is to display a list of developers that can be filtered by their squad. We also want to be able to change the squad of a developer.\n\nWe will follow the guidelines described above. Let's take a look at the components tree of the app:\n\n![Components tree](./docs/assets/DevFriendsTree.png)\n\n## ⚡ Backend\n\nYou can find the backend repo [here](https://github.com/jpb06/workshop-react-backend). It's a barebone express, so not much to see there.\n\nLet's just list quickly the routes exposed by the backend:\n\n| Route                 | Verb    | Description                                                             |\n| --------------------- | ------- | ----------------------------------------------------------------------- |\n| 💥 /squads            | 🔹 GET  | Retrieves all squads                                                    |\n| 💥 /squads/{id}/devs  | 🔹 GET  | Retrieves all devs belonging to a squad                                 |\n| 💥 /devs              | 🔹 GET  | Retrieves all devs                                                      |\n| 💥 /devs/by-squad     | 🔸 POST | Retrieves devs belonging to a list of squads passed in the request body |\n| 💥 /devs/change-squad | 🔸 POST | Moves a developer to another squad                                      |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpb06%2Fdev-friends-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpb06%2Fdev-friends-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpb06%2Fdev-friends-workshop/lists"}