{"id":21403958,"url":"https://github.com/betofrega/poker-hands","last_synced_at":"2025-07-13T22:32:28.278Z","repository":{"id":262717174,"uuid":"887868467","full_name":"BetoFrega/poker-hands","owner":"BetoFrega","description":"Poker Hands is a web application that can take as input two five-card poker hands, evaluate which of the two is the higher hand, and return that highest hand as output.","archived":false,"fork":false,"pushed_at":"2024-11-21T16:52:02.000Z","size":1860,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-21T17:40:35.859Z","etag":null,"topics":["css-modules","nextjs","poker-hands","reactjs"],"latest_commit_sha":null,"homepage":"https://poker.frega.dev","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/BetoFrega.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":"2024-11-13T12:28:31.000Z","updated_at":"2024-11-21T16:50:44.000Z","dependencies_parsed_at":"2024-11-14T00:15:20.456Z","dependency_job_id":null,"html_url":"https://github.com/BetoFrega/poker-hands","commit_stats":null,"previous_names":["betofrega/poker-hands"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetoFrega%2Fpoker-hands","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetoFrega%2Fpoker-hands/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetoFrega%2Fpoker-hands/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetoFrega%2Fpoker-hands/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BetoFrega","download_url":"https://codeload.github.com/BetoFrega/poker-hands/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225925619,"owners_count":17546276,"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":["css-modules","nextjs","poker-hands","reactjs"],"created_at":"2024-11-22T16:11:11.609Z","updated_at":"2025-07-13T22:32:28.255Z","avatar_url":"https://github.com/BetoFrega.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Poker Hands\n\n**Poker Hands** is a web application that can take as input two five-card poker hands, evaluate which of the two is the\nhigher hand, and return that highest hand as output.\n\n## Features\n\n1. Assemble two poker hands by selecting cards from a deck.\n2. Compare the two hands and see which one is the winning hand.\n3. Ties are resolved by comparing the highest card in each hand.\n\n**Tip:** Both a light and dark version of the application are available.\nTry switching your browser's theme to see the app change!\n\n## Getting Started\n\nTo run the development server:\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) to see the result.\n\nTo run Storybook:\n\n```bash\nnpm run storybook\n```\n\nOpen [http://localhost:6006](http://localhost:6006) to see the result.\n\nA live version of the application can also be found [here](https://poker.frega.dev/).\n\n# Design decisions\n\n## Vite\n\nInitially, I chose Next.js for this project. However, it introduced unnecessary complexity and resulted in slow build\ntimes, especially when using Storybook. Given that Storybook has an excellent Vite plugin that significantly improves\nspeed, I decided to migrate the entire application to Vite. Additionally, since Next.js does not support Vite, I am\nconsidering eventually using Remix Vite.\n\n## Storybook\n\nStorybook is a great tool for developing UI components in isolation. It makes it easy to build and test components\nwithout needing to navigate the entire application. I was able to write each component in isolation and test it with\ndifferent props and states before putting everything together.\n\n## Typescript\n\nTypescript is a superset of Javascript that provides static typing. It helps catch errors at compile time and provides\nbetter tooling support (read IDE autocomplete and type checking).\n\nIn my honest opinion it also makes the codebase much more readable and maintainable.\n\n## Central State Store with `useSyncExternalStore`\n\nAt first, I started developing the app with only component states, but when it got to the point ov having to manage both\nhands picking from the same deck, I knew I'd need a better approach to state management. I had a few options, like\n`useReduce` + Context Providers, Redux and a bunch of other open-source alternatives. But I didn't want to unnecessarily\nadd a package to such a simple project and, to be honest, I was curious to use `useSyncExternalStore` as I'd never used\nit in a project that was not a tiny POC.\n\nTurns out it was a great choice. It's a simple and effective way to manage state in a way that is easy to test and\nunderstand.\n\nHaving a central store made it easy to share the state between components and keep the logic in one place. It also made\nit easier to test the application, as I could test the store in isolation.\n\n## CSS Modules\n\nI used CSS Modules to scope the styles to the component level. This way, I can avoid class name conflicts and make sure\nthat the styles don't leak out of the component. It comes out of the box with Next and is a great way to write CSS in JS\nin a more CSS-like way.\n\n## TDD, Jest and React Testing Library\n\nI used Jest and React Testing Library to write unit tests for the components. I like React Testing Library because it\nencourages writing tests that resemble how the component is used by the end-user. It also makes it easy to test the\ncomponent in isolation.\n\nTest coverage is still not 100%, but I tried to cover the most important parts of the application.\n\n## Eslint and Prettier\n\nI used Eslint and Prettier to enforce a consistent code style across the project. Eslint catches common errors and\nenforces best practices, while Prettier formats the code automatically.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetofrega%2Fpoker-hands","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbetofrega%2Fpoker-hands","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetofrega%2Fpoker-hands/lists"}