{"id":21626479,"url":"https://github.com/qodesmith/modern-app","last_synced_at":"2026-04-14T10:32:50.771Z","repository":{"id":44947128,"uuid":"447035131","full_name":"qodesmith/modern-app","owner":"qodesmith","description":"Modern JavaScript React Application","archived":false,"fork":false,"pushed_at":"2022-02-04T18:37:15.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-01T08:04:09.369Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qodesmith.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-01-12T01:21:12.000Z","updated_at":"2022-01-17T00:21:13.000Z","dependencies_parsed_at":"2022-08-30T16:50:50.142Z","dependency_job_id":null,"html_url":"https://github.com/qodesmith/modern-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/qodesmith/modern-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fmodern-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fmodern-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fmodern-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fmodern-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qodesmith","download_url":"https://codeload.github.com/qodesmith/modern-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fmodern-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31793214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: 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-25T01:13:28.283Z","updated_at":"2026-04-14T10:32:50.749Z","avatar_url":"https://github.com/qodesmith.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modern JavaScript React Application\n\n## VSCode\n\n### Plugins\n\nWe'll use some plugins to aid in development, but we want to steer clear of global settings as much as possible. The plugins we want to install are:\n\n- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\n### Settings\n\nHere's the barebones setup we'll use for VSCode:\n\n```json\n{\n  \"workbench.colorTheme\": \"Default Dark+\",\n  \"files.insertFinalNewline\": true,\n  \"editor.tabSize\": 2,\n  \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n  \"editor.rulers\": [80],\n  \"editor.formatOnSave\": true,\n  \"prettier.arrowParens\": \"avoid\",\n  \"prettier.jsxBracketSameLine\": true,\n  \"prettier.semi\": false,\n  \"prettier.singleQuote\": true,\n  \"prettier.bracketSpacing\": false,\n  \"eslint.alwaysShowStatus\": true\n}\n```\n\n## TypeScript\n\nWe want to write modern, type-safe JavaScript. TypeScript is simply the way to go.\n\n- The TypeScript docs provide a [comprehensive list of all configuration options](https://www.typescriptlang.org/tsconfig) and what they do. These are available as a [JSON schema](https://json.schemastore.org/tsconfig) as well.\n- There is a [JSX](https://www.typescriptlang.org/docs/handbook/jsx.html) section in the docs which explains the various options of working with JSX.\n- The docs also link to a [repo of base configurations](https://github.com/tsconfig/bases/) for different target environments, marketed as _Definitely Typed for TSConfigs_. For this project, we'll simply create a TS config that has everything we need.\n- The React docs have a section on [Adding TypeScript to a Project](https://reactjs.org/docs/static-type-checking.html#adding-typescript-to-a-project) as well.\n- Webpack also has a [TypeScript guide](https://webpack.js.org/guides/typescript/).\n\n## Prettier\n\n[Prettier](https://prettier.io/) is an opinionated code formatter which we'll use to maintain consistent looking code.\n\n- Since we're going to use ESlint, we'll want the [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier#installation) package to make ESLint and Prettier play nice with eachother.\n- There is a [JSON schema](http://json.schemastore.org/prettierrc) showing all the Prettier options, as well as the [official docs](https://prettier.io/docs/en/options.html).\n\n## React\n\nOur front end library of choice!\n\n- The React docs have a section on [adding TypeScript support](https://reactjs.org/docs/static-type-checking.html#typescript).\n- For global state management, [Recoil.js](https://recoiljs.org/) is an excellent option.\n- [React Query](https://react-query.tanstack.com/) is popular as a data layer choice.\n- [React Router](https://reactrouter.com/) is a go-to solution for routing. Tanstack also offers [React Location](https://react-location.tanstack.com/), which looks promising.\n- [DefinintlyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) is a repository with _high quality_ TypeScript type definitions. They have packages for [React types](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react) and [ReactDOM types](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom).\n\n## ESlint\n\nWe want to catch bugs in our code so ESLint will help us do that. We'll leave all the formatting to Prettier.\n\n## Webpack\n\n## Setting The Project Up\n\n- Step 1: [Download and install TypeScript](https://www.typescriptlang.org/download).\n\n```bash\nnpm i -D typescript\n```\n\n- Step 2: Create [`tsconfig.js`](https://www.typescriptlang.org/tsconfig) with the following settings:\n\n```json\n{\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"node_modules\"],\n  \"compilerOptions\": {\n    \"exactOptionalPropertyTypes\": true,\n    \"strictNullChecks\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noImplicitAny\": true,\n    \"noImplicitOverride\": true,\n    \"noUncheckedIndexedAccess\": true,\n    \"strictBindCallApply\": true,\n    \"strictFunctionTypes\": true,\n    \"useUnknownInCatchVariables\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"allowJs\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true, // We'll use SWC or Babel instead of TS to compile TS =\u003e JS.\n    \"jsx\": \"react-jsx\",\n    \"target\": \"es5\",\n    \"baseUrl\": \"./src\",\n    \"lib\": [\"esnext\", \"dom\"]\n  }\n}\n```\n\n- Step 3: [Install Prettier](https://prettier.io/docs/en/install.html)\n\n```bash\nnpm i -D prettier\n```\n\n- Step 4: Create `.prettierignore` (this should generally reflect your `.gitignore`):\n\n```bash\nnode_modules\ndist\n```\n\n- Step 5: Create [`.prettierrc.json`](https://prettier.io/docs/en/options.html). We explicitly state settings even though some are the same as the defaults:\n\n```json\n{\n  \"printWidth\": 80,\n  \"tabWidth\": 2,\n  \"useTabs\": false,\n  \"semi\": false,\n  \"singleQuote\": true,\n  \"quoteProps\": \"as-needed\",\n  \"jsxSingleQuote\": false,\n  \"trailingComma\": \"es5\",\n  \"bracketSpacing\": false,\n  \"bracketSameLine\": true,\n  \"arrowParens\": \"avoid\",\n  \"requirePragma\": false,\n  \"insertPragma\": false,\n  \"proseWrap\": \"preserve\",\n  \"htmlWhitespaceSensitivity\": \"css\",\n  \"endOfLine\": \"lf\",\n  \"embeddedLanguageFormatting\": \"off\"\n}\n```\n\n- Step 6: Install React and related type packages:\n\n```bash\nnpm i -D react react-dom @types/react @types/react-dom\n```\n\n---\n\n---\n\n---\n\n## TODO's\n\n- [ ] Look into how [SWC](https://swc.rs/docs/getting-started) (an alternative to Babel) fits in to TypeScript and Webpack.\n- [ ] If using SWC, do we need to enable the [jsx](https://www.typescriptlang.org/tsconfig#jsx) option with a value of `preserve`? This leaves the JSX untouched with the expectation that something later in the build process will handle it. An alternative is a value of `react-jsx` which emit's `.js` files with the JSX changed to `_jsx` calls.\n- [ ] Add a testing solution (and section in this doc) to the project. React Testing Library? Cypress? Jest?\n- [ ] Should we include a `.vscode` folder with a config in this project?\n- [ ] Do we need to use [overrides](https://prettier.io/docs/en/configuration.html#configuration-overrides) in Prettier for test files?\n- [ ] Check out the various TypeScript [plugins](https://www.typescriptlang.org/tsconfig#plugins). In particular, [typescript-styled-plugin](https://github.com/Microsoft/typescript-styled-plugin) and [typescript-eslint-language-service](https://github.com/Quramy/typescript-eslint-language-service).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqodesmith%2Fmodern-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqodesmith%2Fmodern-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqodesmith%2Fmodern-app/lists"}