{"id":15696705,"url":"https://github.com/segunadebayo/egghead-zagjs-course","last_synced_at":"2025-05-08T22:27:46.278Z","repository":{"id":98802077,"uuid":"595807680","full_name":"segunadebayo/egghead-zagjs-course","owner":"segunadebayo","description":"Egghead Zag.js Course","archived":false,"fork":false,"pushed_at":"2023-01-31T21:19:48.000Z","size":27,"stargazers_count":16,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-03T12:03:55.293Z","etag":null,"topics":["course","egghead","state-machine","stately","xstate","zagjs"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":false,"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/segunadebayo.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":"2023-01-31T21:10:00.000Z","updated_at":"2024-09-18T11:42:14.000Z","dependencies_parsed_at":"2023-03-07T02:30:37.914Z","dependency_job_id":null,"html_url":"https://github.com/segunadebayo/egghead-zagjs-course","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/segunadebayo%2Fegghead-zagjs-course","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/segunadebayo%2Fegghead-zagjs-course/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/segunadebayo%2Fegghead-zagjs-course/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/segunadebayo%2Fegghead-zagjs-course/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/segunadebayo","download_url":"https://codeload.github.com/segunadebayo/egghead-zagjs-course/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253156939,"owners_count":21863028,"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":["course","egghead","state-machine","stately","xstate","zagjs"],"created_at":"2024-10-03T19:09:42.736Z","updated_at":"2025-05-08T22:27:46.219Z","avatar_url":"https://github.com/segunadebayo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Egghead Zag.js Workshop\n\nWelcome to the [Egghead.io](https://egghead.io/) workshop on **Building UI Components with Statecharts**. In this course, you will:\n\n- Learn fundamental concept of state machine, event and transition\n- Model a UI component with state machine\n- Connect state machine logic to UI\n- Manage DOM events in state machines\n- Create custom React hooks with state machines\n\n## Zag.js\n\n- GitHub repo: https://github.com/chakra-ui/zag\n- Documentation: https://zagjs.com/\n\n## Getting Started\n\nTo run this code in this repo:\n\n- Clone this repo\n- You need to have `pnpm` installed. To do this, run `npm install -g pnpm`.\n- In the repo's directory, run `pnpm install`\n- Run `pnpm dev`. You should see this:\n\n```bash\nVITE v3.1.4  ready in 694 ms\n\n➜  Local:   http://localhost:5173/\n➜  Network: use --host to expose\n```\n\n- Navigate to [http://localhost:5173/](http://localhost:5173/).\n\n## Lessons\n\nLessons are separated by branches. This branch contains the first set of lesson (01-04) and subsequent lessons are in their respective branches.\n\n- [Lesson 05 - Create Logic in Zag.js](https://github.com/segunadebayo/egghead-zagjs-course/tree/05-create-logic-in-zag)\n- [Lesson 06 - Connnect Logic to UI](https://github.com/segunadebayo/egghead-zagjs-course/tree/06-connect-logic-ui)\n- [Lesson 07 - Handling Focus and Blur Events](https://github.com/segunadebayo/egghead-zagjs-course/tree/07-handling-focus-and-blur)\n- [Lesson 08 - Handling Input Event](https://github.com/segunadebayo/egghead-zagjs-course/tree/08-handling-input-event)\n- [Lesson 09 - Handling Backspace Event](https://github.com/segunadebayo/egghead-zagjs-course/tree/09-handling-backspace)\n- [Lesson 10 - Handling Paste Event](https://github.com/segunadebayo/egghead-zagjs-course/tree/10-handling-paste-event)\n- [Lesson 11 - Ensure Single Character](https://github.com/segunadebayo/egghead-zagjs-course/tree/11-ensure-single-character)\n- [Lesson 12 - Trigger Value Completion](https://github.com/segunadebayo/egghead-zagjs-course/tree/12-trigger-value-completion)\n- [Lesson 13 - Usage with Forms](https://github.com/segunadebayo/egghead-zagjs-course/tree/13-usage-within-forms)\n- [Lesson 14 - Refactor to Custom Hook](https://github.com/segunadebayo/egghead-zagjs-course/tree/14-refactor-hooks)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsegunadebayo%2Fegghead-zagjs-course","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsegunadebayo%2Fegghead-zagjs-course","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsegunadebayo%2Fegghead-zagjs-course/lists"}