{"id":25621887,"url":"https://github.com/grovertb/react-challenge-ts","last_synced_at":"2026-06-20T22:31:04.003Z","repository":{"id":41245969,"uuid":"508825168","full_name":"grovertb/react-challenge-ts","owner":"grovertb","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-29T19:58:54.000Z","size":171,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-01T20:32:42.910Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grovertb.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-06-29T19:43:40.000Z","updated_at":"2022-06-29T19:47:46.000Z","dependencies_parsed_at":"2022-09-16T12:51:38.012Z","dependency_job_id":null,"html_url":"https://github.com/grovertb/react-challenge-ts","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grovertb%2Freact-challenge-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grovertb%2Freact-challenge-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grovertb%2Freact-challenge-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grovertb%2Freact-challenge-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grovertb","download_url":"https://codeload.github.com/grovertb/react-challenge-ts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240156671,"owners_count":19756815,"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-02-22T09:49:50.936Z","updated_at":"2026-05-28T14:30:18.191Z","avatar_url":"https://github.com/grovertb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Challenge\n\nRecommended to use:\n\n- [React Hooks](https://reactjs.org/docs/hooks-intro.html)\n- [React Router](https://reacttraining.com/react-router/web/guides/quick-start)\n- [React Redux](https://react-redux.js.org/)\n- [MUI](https://mui.com/)\n- [Styled Components](https://www.styled-components.com/)\n\n## Instrucciones\n\n- Clona el resositorio\n- Instala las dependecias utilizando `npm install` o `yarn`\n\n| WARNING: Si tienes `prettier` instalado es necesario que lo desactives, para que no tengas conflictos con eslint. |\n| --- |\n\n## Ejecutar el proyecto\n\nEn el directorio del proyecto, ejecuta:\n\n#### `npm start` o `yarn start`\n\nEjecuta la aplicación en el modo de desarrollo.\\\nAbra [http://localhost:3000](http://localhost:3000) para verlo en tu navegador.\n\n## Retos\n\n### Primer reto\n\n- Crea un nuevo componente `FirstChallenge` en `src/containers`\n- Utilizando la función `getGifts` del archivo `src/utils.js` listar los GIFTS con su respectiva cantidad de veces que se repite.\n  Note: Los regalos que tienen un `_` en su nombre no se deben contabilizar.\n  Ejemplo:\n  - `\"phone laptop _card phone _laptop\"` la función debe retornar: `{ phone: 2, laptop: 1 }`\n\n**Bonus:**\n\n- Implementa unit test para la función `getGifts`\n\n### Segundo reto\n\n- Crear un nuevo componente `SecondChallenge` in `src/containers`\n- Usa el array `USERS` del archivo `src/utils.js`, lista de usuarios mostrando su avatar, nombre, apellido y edad.\n- Implementar la funcionabilidad eliminar usuario.\n- Cree un buscador y filtre por nombre o apellido.\n- Agregar un select que permita ordenar los usuarios por edad de menor a mayor y de mayor a menor.\n\n**Bonus:**\n\n- Utiliza Material-UI or styled-components para los estilos de los componentes\n- Utiliza REDUX y crea el store de users para el manejo de los datos\n\n### Tercer reto\n\nEn `src/App.js`:\n\n- Crear las rutas [`/first`](\u003c(http://localhost:3000/first)\u003e), [`/second`](\u003c(http://localhost:3000/second)\u003e), [`/third`](\u003c(http://localhost:3000/third)\u003e) y [`/fourth`](\u003c(http://localhost:3000/fourth)\u003e) cada una con su respectivo componente.\n\n  Nota: Utilizar el archivo `FirstChallenge.js` para la ruta `/first` and `SecondChallenge.js` para la ruta `/second`\n\n- En el archivo `src/components/Header.js` crea unos botones que permitan la navegación entre las 4 rutas creadas utilizando react-router.\n\n**Bonus:**\n\n- Si accede mediante una ruta que no existe debe redireccionar a `/not-found`\n\n### Cuarto reto\n\nEn el archivo `src/containers/FourthChallenge.js`:\n\n- Se necesita evitar que se generen renders innecesarios cuando actualiza uno de los inputs.\n  Nota: Si se actualiza el input de `Name` el componente `AgeDisplay` no debería generar un render.\n\n**Bonus:**\n\n- Implementa unit test\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrovertb%2Freact-challenge-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrovertb%2Freact-challenge-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrovertb%2Freact-challenge-ts/lists"}