{"id":31785590,"url":"https://github.com/generous-folks/react-retro-workshop","last_synced_at":"2026-05-08T19:31:52.987Z","repository":{"id":41656315,"uuid":"258465314","full_name":"generous-folks/react-retro-workshop","owner":"generous-folks","description":"A simple react app to retro-engineer. This can be used as an example ressource to give individual trainings","archived":false,"fork":false,"pushed_at":"2023-01-06T04:19:50.000Z","size":5225,"stargazers_count":0,"open_issues_count":24,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-10T12:01:16.485Z","etag":null,"topics":["react","redux","training-material"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/generous-folks.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":"2020-04-24T09:22:28.000Z","updated_at":"2021-08-09T21:28:17.000Z","dependencies_parsed_at":"2023-02-05T07:02:05.838Z","dependency_job_id":null,"html_url":"https://github.com/generous-folks/react-retro-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/generous-folks/react-retro-workshop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generous-folks%2Freact-retro-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generous-folks%2Freact-retro-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generous-folks%2Freact-retro-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generous-folks%2Freact-retro-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/generous-folks","download_url":"https://codeload.github.com/generous-folks/react-retro-workshop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generous-folks%2Freact-retro-workshop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32794584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["react","redux","training-material"],"created_at":"2025-10-10T11:59:49.650Z","updated_at":"2026-05-08T19:31:52.970Z","avatar_url":"https://github.com/generous-folks.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Retro Engineering React App\n\n\u003e Url: https://react-course-retro.now.sh/\n\nThe purpose of this exercise is to understand a react app architecture, whether it uses redux or built-in React tools (context and hooks).\n\n## Workflow\n\nFor a single person, use a VS code liveshare session (or equivalent) and let the learner go step by step while questioning the decisions taken. Of course, re-orient him/her when the decision is not right by explaining why and giving hints on the right direction to take.\n\n\n## Pre-requisites\n\n- node \u003e= 11\n- yarn 1.*\n\n#### Nice to have\n\n- vscode with liveshare\n- prettier / eslint extensions\n\n## Getting started\n\n- `git clone https://github.com/generous-folks/react-retro-workshop`\n- `yarn \u0026\u0026 yarn start`\n\n## Steps\n\n### Analysis\n\n- Identify the html structure\n\u003e You may use https://wireframe.cc/ to help visualize the DOM elements\n- Identify the react component structure from the html one, list them\n\u003e You may use https://wireframe.cc/ to help visualize the react elements\n- List the methods you will need\n- List the states you will need\n- Virtually assign the state and methods to the components you listed earlier\n- With Context, how would you architecture your app so every components access what it needs and nothing else (if possible)\n- With Redux, how would you architecture your app so every components access what it needs and nothing else (if possible)\n\n### Code !\n\n- Create your directory structure and file structure\n- Create your routes\n- Create your shared components\n- create a basic html (jsx) markup for your pages\n- Create your store\n- create your modules (features reflecting the business) \n- access the store and methods in your components and identify the pitfalls (redux or context)\n- Style it with material ui to gain time\n- :tada:\n\n## Dependencies\n\nTo gain time, some tools and dependencies are already in place :\n\n- react\n- prop-types\n- react-router\n- connected-react-router\n- redux\n- react-redux\n- redux-thunk\n- @material-ui/core\n- @material-ui/icons\n- @material-ui/styles\n\n#### dev-tools\n- eslint\n- prettier\n- redux-devtools\n- react-devtools\n\n## API\n\nTo build this app, we use an API that returns articles.\nThe methods to fetch the API are already coded in `src/utils/api.utils.js`\n\nThe data model:\n\n```go\n// ArticlesType represents the articles collection in the database\ntype ArticlesType []map[string]interface{}\n\n// ArticleFieldsType defines the structure of the fields in an article from the articles collection.\ntype ArticleFieldsType struct {\n\tID          string  `firestore:\"id\"`\n\tName        string  `firestore:\"name\"`\n\tPrice       float64 `firestore:\"price\"`\n\tType        string  `firestore:\"type\"`\n\tYear        string  `firestore:\"year\"`\n\tImage       string  `firestore:\"image\"`\n\tDescription string  `firestore:\"description\"`\n\tSlug        string  `firestore:\"slug\"`\n}\n```\n\nThe `getArticles` method will return the articles collection as body of the `GET` request.\n\n## Functional Specs\n\n### Pages\n\n- `/home`\n  - List of articles\n  - Cart on the side\n- `/article/${id}`\n  - article card\n  - Cart on the side\n  - return home cta\n- `/about`\n  - return home cta\n\n### Layout\n\n- AppBar with nav menu\n\n### Cart\n\n- Empty Card with a checkout button by default\n- List of added items with delete/minus button (you can add the same item and increment its count from the `add to cart` button)\n\n### Article\n\n- A card with:\n  - an image\n  - a title\n  - a description\n  - an `add to cart` cta\n  - a `view` (article) cta\n\n## Cheat sheet\n\n- Redux: https://codesandbox.io/s/9on71rvnyo\n- Material-UI:\n  - Install: https://material-ui.com/getting-started/installation/\n  - Styling: https://material-ui.com/styles/api/#makestyles-styles-options-hook\n  \n  - Container:  https://material-ui.com/components/container/\n  - Grid:  https://material-ui.com/components/grid/\n  - AppBar: https://material-ui.com/components/app-bar/\n  - Paper:  https://material-ui.com/components/paper/\n  - Card: https://material-ui.com/components/card/\n  - Button: https://material-ui.com/components/button/\n  - Typography:  https://material-ui.com/components/typography/\n  - Modal:  https://material-ui.com/components/modal/\n\n  - Icons: https://material-ui.com/components/material-icons/\n- React Context/Reducer: https://kentcdodds.com/blog/how-to-use-react-context-effectively\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgenerous-folks%2Freact-retro-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgenerous-folks%2Freact-retro-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgenerous-folks%2Freact-retro-workshop/lists"}