{"id":23632440,"url":"https://github.com/netzwerg/react-you-do-you","last_synced_at":"2025-10-29T10:14:04.703Z","repository":{"id":42988080,"uuid":"207103124","full_name":"netzwerg/react-you-do-you","owner":"netzwerg","description":"How I use React + Redux + Material-UI + TypeScript – you do you 💖","archived":false,"fork":false,"pushed_at":"2023-09-30T11:42:15.000Z","size":106875,"stargazers_count":122,"open_issues_count":5,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-19T06:04:11.944Z","etag":null,"topics":["ladle","material-ui","playwright-typescript","prettier","react-redux","reactjs","redux-toolkit","starter-template","typescript","vite","vitest"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/netzwerg.png","metadata":{"files":{"readme":"README.adoc","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-09-08T11:34:45.000Z","updated_at":"2025-04-14T04:59:49.000Z","dependencies_parsed_at":"2023-02-18T17:31:36.723Z","dependency_job_id":"2048f8e1-645e-4226-ad7b-c0ab297ce921","html_url":"https://github.com/netzwerg/react-you-do-you","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/netzwerg/react-you-do-you","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netzwerg%2Freact-you-do-you","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netzwerg%2Freact-you-do-you/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netzwerg%2Freact-you-do-you/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netzwerg%2Freact-you-do-you/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netzwerg","download_url":"https://codeload.github.com/netzwerg/react-you-do-you/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netzwerg%2Freact-you-do-you/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266624965,"owners_count":23958304,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"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":["ladle","material-ui","playwright-typescript","prettier","react-redux","reactjs","redux-toolkit","starter-template","typescript","vite","vitest"],"created_at":"2024-12-28T03:29:04.907Z","updated_at":"2025-10-29T10:13:59.656Z","avatar_url":"https://github.com/netzwerg.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"= react-you-do-you\n\nimage:https://github.com/netzwerg/react-you-do-you/actions/workflows/main.yml/badge.svg[]\n\nAn example of how I use React + Redux + Material-UI + TypeScript.\n\nOr: The code I wish existed when I got started. +\nOr: A project template to start off on the right foot.\n\nThis is how I do it – *you do you* 💖\n\nDeployed live version: ✨ https://netzwerg.github.io/react-you-do-you ✨\n\n== Setup \u0026 Tooling\n**  https://reactjs.org[React 17] based on https://vitejs.dev[Vite]:\n*** Compilation, linting, etc.\n*** Development mode with auto-reloading\n*** Test watcher\n*** Optimized production build\n*** see \u003c\u003cscripts, Available Scripts\u003e\u003e\n** https://yarnpkg.com/features/pnp[Yarn 3] (with Plug'n'Play i.e. without `node_modules`)\n** https://www.typescriptlang.org/[TypeScript 4.9] for compile-time safety\n** https://prettier.io[Prettier] for formatting, auto-triggered on commit via https://github.com/typicode/husky[Husky]\n** https://redux-toolkit.js.org[Redux Toolkit] for state management\n** https://material-ui.com/[Material UI 5] component library (using MUI System for CSS)\n** https://ladle.dev[Ladle] to build \u0026 test UI components in isolation\n** https://playwright.dev[Playwright] to detect regressions through visual snapshots\n** GitHub Actions \u0026 Pages Continuous Delivery\n\n== Structure\nOrganize *by feature*:\n\n* Each feature gets its own folder\n* Defines its own slice of models/actions/reducer\n* Defines its own components, clearly separated into presentation (inside `components` folder) and glue-code/logic (inside `containers` folder)\n\n== State Management\n\n* Keep state in a *fully typed, immutable* model:\n** Use interfaces or type aliases rather than classes (rule of thumb: prefer interfaces because they give better compile error message, use type aliases for sum type awesomeness)\n** Use TypeScript's `readonly` keyword and `Readonly[Array|Stream|Set|Map]` utility types\n* Use https://redux-toolkit.js.org[Redux Toolkit], an _\"opinionated, batteries-included toolset for efficient Redux development\"_\n** Compose feature-specific reducers\n** Write container components to connect presentation components to the Redux store. *Why?* Presentation components are more re-usable if they don't know how state is shaped nor how it's managed.\n** Use https://github.com/reduxjs/redux-thunk[redux-thunk] for async actions\n** Optional: https://redux-toolkit.js.org/usage/immer-reducers[Write Reducers with Immer]\n\n== Broad Overview\n\nimage::docs/container-vs-component.png[]\n\n== User Interface\n\nUse https://material-ui.com/[Material UI 5], a React component library based on https://en.m.wikipedia.org/wiki/Material_Design[Material Design]:\n\n* Huge selection of components, fully customizable\n* Theme support (e.g. light vs dark)\n* CSS utilities (MUI System)\n\n== Testing\n\nI am mostly developing prototypes these days, so I am not an expert when it comes to testing.\nHowever, this is the minimum I *always* test:\n\n* Slices: Making sure each action is handled correctly (~80% of my logic)\n* Error-free rendering of each component (\"Rendering Smoke Tests\")\n\n== Ladle\n\nThe project contains a full https://ladle.dev[Ladle] configuration.\nWriting stories for your UI components allows building \u0026 testing them in isolation.\nExample stories are contained in link:src/stories[src/stories].\n\nTo run locally:\n\n`yarn ladle serve`\n\n== Playwright\n\nAn example setup to detect regressions through https://ladle.dev/docs/visual-snapshots[visual snapshots] is configured in link:src/e2e[src/e2e]\n\nNOTE: These tests are not running automatically – adding them to your CI is up to you\n\nTo run the playwright tests locally, first install the required browser binaries:\n\n`yarn playwright install`\n\nThen, to run the tests:\n\n1. Build ladle: `yarn ladle build`\n2. Start ladle: `yarn ladle preview -p 61000`\n3. Run playwright: `yarn playwright test ./src/e2e/snapshot.spec.ts`\n\n== Continuous Integration \u0026 Delivery\n\nOn every push or pull request, a set of link:.github/workflows/main.yml[GitHub Actions] are kicked off:\n\n* Run all tests\n* Check for circular dependencies\n* Build \u0026 deploy the app\n\nIf successful, the app is available on `https://\u003cusername\u003e.github.io/\u003creponame\u003e` (via GitHub Pages).\n\n== Usage\n\n=== Explore Locally\n\nWARNING: Requires Node ^14.17.0 || \u003e=16.0.0 (https://github.com/facebook/create-react-app/issues/11792#issuecomment-998851765[Details])\n\n[source]\n----\ngit clone https://github.com/netzwerg/react-you-do-you.git\ncd react-you-do-you\nyarn install\nyarn start\n----\n\n=== Editor Setup\n\nSince we are using Yarn 3 with Plug'n'Play, Smart IDEs (such as VSCode or IntelliJ) require special configuration for TypeScript to work. See: https://yarnpkg.com/getting-started/editor-sdks[Editor SDKs].\n\nTo setup VS Code, run the following command:\n\n[source]\n----\nyarn dlx @yarnpkg/sdks vscode\n----\n\nOnce the Editor SDK is installed, VS Code will ask you to choose a TypeScript version. Choose \"Use Workspace Version\".\n\n=== As Project Template\n\n* Rename root folder to `my-fancy-new-project-name`\n* Replace all occurrences of `react-you-do-you` with `my-fancy-new-project-name`\n* Remove existing Git repo: `rm -rf .git`\n* Initialize a new Git repo: `git init`\n\n[[scripts]]\n== Available Scripts\n\n=== `yarn start`\n\nCompiles and runs the app in development mode.\n\nOpen http://localhost:3000 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any compile or lint errors in the console.\n\n=== `yarn test`\n\nLaunches the test runner in interactive watch mode.\n\n=== `yarn run build`\n\nBuilds the app for production to the `build` folder.\n\n=== `yarn run lint`\n\nRuns ESLint (with TypeScript support) on all `\u0026#42;.ts` or `\u0026#42;.tsx` files in the `src` directory.\n\n=== `yarn run lint:fix`\n\nRuns ESLint (with TypeScript support) on all `\u0026#42;.ts` or `\u0026#42;.tsx` files in the `src` directory, automatically *fixing* problems.\n\n=== `yarn ladle serve`\n\nRuns Ladle\n\n\u0026copy; Rahel Lüthy 2019 - 2023 link:LICENSE[MIT License]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetzwerg%2Freact-you-do-you","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetzwerg%2Freact-you-do-you","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetzwerg%2Freact-you-do-you/lists"}