{"id":24874681,"url":"https://github.com/dirheimerb/type-todo","last_synced_at":"2025-03-27T02:15:51.964Z","repository":{"id":62887244,"uuid":"477537382","full_name":"dirheimerb/type-todo","owner":"dirheimerb","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-08T03:48:46.000Z","size":14247,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T07:28:58.008Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/dirheimerb.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}},"created_at":"2022-04-04T03:31:19.000Z","updated_at":"2022-04-04T03:31:28.000Z","dependencies_parsed_at":"2023-02-08T04:45:46.195Z","dependency_job_id":null,"html_url":"https://github.com/dirheimerb/type-todo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"laststance/react-typescript-todomvc-2022","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Ftype-todo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Ftype-todo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Ftype-todo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Ftype-todo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dirheimerb","download_url":"https://codeload.github.com/dirheimerb/type-todo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245767360,"owners_count":20668826,"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":[],"created_at":"2025-02-01T07:28:10.212Z","updated_at":"2025-03-27T02:15:51.944Z","avatar_url":"https://github.com/dirheimerb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Create React App TypeScript Todo Example 2022\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/94ad28c3-2ccd-40b2-9b9f-35ab89148f43/deploy-status)](https://app.netlify.com/sites/create-react-app-typescript-todo-example/deploys)\n![CI](https://github.com/laststance/create-react-app-typescript-todo-example-2022/workflows/CI/badge.svg)\n[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)\n![check-code-coverage](https://img.shields.io/badge/code--coverage-92%25-brightgreen)\n[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)\n[![Depfu](https://badges.depfu.com/badges/b291947c58892a6d78e4f3374c4a6d01/overview.svg)](https://depfu.com/github/laststance/create-react-app-typescript-todo-example-2022?project_id=9618)\n[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/laststance/create-react-app-typescript-todo-example-2022)\n\n\u003ca href=\"https://create-react-app-typescript-todo-example.netlify.com/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/laststance/create-react-app-typescript-todo-example-2022/master/images/cypress_open.gif\" alt=\"gif\"\u003e\u003c/a\u003e\n \n\n## A Modern Code Style Todo Example 📝\n\nThis project was started with the goal of continuing to publish Todo Example Apps in the latest [React](https://reactjs.org/) writing style.  \n\nWhen [React Hooks unveiled in autumn 2018](https://reactjs.org/blog/2018/11/13/react-conf-recap.html), I was looking for todo apps that written by new style [Function Component](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and [Hooks](https://reactjs.org/docs/hooks-intro.html) to learn how to use them in real applications but I couldn't find any at that time.\n\nNot only that, many of the results were written in [ES5](https://en.wikipedia.org/wiki/ECMAScript#5th_Edition) (using React.createClass() API), which was an older JavaScript generation in autumn 2018.\nAt that time, I thought there is a demand to keep updating and publishing with a modern code style even it is simple example like Todo App.  \n\nThe project is targeting for who have completed a basic JavaScript programming course and new to React, peaople who migrating to React from another JavaScript Framework, and you have used to React in the past and want to catch up on the modern way for write back again.  \n\nI'm glad to even the repo could be useful for your learning. 🤗\n　  \n　  \n  \n[![Edit create-react-app-typescript-todo-example-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 assumed installed `Node.js` newer than `10.16.3 LTS`(recommend newer than v14.8.0).\n  If you have not it yet, follow the official [Node.js Doc](https://nodejs.org/en/) to install it.\n  \n\n```bash\nnpx degit laststance/create-react-app-typescript-todo-example-2022 create-react-app-typescript-todo-example-2022\n```\n\n```bash\ncd create-react-app-typescript-todo-example-2022\n```\n\n```bash\nyarn install\n```\n\n```bash\nyarn 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- [Create React App](https://github.com/facebook/create-react-app/releases/tag/v4.0.3) [v4.0.3](https://github.com/facebook/create-react-app/releases/tag/v4.0.3) (**Without eject**)\n- [TypeScript](https://www.typescriptlang.org/) [v4.2.4](https://github.com/microsoft/TypeScript/releases/tag/v4.2.4)\n- [ReachRouter](https://github.com/reach/router)\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-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)\n  - [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint#readme)\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/create-react-app-typescript-todo-example-2022?project_id=9618): Keep latest npm packages automaticaly\n\n## 👩‍💻 Usage\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\nOfficial Docs: https://create-react-app.dev/docs/getting-started#npm-start-or-yarn-start\n\n### `yarn build`\n\nAfter that You'll get bundled and optimization stuff in `build` directory.  \nAlso you can run production build with `serve` local webserver modules.\n\n```bash\nyarn global add serve\nserve -s build\n```\n\nOfficial Docs: https://create-react-app.dev/docs/getting-started#npm-run-build-or-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).\n\n### `yarn lint:fix`\n\nrun wtih eslint --fix option.\n\n### `yarn typecheck`\n\nWhile developing and building, Babel stop transpile with TS error messages.\nI can't find way static typecheck with babel,\nso I'm using original TypeScript via npm and specified `tsc --noEmit` compile option that doesn't generate compiled code.\n\n### `yarn test`\n\n[Jest](https://jestjs.io/) is all-in-one test-runner built in [Create React App](https://facebook.github.io/create-react-app/) and covers function-level unit testing to component-behavior-level integration testing.\nThe Repo use to [react-testing-library](https://github.com/testing-library/react-testing-library) for component integration testing.\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/create-react-app-typescript-todo-example-2022/issues/new) or Pull Request 🤗\n\n## Questions\n\nPlease feel free to post [New Issue](https://github.com/laststance/create-react-app-typescript-todo-example-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  \u003ctr\u003e\n    \u003ctd align=\"center\"\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=\"\"/\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/create-react-app-typescript-todo-example-2022/commits?author=ryota-murakami\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/laststance/create-react-app-typescript-todo-example-2022/commits?author=ryota-murakami\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/laststance/create-react-app-typescript-todo-example-2022/commits?author=ryota-murakami\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://donkeycar.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/147582?v=4?s=100\" width=\"100px;\" alt=\"\"/\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/create-react-app-typescript-todo-example-2022/commits?author=wroscoe\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/JunQu\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/39846309?v=4?s=100\" width=\"100px;\" alt=\"\"/\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/create-react-app-typescript-todo-example-2022/issues?q=author%3AJunQu\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/alexpanchuk\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/26270612?v=4?s=100\" width=\"100px;\" alt=\"\"/\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/create-react-app-typescript-todo-example-2022/commits?author=alexpanchuk\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/BurhanMullamitha\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/42492054?v=4?s=100\" width=\"100px;\" alt=\"\"/\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/create-react-app-typescript-todo-example-2022/commits?author=BurhanMullamitha\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/hefengxian\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4338497?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ehefengxian\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/laststance/create-react-app-typescript-todo-example-2022/commits?author=hefengxian\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/laststance/create-react-app-typescript-todo-example-2022/commits?author=hefengxian\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://ethansetnik.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/664434?v=4?s=100\" width=\"100px;\" alt=\"\"/\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/create-react-app-typescript-todo-example-2022/commits?author=esetnik\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\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%2Fdirheimerb%2Ftype-todo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdirheimerb%2Ftype-todo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirheimerb%2Ftype-todo/lists"}