{"id":21434802,"url":"https://github.com/zivl/react-new-features-workshop","last_synced_at":"2025-08-10T14:05:57.346Z","repository":{"id":70422029,"uuid":"223128139","full_name":"zivl/react-new-features-workshop","owner":"zivl","description":"React version 16 features","archived":false,"fork":false,"pushed_at":"2023-04-12T09:40:46.000Z","size":237,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T23:12:27.427Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/zivl.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":"2019-11-21T08:43:37.000Z","updated_at":"2023-04-12T09:40:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"85ee3fe3-634c-43c5-a994-0e601e432d9b","html_url":"https://github.com/zivl/react-new-features-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zivl/react-new-features-workshop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zivl%2Freact-new-features-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zivl%2Freact-new-features-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zivl%2Freact-new-features-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zivl%2Freact-new-features-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zivl","download_url":"https://codeload.github.com/zivl/react-new-features-workshop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zivl%2Freact-new-features-workshop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269734150,"owners_count":24466554,"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-08-10T02:00:08.965Z","response_time":71,"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-11-22T23:40:42.923Z","updated_at":"2025-08-10T14:05:57.306Z","avatar_url":"https://github.com/zivl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to React 16 New Features Workshop!\n\nThis workshop does not cover ALL new features of React, yet it will give you the refreshment you need as a react developer in case you didn't have the chance to play around and experience with the latest features.\u003cbr\u003e\n\n## Background Story\nYou are required to develop a webapp that aims to help kindergarten teachers to monitor the children's arrival and presence.\nWith the help of such system, we can avoid children being forgotten in cars, make sure all is good at the child's home, be sure for evey minute that the child is safe.\u003cbr\u003e\nThe main user interface of this app shows a list of registered children.\nFor each child there is a set of actions the teacher can make to monitor the child's status.\n\n\u003e More ideas and action to this UI are welcome in a PR/issue\n\n## Before You Start\nClone this project and run `npm install` to get started.\n\nThe project is configured to work with [Bootstrap](https://getbootstrap.com/docs/4.3/components/) UI library. Just follow the instructions on the docs to get your desired designed component.\nIn case you're not familiar with the process just add a styled [Button](https://getbootstrap.com/docs/4.3/components/buttons/#examples) to the page to play around with it e.g. `\u003cbutton type=\"button\" class=\"btn btn-warning\"\u003eWarning\u003c/button\u003e` \u003cbr\u003e\nYes - Its that simple!\u003cbr\u003e\nNote that we're not on UI/UX workshop, so we shouldn't spend too much time working on the design. So [Bootstrap](https://getbootstrap.com/docs/4.3/components/) gives us the freedom of basic styling, yet being agnostic to it.\n\n### Step 1: Error Boundaries and Reporting\nIntegrate with [Sentry](https://sentry.io) and use React's `Error Boundaries` solution to report rendering errors.\nUse [Sentry-Testkit](https://zivl.github.io/sentry-testkit/#/) to make `ErrorBoundary.test.js` work!\n\u003e Pay attention that `sentry-testkit` is already configured in the test.\n\n\n### Step 2: Context\nUse React's `Context API` to pass the following parameters as context to consuming components:\n1. Font Color Theme - create a toggle controller for the user to set their own favorite theme for text colors.\n2. TDB\n\n\n### Step 3: Hooks\nWe will use `useState` and `useEffect` hooks to implement the following functionality:\n* List of children with the following columns:\n  * \"Named Avatar\"\n  * Name\n  * Check-in Status\n  * Notify (dropdown actions):\n    * Notify parent for missing child\n    * Notify day care staff\n    * Notify general message\n  * Check-in Timestamp/Action\n    * Grouped buttons of \"check-in\" and \"sick\" actions\n* Add option to add a child to the list\n\n### Step 4: Lazy Rendering and Loading\nMake children list component load and render only after children data is loaded from server.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzivl%2Freact-new-features-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzivl%2Freact-new-features-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzivl%2Freact-new-features-workshop/lists"}