{"id":28789663,"url":"https://github.com/lemoncode/react-excercise-hooks","last_synced_at":"2025-06-25T22:05:29.432Z","repository":{"id":81411388,"uuid":"177652560","full_name":"Lemoncode/react-excercise-hooks","owner":"Lemoncode","description":"Simple react excercise with hooks to get your hands wet on code","archived":false,"fork":false,"pushed_at":"2019-03-27T18:39:25.000Z","size":10,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-17T22:11:46.451Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Lemoncode.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,"zenodo":null}},"created_at":"2019-03-25T19:39:01.000Z","updated_at":"2019-04-15T04:56:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"899d5a9f-9c4a-4272-9e57-fd908e011372","html_url":"https://github.com/Lemoncode/react-excercise-hooks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Lemoncode/react-excercise-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-excercise-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-excercise-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-excercise-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-excercise-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lemoncode","download_url":"https://codeload.github.com/Lemoncode/react-excercise-hooks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-excercise-hooks/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260635773,"owners_count":23039760,"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":[],"created_at":"2025-06-17T22:11:21.672Z","updated_at":"2025-06-25T22:05:29.420Z","avatar_url":"https://github.com/Lemoncode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Intro\n\nThe goal of this sample to is get started with react.\n\nWe will get as starting point an application that displays a list of github members that\nbelongs to an organization (in the starting excercise is hardcoded to _lemoncode_), and \nwe will add an input element to let the user choose another organization to query.\n\n# Excercise\n\n- Start with the stating implementation that is located under the folder *00_start*.\n\n- Let's install the needed dependencies.\n\n```bash\nnpm install\n```\n\n- And start the application to check that everything is working as expected.\n\n```bash\nnpm start\n```\n\n- If we check the current implementation we are getting a list of members belonging to lemoncode\norganization, that's nice but we would like to let the user to be able to type the name of the \norgnization he wants, hit ok and display the list of members for that organization.\n\n- Hints:\n\n  - Create a new entry on the state with the current organization name (_lemoncode_ by default).\n  - Create an input to hold the organization member name.\n  - Tie up on change to the organization state change.\n  - Retrieve the name of the organization from the state before running the query.\n\n# Optional items\n\nIf you want to play more with React here you have some proposals to enhance this excercise:\n\n- Add material ui support, display data in cards or a table.\n- Add paging (you will need to update UI, plus client rest api).\n- Click on a given member and navigate to a details page where you can read the details of that member (you will need to find out the github api endpoint to retrieve that info).\n\n# About Basefactor + Lemoncode\n\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\n\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\n\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\n\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemoncode%2Freact-excercise-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemoncode%2Freact-excercise-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemoncode%2Freact-excercise-hooks/lists"}