{"id":16969334,"url":"https://github.com/webmasterdevlin/react-ts-course-2023-starter","last_synced_at":"2025-12-30T22:07:08.471Z","repository":{"id":102789231,"uuid":"597213275","full_name":"webmasterdevlin/react-ts-course-2023-starter","owner":"webmasterdevlin","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-11T07:04:55.000Z","size":425,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-11T13:24:16.754Z","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":"other","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":"LICENSE.md","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":"2023-02-03T22:04:40.000Z","updated_at":"2023-02-20T11:02:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"4ccf42f8-ef93-4b81-b6ad-ac85b6445aad","html_url":"https://github.com/webmasterdevlin/react-ts-course-2023-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webmasterdevlin/react-ts-course-2023-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterdevlin%2Freact-ts-course-2023-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterdevlin%2Freact-ts-course-2023-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterdevlin%2Freact-ts-course-2023-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterdevlin%2Freact-ts-course-2023-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webmasterdevlin","download_url":"https://codeload.github.com/webmasterdevlin/react-ts-course-2023-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterdevlin%2Freact-ts-course-2023-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265863793,"owners_count":23840888,"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":"2024-10-14T00:24:49.760Z","updated_at":"2025-12-30T22:07:08.453Z","avatar_url":"https://github.com/webmasterdevlin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Vite Tailwind CSS Starter\n\n## Steps\n\n- Vite https://vitejs.dev\n- pnpm https://pnpm.io\n- pnpm create vite@latest\n\n## Pick your UI library or UI framework\n\n- tailwindcss https://tailwindcss.com\n- https://blog.logrocket.com/setting-up-dev-environment-react-vite-tailwind/\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- pnpm add -D prettier\n- create ./src/pages/HomePage.tsx, ./src/pages/AnotherPage.tsx, etc, with the name of the page as the h1 for POC\n- pnpm add 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- Import Navigation component in App.tsx\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## Model/Schema\n\n- create ./src/models/todoType.ts or ./src/models/todoModel.ts\n- create other models if needed\n\n## Set up axios for API calls\n\n- pnpm add axios\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- create ./src/api/genericApiCalls.ts\n\n## Set up json-server and concurrently\n\n- pnpm add -D json-server concurrently\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## Create the page that will render the list of todos\n\n- create ./src/pages/WorkTodosPage.tsx\n- write the local states for the page\n- write a function to fetch the todos\n- add the fetch function to the useEffect hook\n- run the application, npm run start:fullstack, and see the network tab of DevTools if response is 200ok\n- use the map array utility to render all the todos.\n\n## Custom Hooks\n\n- create ./src/hooks/useBudget.ts\n- use the useBudget hook on the WorkTodosPage.tsx\n- create the button and presentation for the budget\n\n## Custom Hooks Test\n\n- add a test for the useBudget hook on the WorkTodosPage.test.ts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmasterdevlin%2Freact-ts-course-2023-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebmasterdevlin%2Freact-ts-course-2023-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmasterdevlin%2Freact-ts-course-2023-starter/lists"}