{"id":16969346,"url":"https://github.com/webmasterdevlin/react-ts-redux-course-2024","last_synced_at":"2025-04-12T00:21:09.335Z","repository":{"id":39872636,"uuid":"430052502","full_name":"webmasterdevlin/react-ts-redux-course-2024","owner":"webmasterdevlin","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-15T16:59:51.000Z","size":3534,"stargazers_count":4,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T20:05:51.653Z","etag":null,"topics":["react","redux","redux-toolkit","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/webmasterdevlin.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-20T08:45:03.000Z","updated_at":"2024-04-27T08:44:46.000Z","dependencies_parsed_at":"2025-02-20T10:36:11.469Z","dependency_job_id":"3bf6c0be-d7e5-46f9-9964-bec93b5c87a9","html_url":"https://github.com/webmasterdevlin/react-ts-redux-course-2024","commit_stats":null,"previous_names":["webmasterdevlin/react-ts-redux-course-2024"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterdevlin%2Freact-ts-redux-course-2024","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterdevlin%2Freact-ts-redux-course-2024/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterdevlin%2Freact-ts-redux-course-2024/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterdevlin%2Freact-ts-redux-course-2024/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webmasterdevlin","download_url":"https://codeload.github.com/webmasterdevlin/react-ts-redux-course-2024/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248498087,"owners_count":21114035,"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":["react","redux","redux-toolkit","typescript"],"created_at":"2024-10-14T00:24:51.727Z","updated_at":"2025-04-12T00:21:09.299Z","avatar_url":"https://github.com/webmasterdevlin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Steps\n\n```bash\nnpx create-react-app my-app --template=typescript\n```\n\n```bash\ncd my-app\n```\n\n## Pick your UI library or UI framework\n\n- tailwindcss\n- material-ui\n- antd\n- chakra ui\n- styled-components\n- emotion\n\n## Create pages and routers\n\n#### Setting up the routers is a one time setup.\n\n#### Future pages will be registered in your router.\n\n```bash\nnpm i -D prettier\n```\n\n- create ./src/pages/HomePage.tsx, ./src/pages/AnotherPage.tsx, etc, with the name of the page as the h1 for POC\n- npm i react-router react-router-dom\n- create a component, EagerRoutes.tsx, to register the pages\n- use the EagerRoutes component in the App.tsx with BrowserRouter\n- run the application and navigate to different pages using the URL field of the browser\n- create another component for routing and name it LazyRoutes.tsx\n- register the pages in the LazyRoutes\n- use the LazyRoutes component in the App.tsx with BrowserRouter\n- run the application and navigate to different pages using the URL field of the browser\n\n## Create navigation bar\n\n- create a component, NavigationBar.tsx\n- Add links/menus for different pages in the NavigationBar\n- run the application and try to navigate using the menus\n- create styling for the navigation bar\n- create a views folder, ./src/views/\n- create a layout template for the pages and put it in the ./src/views/MainLayout.tsx\n- run the application to see if it works\n\n## Set up axios for API calls\n\n- create ./src/api/axiosConfig.ts\n- this is also where interceptors will be added for header authorization if needed\n\n## Set up generic http services\n\n```bash\nnpm i axios\n```\n\n- create ./src/api/genericApiCalls.ts\n\n## Set up json-server and concurrently\n\n```bash\nnpm i -D json-server concurrently\n```\n\n- create ./src/json-server/db.json and ./src/json-server/routes.json\n- add proxy in the packages.json\n- update the scripts\n\n## Set up the hero feature for redux\n\n```bash\nnpm i @reduxjs/toolkit react-redux redux-injectors redux\n```\n\n- create a feature folder, ./src/features\n- create heroes folder inside the features\n- create heroTypes.ts for the hero type/model, action type, and state type\n- create heroAsyncActions.ts for asynchronous actions of hero feature\n- create heroSlice.ts for the hero reducer\n\n## Set up Redux Toolkit (one time only)\n\n- create ./src/store/configureStore.ts\n- create ./src/store/reducers.ts\n- all succeeding reducers will be registered in the reducers.ts\n- update the App.tsx by adding a provider for store\n\n## Hero Page\n\n- create ./src/pages/HeroesPage.tsx\n- add useDispatch and useSelector\n- dispatch the getHeroesAction inside the useHook\n- run the application, npm run start:fullstack and see the devtools if response i 200ok\n- map the heroes and render all the heroes\n- use the boolean loading state to show the loading message while fetching the data\n- add the mark button functionality for every hero\n\n## Set up React Testing Library\n\n- create ./src/test-utils/testing-library-util.tsx that will be a copy of the root component\n\n## Set up MSW for mocking API calls\n\n```bash\nnpm i -D msw\n```\n\n- the msw is a mocking library which will intercept the requests and responses in the integration tests\n- create ./src/mocks/handler/heroHandler.ts\n- create ./src/mocks/handler/index.ts\n- create ./src/mocks/server.ts\n- update the ./src/setupTests.ts\n\n## Integration tests\n\n- write integration tests, ./src/pages/tests/HeroesPage.test.ts, check if title and loading message is appearing\n- write a test if the mark message will appear after clicking the mark button\n\n## Delete hero from the UI (store)\n\n- create a function to temporary delete a hero\n- create a button to temporary delete a hero\n\n## Delete hero from the UI (store)\n\n- create a function to temporary delete a hero by updating the ./src/feature/heroes s\n- update the heroTypes.ts\n- update the heroSlice.ts\n- create a button to temporary delete a hero\n- add a test for temporary remove of hero\n\n## Delete hero from the UI (store) and from the database\n\n- create a function to permanently delete a hero by updating the ./src/feature/heroes\n- update the heroTypes.ts\n- update the heroAsyncActions.ts\n- update the heroSlice.ts\n- create a button to permanently delete a hero\n- add a test for permanent delete a hero\n\n## Add hero\n\n```bash\nnpm i formik yup\n```\n\n- create a function to add a hero by updating the ./src/feature/heroes\n- update the heroTypes.ts\n- update the heroAsyncActions.ts\n- update the heroSlice.ts\n- create the SharedInput.tsx, ShareForm.tsx, and FormSubmission.tsx in the components folder\n- create a button to add a hero\n- import the FormSubmission on the HeroesPage and past the postHeroAction\n\n## Villain Page\n\n- create ./src/pages/VillainPage.tsx\n- create features/villains/query.ts\n- update the ./src/pages/VillainPage.tsx\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmasterdevlin%2Freact-ts-redux-course-2024","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebmasterdevlin%2Freact-ts-redux-course-2024","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmasterdevlin%2Freact-ts-redux-course-2024/lists"}