{"id":17816545,"url":"https://github.com/hswolff/reacdle","last_synced_at":"2026-04-02T02:02:00.505Z","repository":{"id":49522376,"uuid":"448997454","full_name":"hswolff/reacdle","owner":"hswolff","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-07T01:40:59.000Z","size":312,"stargazers_count":16,"open_issues_count":0,"forks_count":13,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T11:51:34.599Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://hswolff.github.io/reacdle/","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/hswolff.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-17T18:01:46.000Z","updated_at":"2025-03-07T17:59:05.000Z","dependencies_parsed_at":"2022-08-31T06:21:50.914Z","dependency_job_id":null,"html_url":"https://github.com/hswolff/reacdle","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hswolff/reacdle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hswolff%2Freacdle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hswolff%2Freacdle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hswolff%2Freacdle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hswolff%2Freacdle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hswolff","download_url":"https://codeload.github.com/hswolff/reacdle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hswolff%2Freacdle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276738874,"owners_count":25696014,"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","status":"online","status_checked_at":"2025-09-24T02:00:09.776Z","response_time":97,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-10-27T16:38:26.590Z","updated_at":"2025-09-24T11:31:18.720Z","avatar_url":"https://github.com/hswolff.png","language":"TypeScript","readme":"# reacdle\n\na [wordle](https://www.powerlanguage.co.uk/wordle/) clone written in React, Tailwind, and with tests!\n\n[Watch the whole video tutorial on YouTube](https://youtu.be/t_omcJmOQ_k)\n\n# steps taken to create\n\n- make the readme\n- `yarn create vite reacdle --template react-ts .`\n- [add tailwind](https://tailwindcss.com/docs/guides/vite)\n- did some googling and seems adding Jest to Vite isn't easy\n- so let's use [vitest](https://vitest.dev/)\n- let's start by getting our core algorithm working\n  - [found a 5 letter word list to use](https://www.thefreedictionary.com/5-letter-words.htm)\n    - hehe `copy(Array.from(document.querySelectorAll('.TCont li a')).map(a =\u003e a.innerText))`\n- meh, i want to do UI first, lets switch to making the basic word guess building block\n- start making WordRow\n  - realize I need to finally learn [css grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)\n  - got initial basic design and then realized i needed to go back to making the core algorithm work\n- ok get `computeGuess()` working\n- realizied i forgot some edge cases of `computerGuess` and had to fix them\n- update props of WordRow and clean up styles somewhat\n- let's get our store working! adding zustand and getting the UI to work accordingly\n  - at this point i wanted to get letter input working...so i just kept coding and coding\n  - got the raw behavior working...but let's stop for now\n- want to add validation to game (only allow 6 guesses) but think it may be easier to do this with UI tests\n  - so go to [vitest examples](https://vitest.dev/guide/#examples) which leads to [their react-testing-library example](https://github.com/vitest-dev/vitest/tree/main/examples/react-testing-lib) and then cross test that it's [the same as react testing libraries setup guide](https://testing-library.com/docs/react-testing-library/setup)\n  - just went down a huge rabit hole getting RTL working with vitest only to find that jest-dom TypeScript support is broken\n- more tests! getting more game functionality together\n- spend way too long to get empty state of the game to have correct default height\n- get things deployable for fun and profit\n- Refactor store to save computed guesses into store so we can calculate game state more easily\n- this took far too much time than it should have\n  - i wanted to move from input box to global keyDown listener\n  - i ran into the issue where a function handler closes over a value so the `guess` `useState` value was stale and never changed\n  - it took me far too long to think about how to deconstruct the problem and make it simpler\n  - happy with the end result but man...i wish it didn't take so long\n- some minor refactoring to get isValidWord working. had to move state around\n- add the keyboard for mobile use!\n\n# other implementations\n\n- https://octokatherine.github.io/word-master/\n- https://github.com/rauchg/wordledge\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhswolff%2Freacdle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhswolff%2Freacdle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhswolff%2Freacdle/lists"}