{"id":13719225,"url":"https://github.com/robipop22/dnb-stack","last_synced_at":"2025-05-07T11:31:27.914Z","repository":{"id":37526073,"uuid":"491835491","full_name":"robipop22/dnb-stack","owner":"robipop22","description":"The Remix Stack for deploying to Vercel with testing, linting, formatting, structure and mock for 3rd party API integration.","archived":false,"fork":false,"pushed_at":"2025-04-06T17:15:25.000Z","size":23555,"stargazers_count":94,"open_issues_count":6,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T18:26:16.107Z","etag":null,"topics":["remix-stack","remix-stacks","vercel"],"latest_commit_sha":null,"homepage":"https://dnb-stack.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robipop22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-05-13T09:24:21.000Z","updated_at":"2025-04-06T17:15:29.000Z","dependencies_parsed_at":"2023-02-16T03:16:03.738Z","dependency_job_id":"f0e68973-f23e-4bbb-a99f-7288d744c946","html_url":"https://github.com/robipop22/dnb-stack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robipop22%2Fdnb-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robipop22%2Fdnb-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robipop22%2Fdnb-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robipop22%2Fdnb-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robipop22","download_url":"https://codeload.github.com/robipop22/dnb-stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252868824,"owners_count":21816923,"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":["remix-stack","remix-stacks","vercel"],"created_at":"2024-08-03T01:00:44.674Z","updated_at":"2025-05-07T11:31:27.894Z","avatar_url":"https://github.com/robipop22.png","language":"TypeScript","readme":"# React Router DnB Stack\n\n![The React Router DnB Stack](https://github.com/robipop22/dnb-stack/blob/main/dnb-stack-preview.png?raw=true)\n\nSee it live: https://dnb-stack.vercel.app/\n\nLearn more about [React Router Stacks](https://React Router.run/stacks).\n\n```sh\nbunx create-react-router@latest --template robipop22/dnb-stack\n```\n\n## What's in the stack\n\n- [Vercel deployment](https://vercel.com/) with Vercel CLI\n- [GitHub Actions](https://github.com/features/actions) for deploy on merge to production and staging environments (all working via branching system)\n- Proposed opinionated folder structure for the project\n- Mocked api request for the project and route example\n- Styling with [Tailwind](https://tailwindcss.com/)\n- End-to-end testing with [Cypress](https://cypress.io)\n- Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)\n- Code Formatting with [Biome](https://biomejs.dev/)\n- Code Linting with [Biome](https://biomejs.dev/)\n- Static Types with [TypeScript](https://typescriptlang.org)\n- Pre-commit hooks using [Husky](https://typicode.github.io/husky/#/)\n\nNot a fan of bits of the stack? Fork it, change it, and use `bunx create-react-router@latest`! Make it your own.\n\n## Development\n\nMake sure the dependencies are installed\n\n```sh\nbun i\n```\n\nAfterwards, start the React Router development server like so:\n\n```sh\nbun dev\n```\n\nOpen up [http://localhost:3000](http://localhost:3000) and you should be ready to go!\n\nGo to localhost:3000/books and you should see a list of books. This is a simple example of how to integrate a 3rd party API (tested, typed and mocked).\n\n### Precommit hooks\n\nWe use **Husky** to run a pre-commit hook to lint the code.\n\nThis prevents us from having to run the linters into our pipelines. It will not let you commit if you have linting errors.\n\nThe pre-commit hook will run the following commands:\n\n```sh\nbun hook\n```\n\nYou can move this step into a github action, or run it manually. But this method is faster for development as you won't have to wait for the hook to run in the pipeline.\n\n### Relevant code\n\nThis is a basic app that contains two routes, the index for documentation and the /books as a living example of how you can integrate a 3rd party API. The data is mocked and typed and also there is a both unit tests for the client function as well as a cypress test for the respective route.\n\n## Deployment\n\nThis stack has a github action for automated deploy on merge on the following branches: **qa**, **dev** or **main**.\n\nYou just need to specify and configure the subdomains of your app.\nAlso from the settings in the repository you need to add Actions secrets so that the github action can deploy your app:\n\n- VERCEL_ORG_ID\n- VERCEL_PROJECT_ID\n- VERCEL_TOKEN\n\nIf you'd like to avoid using github action deploy, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):\n\n```sh\nnpm i -g vercel\nvercel\n```\n\n## GitHub Actions\n\nWe use GitHub Actions for continuous integration and deployment. Anything that gets into the `main` branch will be deployed to production after running tests/build/etc. Anything in the `dev` branch will be deployed to staging. There is a also a `qa` branch that is used for testing.\n\n## Testing\n\n### Cypress\n\nWe use Cypress for our End-to-End tests in this project. You'll find those in the `cypress` directory. As you make changes, add to an existing file or create a new file in the `cypress/integration/e2e` directory to test your changes.\n\nWe use [`@testing-library/cypress`](https://testing-library.com/cypress) for selecting elements on the page semantically.\n\nTo run a specific test(flow) in development, run `FLOW=books bun cypress:run:flow` which will start the dev server for the app as well as the Cypress client. Make sure the app is running.\n\nBy _flow_ we want to define some user flows that we will test. For example, if we want to test the app with a user that wants to see the list of books, we can test that by running `FLOW=books bun cypress:run:flow`.\n\nThis can be later extended to run multiple flows. Followed the provided example to extend this further.\n\n### Vitest\n\nFor lower level tests of utilities and individual components, we use `vitest`. We have DOM-specific assertion helpers via [`@testing-library/jest-dom`](https://testing-library.com/jest-dom).\n\nYou can run the tests with `bun run test` or `bun run vitest:coverage` to also show the coverage.\n\n### Type Checking\n\nThis project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run `bun lint`.\n\n### Linting\n\nThis Project uses Biome for linting. That is configured in `biome.json`.\n\n### Formatting\n\nWe use [Biome](https://biomejs.dev/) for auto-formatting in this project. It's recommended to install an editor plugin (like the [VSCode Biome plugin]\n","funding_links":[],"categories":["Remix Starter","Stacks","Starter"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobipop22%2Fdnb-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobipop22%2Fdnb-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobipop22%2Fdnb-stack/lists"}