{"id":21980069,"url":"https://github.com/laststance/react-typescript-todomvc-2022","last_synced_at":"2025-05-15T10:07:22.780Z","repository":{"id":37004726,"uuid":"197295976","full_name":"laststance/react-typescript-todomvc-2022","owner":"laststance","description":"React TypeScript TodoMVC 2022","archived":false,"fork":false,"pushed_at":"2025-03-26T06:09:58.000Z","size":24313,"stargazers_count":539,"open_issues_count":4,"forks_count":123,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-14T16:57:49.630Z","etag":null,"topics":["example","react","react-testing-library","todo","typescript"],"latest_commit_sha":null,"homepage":"https://react-typescript-todomvc.netlify.app/","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/laststance.png","metadata":{"files":{"readme":"README.md","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,"zenodo":null}},"created_at":"2019-07-17T01:58:05.000Z","updated_at":"2025-04-02T15:52:32.000Z","dependencies_parsed_at":"2024-06-18T22:28:52.830Z","dependency_job_id":"a6ebb7dd-d8f4-4c28-8b2d-433ccdc46e73","html_url":"https://github.com/laststance/react-typescript-todomvc-2022","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laststance%2Freact-typescript-todomvc-2022","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laststance%2Freact-typescript-todomvc-2022/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laststance%2Freact-typescript-todomvc-2022/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laststance%2Freact-typescript-todomvc-2022/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laststance","download_url":"https://codeload.github.com/laststance/react-typescript-todomvc-2022/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319720,"owners_count":22051073,"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":["example","react","react-testing-library","todo","typescript"],"created_at":"2024-11-29T17:09:28.149Z","updated_at":"2025-05-15T10:07:17.753Z","avatar_url":"https://github.com/laststance.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Project Status from the Author (@ryota-murakami, Aug 16 2023):\n\nI'm considering continue update as a Client Side SPA or Rewrite this app with Server Components.  \nBut Server Components doen't meant obsolete Client Side SPA, both archtecture is great option depends on application type,\ndev team type, each dev's skillset type.\n\nMight be keep update both archtecture TODO is ideal vision for me unless there are planty rest time.  \nAnyway, I thnik was [TODO MVC](https://todomvc.com/) outdated for current JS frameworks.  \nI want to renew this project about this winter.\n\n---\n\n# React TypeScript TodoMVC 2022\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/877a9a48-c7e1-498c-b56b-81fa8f4d4d8a/deploy-status)](https://app.netlify.com/sites/react-typescript-todomvc/deploys)\n[![Build](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/build.yml/badge.svg)](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/build.yml)\n[![Cypress E2E](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/e2e.yml/badge.svg)](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/e2e.yml)\n[![Lint](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/lint.yml/badge.svg)](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/lint.yml)\n[![Test](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/test.yml/badge.svg)](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/test.yml)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![Typecheck](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/typecheck.yml/badge.svg)](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/typecheck.yml)\n[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors)\n[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/laststance/react-typescript-todomvc-2022)\n\n\u003ca href=\"https://react-typescript-todomvc.netlify.app/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/laststance/react-typescript-todomvc-2022/master/images/cypress_open.gif\" alt=\"gif\"\u003e\u003c/a\u003e\n\n## A Modern Code Style Todo Example 📝\n\nThis project was started with the goal of continue to publish TodoMVC Apps in the latest [React](https://reactjs.org/) writing style.\n\nWhen you found [React.js](https://reactjs.org/) on [TodoMVC](https://todomvc.com/) top page, you might seen classic style `React.createClass()` based source at first.  \nI don't complain about it because the old-style codebase React app works all over the world and helps peopleAlmost cases, there is no value that spending time for rerwite new syntax sugar of huge codebase.\n\nThis project aims to assist new React learners and those who have not written React for a long time by providing a handy resource for learning the latest React.js.\nI'm glad to even the repo could be useful for your learning. 🤗\n\n[![Edit react-typescript-todomvc-2022](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/quizzical-blackwell-bvfc5?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n---\n\n## Getting Started\n\n- The app assumes that you have installed `Node.js` newer than [v18.16.1 LTS](https://nodejs.org/en/).\n  If you don't have it yet, follow the official [Node.js Doc](https://nodejs.org/en/) to install it.\n\n```bash\nnpx degit laststance/react-typescript-todomvc-2022 react-typescript-todomvc-2022\n```\n\n```bash\ncd react-typescript-todomvc-2022\n```\n\n```bash\nnpm -g pnpm\n```\n\n```bash\npnpm i\n```\n\n```bash\npnpm start\n```\n\nafter that auto launch todo app on your default browser and code edit ready.\n\n---\n\n## Stack\n\n- [TODO-CSS-Template](https://github.com/Klerith/TODO-CSS-Template) (Borrowing HTML \u0026 CSS Thanks! 👍 )\n- [Vite](https://vitejs.dev/)\n- [TypeScript](https://www.typescriptlang.org/) [v4.2.4](https://github.com/microsoft/TypeScript/releases/tag/v4.2.4)\n- [React Router](https://reactrouter.com/)\n- [Styled-Components](https://styled-components.com/): CSS-in-JS\n- [Recoil](https://recoiljs.org/): A state management library for React\n- [Cypress](https://www.cypress.io/): E2E Testing\n- [react-testing-library](https://github.com/testing-library/react-testing-library)\n- [ESLint](https://eslint.org/)\n  - [eslint-config-typescript-react-pro 🌈](https://github.com/laststance/eslint-config-typescript-react-pro)\n- [Netlify](https://www.netlify.com/): Deploy \u0026 Hosting\n- [Github Actions](https://github.com/features/actions): Automation run tests, lint, typecheck, build\n- [Depfu](https://depfu.com/github/ryota-murakami/react-typescript-todomvc-2022?project_id=9618): Keep latest npm packages automaticaly\n\n## Command\n\nYou can do exact same command with npm, or [install yarn](https://classic.yarnpkg.com/en/docs/install#mac-stable) easily if you have interest.\n\n### `yarn` or `yarn install`\n\nInstall all Node Package Modules that depending this project.\n\n### `yarn start`\n\nAfter that you'll seen the console which are server processes messages.  \nLet's follow the message and put in URL `http://localhost:3000/` your browsers adressbar,  \nand then you'll got todo app as same as Demo. let's modify under the `src/` code feel free!!\n\n### `yarn build`\n\nProduction build that bundled optimization stuff in `build` directory.\n\n### `yarn serve`\n\nRun production build that generated by `yarn build`.\n\n### `yarn lint`\n\n[ESLint](https://eslint.org/) is at the top.\nAnd setup [TypeScript ESLint](https://github.com/typescript-eslint/typescript-eslint), integrating [Prettier](https://prettier.io/) as a [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier).  \nHere is [final config list](https://github.com/laststance/eslint-config-typescript-react-pro#explicit-all-rule-set-).\n\n### `yarn lint:fix`\n\nRun wtih eslint --fix option.  \nActually frequently use for perform [Prettier](https://prettier.io/) formatting.\n\n### `yarn typecheck`\n\nCheck TypeScript error whole porject.\n\n### `yarn test`\n\nRun [Jest](https://jestjs.io/).  \nUsing [react-testing-library](https://github.com/testing-library/react-testing-library) for component integration testing.\n\n### `yarn clean`\n\nDelete `node_modules/*`, `yarn.lock`, `build/*` once.\n\n### `yarn prettier`\n\nRun prettier formatting holeproject without all JS/TS files.\n\n### `yarn cypress:open`\n\n[Cypress](https://www.cypress.io/) is all-in-one E2E Testing tool which can deal testing on real browser.  \nThis command using [Electron](https://www.electronjs.org/) by Cypress default.\n\n`yarn cypress:open` require `yarn start` before.\n\n```bash\nyarn start # Launch DevServer\nyarn cypress:open\n```\n\n![cypress_open](images/cypress_open.gif)\n\n### `yarn cypress:run`\n\nRun Cypress with [Electron](https://www.electronjs.org/).  \nThat's same as run all test on cypress GUI after run `yarn cypress:open`.\n\n```bash\nyarn start # Launch DevServer\nyarn cypress:run\n```\n\n### `yarn cypress:run:headless`\n\nRun Cypress with headless [Electron](https://www.electronjs.org/).  \nThat mean this command complete all on a terminal without GUI.\n\n```bash\nyarn start # Launch DevServer\nyarn cypress:run:headless\n```\n\n## 🗒 Note\n\n**This is not a Best Practice introduction.  \nThere are tons of effective way to create solid software in JavaScript World, you have a lot of other option based on your preference for approaching where, The Repo is just a style of my favorite.**\n\n\"_How to combining TypeScript with massive Babel or JavaScript tools ecosystem?_\"\n\n**I hope this helps you know like that from what I've Published!**\n\n## Issues\n\nPlease feel free to post [New Issue](https://github.com/laststance/react-typescript-todomvc-2022/issues/new) or Pull Request 🤗\n\n## Questions\n\nPlease feel free to post [New Issue](https://github.com/laststance/react-typescript-todomvc-2022/issues/new) or reply on [Twitter](https://twitter.com/malloc007) 🐦\n\nIf you want to get more generally answers, these community are might be helpful 🍻\n\n- [Reactiflux on Discord](https://www.reactiflux.com/)\n- [Stack Overflow](https://stackoverflow.com/questions/tagged/reactjs)\n\n## LICENSE\n\nMIT\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://ryota-murakami.github.io/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/5501268?s=400\u0026u=7bf6b1580b95930980af2588ef0057f3e9ec1ff8\u0026v=4?s=100\" width=\"100px;\" alt=\"ryota-murakami\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eryota-murakami\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=ryota-murakami\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=ryota-murakami\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=ryota-murakami\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://donkeycar.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/147582?v=4?s=100\" width=\"100px;\" alt=\"Will Roscoe\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWill Roscoe\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=wroscoe\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/JunQu\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/39846309?v=4?s=100\" width=\"100px;\" alt=\"Peng Fei\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePeng Fei\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/issues?q=author%3AJunQu\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/alexpanchuk\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/26270612?v=4?s=100\" width=\"100px;\" alt=\"Alex Panchuk\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlex Panchuk\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=alexpanchuk\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/BurhanMullamitha\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/42492054?v=4?s=100\" width=\"100px;\" alt=\"Burhan Mullamitha\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBurhan Mullamitha\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=BurhanMullamitha\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/hefengxian\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4338497?v=4?s=100\" width=\"100px;\" alt=\"hefengxian\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ehefengxian\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=hefengxian\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=hefengxian\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://ethansetnik.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/664434?v=4?s=100\" width=\"100px;\" alt=\"Ethan Setnik\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEthan Setnik\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=esetnik\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/PaoloJN\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/87121008?v=4?s=100\" width=\"100px;\" alt=\"Paolo Nessim\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePaolo Nessim\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=PaoloJN\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/likui628\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/90845831?v=4?s=100\" width=\"100px;\" alt=\"Li Kui\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLi Kui\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=likui628\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://adarshgupta.live/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/73733229?v=4?s=100\" width=\"100px;\" alt=\"Adarsh Gupta\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdarsh Gupta\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/react-typescript-todomvc-2022/commits?author=adarsh-gupta101\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaststance%2Freact-typescript-todomvc-2022","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaststance%2Freact-typescript-todomvc-2022","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaststance%2Freact-typescript-todomvc-2022/lists"}