{"id":29051389,"url":"https://github.com/electricmonk/ts-react-tdd","last_synced_at":"2025-06-26T22:10:33.329Z","repository":{"id":38257847,"uuid":"457070367","full_name":"electricmonk/ts-react-tdd","owner":"electricmonk","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-03T08:00:19.000Z","size":2322,"stargazers_count":3,"open_issues_count":54,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-03T09:20:03.405Z","etag":null,"topics":["node","react","tdd","testing","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/electricmonk.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,"zenodo":null}},"created_at":"2022-02-08T19:15:23.000Z","updated_at":"2025-01-30T07:18:38.000Z","dependencies_parsed_at":"2023-11-30T21:24:20.606Z","dependency_job_id":"c354acea-7901-4318-926b-fd773c484137","html_url":"https://github.com/electricmonk/ts-react-tdd","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/electricmonk/ts-react-tdd","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electricmonk%2Fts-react-tdd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electricmonk%2Fts-react-tdd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electricmonk%2Fts-react-tdd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electricmonk%2Fts-react-tdd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electricmonk","download_url":"https://codeload.github.com/electricmonk/ts-react-tdd/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electricmonk%2Fts-react-tdd/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262150132,"owners_count":23266835,"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":["node","react","tdd","testing","typescript"],"created_at":"2025-06-26T22:10:32.529Z","updated_at":"2025-06-26T22:10:33.323Z","avatar_url":"https://github.com/electricmonk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Yet Another TypeScript Template\nThis repository aims to serve as an opinionated example for a modern day full-stack web application in TypeScript developed using Outside-In TDD.\n\n### Technological Choices\nWe aim to justify our choices for the current tech stack, as we believe that *why* is a very important question one should ask itself with regards to software one uses.\n\n#### Yarn + Yarn Workspaces\n\nYarn comes with several built-in features such as interactive upgrades, the ability to run scripts without using the `run` keyword and a plug-and-play feature for faster installation times (which we currently don't utilize).\n\nWe're using yarn workspaces in order to manage dependencies across different packages and hoist all the dependencies to the root level of the project.\n\nWe also use yarns [foreach](https://yarnpkg.com/cli/workspaces/foreach) plugin to have a streamlined script execution across all packages.\n\nBoth Yarn and NPM have proven a similar level of maturity, however a slightly more convenient ergonomics and overall developer experienced have made us choose Yarn as our current package and workspace manager.\n\n#### TypeScript\n\nChoosing typescript will provide an abundance of self-generated documentation, while maintaining dependencies between different parts of the code both for new features and refactors.\n\nUsing typescript will reduce the amount of potential runtime validations, force us to think about the structure and necessity of each part and will help us answer various questions in the realm of YAGNI.\n\nWe chose typescript over other solutions (such as ELM, ReasonML or ClojureScript) because it is a superset of javaScript: enriching the language with additional information without the need of learning a different grammar, its paradigms or its overall syntax.\n\n#### Zod\n\nSince the type system is compile-time only, we need some way to assert that the data we think we're parsing from Mongo / HTTP \nactually complies to the schema we defined. Zod is a good TypeScript-first solution for schema management.\n\n#### Fastify\n\nExpress is dated, its latest release in October 2022 (as of September 2023) and its API is not Typescript-friendly. Fastify supports Typescript out of the box, with Zod support for schema definition supported by a plugin.\n\n#### React\n\n#### Vite\nA modern opinionated bundler with out-of-the-box Typescript support. And it's REALLY fast. \n\n#### Vitest\nAlthough not without issues, Vitest has proven to be a fast and effective testing library. Its main advantage over Jest is that you have a single config file,\ninstead of managing separate Jest and Webpack configurations. It integrates very nicely with [React Testing Library](https://github.com/testing-library/react-testing-library) \nand has backwards support for Jest's testing API.\n\n#### Playwright\nA mature framework for E2E tests with an API similar to Testing Library.\n\n### Engineering Principles\n\n#### Architecture\n##### Ports and Adapters\nAll I/O operations (UI calls to backend, backend calls to DB, etc) should be abstracted behind adapters (for instance, Repository/DAO pattern for DB access).\n\n##### Dependency Injection\nAdapters should be injected into the app using constructor arguments. Each subsystem is responsible for instantiating its internal components and wiring them together. Do not use any DI framework.\n\n#### Testing\n##### E2E Testing\nHave an E2E test for each major use case, and keep the test as coarse-grained as possible while still asserting that the use case works as expected. For instance, \"a customer can add a product to cart and checkout\".\n\n##### Feature Testing\nMost features should be covered by fast, integrative tests that rely in in-memory fakes in place of the production adapters to remove slow, non-deterministic I/O operations from the equation.\n\n##### Contract Testing\nIn order to be able to trust the in-memory fakes, each fake will be tested against its respective production adapter using an integration test running against an instance of each adapter type. If the same test passes against both, they are deemed to behave the same way and thus by induction we can assume that the feature tests can be relied on.\n\n##### Bug Fixes\nBefore fixing a bug, it should be reproduced with a failing test.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectricmonk%2Fts-react-tdd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felectricmonk%2Fts-react-tdd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectricmonk%2Fts-react-tdd/lists"}