{"id":19073044,"url":"https://github.com/drakealia/react-and-typescript-examples","last_synced_at":"2026-03-01T10:31:49.753Z","repository":{"id":37598963,"uuid":"505578126","full_name":"DrakeAlia/react-and-typescript-examples","owner":"DrakeAlia","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-26T06:39:56.000Z","size":382,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-22T04:26:25.065Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/DrakeAlia.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":"2022-06-20T19:49:31.000Z","updated_at":"2022-06-20T19:49:31.000Z","dependencies_parsed_at":"2022-08-25T22:12:09.237Z","dependency_job_id":null,"html_url":"https://github.com/DrakeAlia/react-and-typescript-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DrakeAlia/react-and-typescript-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrakeAlia%2Freact-and-typescript-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrakeAlia%2Freact-and-typescript-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrakeAlia%2Freact-and-typescript-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrakeAlia%2Freact-and-typescript-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DrakeAlia","download_url":"https://codeload.github.com/DrakeAlia/react-and-typescript-examples/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrakeAlia%2Freact-and-typescript-examples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29966811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T09:33:09.965Z","status":"ssl_error","status_checked_at":"2026-03-01T09:25:48.915Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":[],"created_at":"2024-11-09T01:45:13.561Z","updated_at":"2026-03-01T10:31:49.738Z","avatar_url":"https://github.com/DrakeAlia.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React and TypeScript Projects\n\nCode examples and project starter kits for my [React and TypeScript][course].\n\n## Set Up\n\nYou probably only need to run `npm install` in each of the projects.\n\nUse `npx recursive-install` to install _all_ of the dependencies for all of the examples as well.\n\n[course]: https://stevekinney.github.io/react-and-typescript\n\n## Sandboxes\n\nCodeSandbox environments are available for every example in this workshop.\n\n- [01-nametag](https://codesandbox.io/s/name-tag-bts5l?file=/src/Application.tsx)\n- [02-nametag-with-props](https://codesandbox.io/s/name-tag-solution-slwmk?file=/src/Application.tsx)\n- [03-nametag-with-optional-props](https://codesandbox.io/s/name-tag-solution-optional-props-4c47p?file=/src/Application.tsx)\n- [04-typing-children](https://codesandbox.io/s/typescript-children-3vu37?file=/src/Application.tsx)\n- [05-typing-children-with-styling](https://codesandbox.io/s/typescript-children-completed-with-css-6bx23?file=/src/Application.tsx)\n- [06-avengers-quiz](https://codesandbox.io/embed/avengers-quiz-oxm68?file=/src/Application.tsx)\n- [07-avengers-quiz-with-use-state](https://codesandbox.io/s/avengers-quiz-use-state-z68vj?file=/src/Application.tsx)\n- [08-character-card](https://codesandbox.io/s/character-sheet-base-uxlfu?file=/src/Application.tsx)\n- [09-character-card-eventual-state](https://codesandbox.io/s/character-sheet-complete-jb8d4?file=/src/Application.tsx)\n- [10-broken-counter](https://codesandbox.io/s/broken-counter-tiu6u?file=/src/App.tsx)\n- [11-fixed-counter](https://codesandbox.io/s/fixed-counter-tct1f?file=/src/Application.tsx)\n- [12-counter-class-based](https://codesandbox.io/s/incident-counter-class-based-4h4d5file=/src/Application.tsx)\n- [13-counter-class-based-with-state](https://codesandbox.io/s/incident-counter-class-based-completed-p1fio?file=/src/Application.tsx)\n- [14-counter-for-hooks](https://codesandbox.io/s/incident-counter-5rvp3?file=/src/Application.tsx)\n- [15-counter-with-hooks-and-events](https://codesandbox.io/s/incident-counter-hooks-complete-or2pz?file=/src/Application.tsx)\n- [16-dog-facts](https://codesandbox.io/s/dog-facts-24bqt?file=/src/Application.tsx)\n- [17-dog-facts-complete](https://codesandbox.io/s/dog-facts-complete-80d61)\n- [18-pizza-calculator](https://codesandbox.io/s/pizza-calculator-redux-2cd2b?file=/src/Application.tsx)\n- [19-pizza-calculator-complete](https://codesandbox.io/s/pizza-calculator-reducer-complete-y6vjc?file=/src/Application.tsx)\n- [20-incident-counter-reducer-exercise](https://codesandbox.io/s/incident-counter-reducer-base-cgsin?file=/src/Application.tsx)\n- [21-incident-counter-reducer-solution](https://codesandbox.io/s/incident-counter-reducer-complete-yryxm?file=/src/Application.tsx)\n- [22-color-swatch-base](https://codesandbox.io/s/red-green-blue-k6frm?file=/src/Application.tsx)\n- [23-color-swatch-passing-dispatch](https://codesandbox.io/s/red-green-blue-with-dispatch-8ketd?file=/src/ColorSlider.tsx)\n- [24-color-swatch-with-theme-context](https://codesandbox.io/s/red-green-blue-with-theme-context-bzykq?file=/src/Application.tsx)\n- [25-color-swatch-with-state-context](https://codesandbox.io/s/red-green-blue-with-context-hoiiz?file=/src/Application.tsx)\n- [26-color-swatch-refactored](https://codesandbox.io/s/red-green-blue-with-better-color-adjustment-nppsf?file=/src/ColorInput.tsx)\n- [27-character-card-base-for-utility-types](https://codesandbox.io/s/character-sheet-utility-types-base-48cqu)\n- [28-character-card-with-utility-types](https://codesandbox.io/s/character-sheet-utility-types-complete-jb8d4?file=/src/Table.tsx)\n- [29-utility-types-exercise](https://codesandbox.io/s/fun-with-utility-types-2lmj2?file=/src/Application.tsx)\n- [30-utility-types-solution](https://codesandbox.io/s/fun-with-utility-types-solution-x0i28?file=/src/Application.tsx)\n- [31-color-swatch-with-template-literals](https://codesandbox.io/s/red-green-blue-with-template-literals-4yf86?file=/src/reducer.ts)\n- [32-character-card-with-hoc](https://codesandbox.io/s/character-sheet-utility-with-hoc-3opyk?file=/src/Application.tsx)\n- [33-nametag-hoc-exercise](https://codesandbox.io/s/greeting-hoc-fxqnl?file=/src/Application.tsx)\n- [34-nametag-hoc-solution](https://codesandbox.io/s/greeting-hoc-completed-v1g48?file=/src/Application.tsx)\n- [35-buttons-base](https://codesandbox.io/s/buttons-8yquq?from-embed?file=/src/Application.tsx)\n- [36-buttons-with-limited-props](https://codesandbox.io/s/buttons-complete-732fx?file=/src/Application.tsx)\n- [37-buttons-polymorphic](https://codesandbox.io/s/buttons-as-n4wnm?file=/src/Application.tsx)\n- [38-as-props-exercise](https://codesandbox.io/s/as-prop-base-qmqnc?file=/src/Application.tsx)\n- [39-as-props-solution](https://codesandbox.io/s/as-prop-complete-x4ifs?file=/src/Application.tsx)\n- [40-truncated-text](https://codesandbox.io/s/truncated-text-incomplete-hrbi5?file=/src/Application.tsx)\n- [41-truncated-text-complete](https://codesandbox.io/s/truncated-text-complete-kbl59?file=/src/Application.tsx)\n- [42-better-context-and-inputs](https://codesandbox.io/s/red-green-blue-with-better-context-xmde9?file=/src/create-context.tsx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrakealia%2Freact-and-typescript-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrakealia%2Freact-and-typescript-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrakealia%2Freact-and-typescript-examples/lists"}