solución desafío

README.md

@@ -1,85 +1,21 @@
-# Desafío Front End
+# DESAFÍO FRONT END
+<img src="./img/githubSearch.jpg">
 
-## Propuesta
+## 1 - Deploy del proyecto
+Si quieres mirar la demo del proyecto, haz [click aquí](https://githubsearch-recruiting.web.app/)
 
-Implemente una aplicación cliente, visualice la API de GitHub y vea los repositorios de un usuario específico.
+## 2 - Interacciones
+Para interactuar con la app, será necesario escribir el *nombre de usuario* de gitHub en el buscador principal. Si el usuario existe, la app arrojará datos personales de interes como la foto de perfil, nombre, nombre de usuario, email, entre otros, además de la información de todos sus repositorios ordenados decrecientemente por el número de estrellas. En su defecto si el nombre de usuario ingresado no exite, la página arrojará un mensaje de error.
+Cabe destacar que esta aplicación web es totalmente **RESPONSIVA**, pudiendo ser utilizada en dispositivos **Web**, **tablet** y **smartphone**.
 
-Esta aplicación debe funcionar en los navegadores más recientes del mercado.
+## 3- Tecnologías utilizadas
+Para este proyecto se realizo con **React (Hooks)** y **Sass** como procesador css.
 
-### API
-
-https://developer.github.com/v3/
-
-Puntos de Detalles de un usuario:
-
-https://api.github.com/users/{username}
-
-Repositorios de un usuario:
-
-https://api.github.com/users/{username}/repos
-
-### Disposición
-
-Home
-<img src="./img/home.png">
-
-Details
-<img src="./img/details.png">
-
-Not Found
-<img src="./img/notfound.png">
-
-### Navegación
-
-Al buscar un usuario por el login de búsqueda de github, acceda a la página de resultados de la búsqueda con los detalles del usuario, de lo contrario, mostrará la página de Not Found (Layout NotFound).
-
-### Requisitos
+## 4 - Requisitos del proyecto
 
 - Yo, como usuario, quiero buscar un usuario de GitHub;
 - Yo, como usuario, deseo ver los detalles de aquel usuario que fue buscado (número de seguidores, imagen del avatar, e-mail y bio);
 - Yo, como usuario, en la pantalla de detalhes puedo hacer una nueva busca;
 - Yo, como usuario, deseo ver la lista de repositorios de aquel usuario que fue buscado, ordenada por el número decreciente de estrellas;
 - Yo, como usuario, en la pantalla de detalhes puedo hacer click en nombre de repositorio e ir para pantalla del repositorio en github;
 - Yo, como usuario, en la pantalla de detalhes puedo hacer click en nombre usuariio y imagem del perfil, y ir para pantalla de perfil en github;
-
-**Definición de listo**
-
-El proyecto debe ser implementado de acuerdo con las especificaciones de Zeplin, no es obligatorio usar una estructura, pero recomendamos el React.js, Angular, Vue, o algún FW más actual. El uso de rutas es obligatorio (Ex: / users / {username} / repos).
-
-### Criterios de evaluación
-
-Buscamos personas que buscan siempre aprender cosas nuevas y estar actualizadas con el Mercado, disfrutar de buenas prácticas y calidad.
-
-- Organización del proyecto: La estructura del proyecto, documentación y uso del control de versión;
-- Innovación tecnológica: el uso de nuevas tecnologías, siempre que sean estables;
-- Consistencia: Si se cumplen los requisitos;
-- Buenas prácticas: Si el proyecto sigue buenas prácticas de desarrollo, incluyendo seguridad, optimización, código limpio y reutilizable, etc;
-- Control de Calidad: Si el proyecto tiene calidad asegurada por pruebas unitarias (por ejemplo, Jasmine, Mocha, Chai, Jest, etc).
-- No utilice Frameworks CSS (Boostrap, Material Angular, etc). Queremos entender cuál es su conocimiento con CSS.
-- El uso de preprocesador es muy bienvenido (Sass, Less) y ganará puntos.
-- El layout propuesto es bastante simple, pero tiene puntos que pueden ser reutilizados, reflexione sobre lo que se puede crear como componente. Analice bien el diseño y lo que se repite. Monte su biblioteca de componentes. Sugerencia, un término muy utilizado es webcomponent.
-- Documentación del proyecto, en el README.md debe ser creado y explicadar como se puede levantar la aplicacion en ambiente local, ejecutar pruebas unitarias, etc.
-- Git, el control de versión se analizará también, por lo que los commits, descripciones que se hizo en aquel commit también contará en el análisis.
-- Nomenclatura, el idioma para el código base debe estar en inglés y el idioma dirigido para el usuario en Español.
-- Requerimiento obligatorio: la página de busqueda debe pertenecer a un modulo diferente de la página de detalle.
-- El layout que esta en Zeplin se comparte cuando nuestro Recursos Humanos entran en contacto, y el css que es generado por él no debe ser utilizado. El foco es crear algo de cero y pensando en los webcomponentes reutilizables.
-
-Cada ítem arriba será evaluado y contará puntos en la evaluación final, por lo tanto aplique todo su conocimiento.
-
-### Entrega
-
-Siga los siguientes pasos para implementar y enviar este desafío:
-- Haga un **Fork** a este repositorio. Puedes mirar esta guía para mayores informaciones: [Como hacer fork de un repositorio](https://help.github.com/en/articles/fork-a-repo).
-- Implemente el desafío.
-- Después de completar el desafío, realice un **Pull Request** a este repositorio, utilizando la interface de **Github**. [Creando un Pull Request](https://help.github.com/en/articles/creating-a-pull-request-from-a-fork).
-- Si es posible, deja tu repositorio publico para hacer la revisión de código más sencilla.
-
-Ademas de eso, la aplicación debe alojarse (Heroku, Netlify, Firebase, Plunker, etc.) y cumplir con los requerimientos. Las direcciones URL deben ser agregadas a el README del proyecto.
-
-### Plazo
-
-El tiempo de entrega de 7 días.
-
-Si el equipo de Recursos Humanos no te ha contactado, escribe a [email protected]
-
-¡Buena suerte!

github-search/.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,19 @@
+asset-manifest.json,1602940099081,7f0287341dec2d810ab497208487d1a9aa878467a07523f275c2f0ef9c27592e
+favicon.ico,499162500000,d96ddbc4933b04e12c738ab39f469573143949ca2c39eda0a49d16f83d40c319
+index.html,1602940099081,1befb5ea4f35fcc0eb6c0c71d9eaee60a89d72ecb94b1693c6889bfc8f8398d7
+gs.png,1602902645669,da8202a0bac4daf4c43d40d0613938eba3a7f5e6e698e4f849429842189304cf
+logo192.png,499162500000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
+manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
+precache-manifest.d42fe70e498b437bd769f82899264311.js,1602940099081,695c0cfeb82c6c511e8e1b374f272b402585a027b51d2366acbc9a0853da6888
+robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+service-worker.js,1602940099081,4c876f4e960803f6006c50cd3300e95743a07c565bd7afadb51649b5d9a3f840
+logo512.png,499162500000,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
+static/css/main.6d83a844.chunk.css,1602940099087,5146406d77fdbd7b8c251d9ea4919395f8537a41e6e3ccfa1e6801ffea85af2e
+static/js/2.9af680b2.chunk.js.LICENSE.txt,1602940099089,3b7ae6edd2c57fecc5e714e92b09a13d559848025e3e2c74f5c2bcacdad6bd00
+static/css/main.6d83a844.chunk.css.map,1602940099089,31debd22895dc07ed08095c9ba22fc136b05f13733bd54527afd68ad3de1b425
+static/js/main.49dc3dfc.chunk.js,1602940099089,e6007a6a4df4467d9fd4643e50aeac8304f2c322ef9759eaacd2955b5cf05985
+static/js/runtime-main.0fe5df00.js,1602940099085,8ce4a6fbd9b1b675dda089e68d01b2e5b81d038deefa585fdbb61a054d9f7e1b
+static/js/runtime-main.0fe5df00.js.map,1602940099089,3e603e7e6549115038a186e89f5e9f44c3ad238ffbd553908330b49e978bbfa2
+static/js/main.49dc3dfc.chunk.js.map,1602940099089,34ed48adc55dba1ab3620a1dff0a1e7e4afd13166493db49fe2433ae9d1ca6f2
+static/js/2.9af680b2.chunk.js,1602940099089,d28481f9d19bba201e0fb931a3c47fa787065435ec5f145cff03edbde40d35ed
+static/js/2.9af680b2.chunk.js.map,1602940099090,2d6ff86e8ef8f13e261f62abafaac7ea4cf1b7588f2b30553050a60698c97954

github-search/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "githubsearch-recruiting"
+  }
+}

github-search/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

github-search/README.md

@@ -0,0 +1,85 @@
+# Desafío Front End
+
+## Propuesta
+
+Implemente una aplicación cliente, visualice la API de GitHub y vea los repositorios de un usuario específico.
+
+Esta aplicación debe funcionar en los navegadores más recientes del mercado.
+
+### API
+
+https://developer.github.com/v3/
+
+Puntos de Detalles de un usuario:
+
+https://api.github.com/users/{username}
+
+Repositorios de un usuario:
+
+https://api.github.com/users/{username}/repos
+
+### Disposición
+
+Home
+<img src="../img/home.png">
+
+Details
+<img src="../img/details.png">
+
+Not Found
+<img src="../img/notfound.png">
+
+### Navegación
+
+Al buscar un usuario por el login de búsqueda de github, acceda a la página de resultados de la búsqueda con los detalles del usuario, de lo contrario, mostrará la página de Not Found (Layout NotFound).
+
+### Requisitos
+
+- Yo, como usuario, quiero buscar un usuario de GitHub;
+- Yo, como usuario, deseo ver los detalles de aquel usuario que fue buscado (número de seguidores, imagen del avatar, e-mail y bio);
+- Yo, como usuario, en la pantalla de detalhes puedo hacer una nueva busca;
+- Yo, como usuario, deseo ver la lista de repositorios de aquel usuario que fue buscado, ordenada por el número decreciente de estrellas;
+- Yo, como usuario, en la pantalla de detalhes puedo hacer click en nombre de repositorio e ir para pantalla del repositorio en github;
+- Yo, como usuario, en la pantalla de detalhes puedo hacer click en nombre usuariio y imagem del perfil, y ir para pantalla de perfil en github;
+
+**Definición de listo**
+
+El proyecto debe ser implementado de acuerdo con las especificaciones de Zeplin, no es obligatorio usar una estructura, pero recomendamos el React.js, Angular, Vue, o algún FW más actual. El uso de rutas es obligatorio (Ex: / users / {username} / repos).
+
+### Criterios de evaluación
+
+Buscamos personas que buscan siempre aprender cosas nuevas y estar actualizadas con el Mercado, disfrutar de buenas prácticas y calidad.
+
+- Organización del proyecto: La estructura del proyecto, documentación y uso del control de versión;
+- Innovación tecnológica: el uso de nuevas tecnologías, siempre que sean estables;
+- Consistencia: Si se cumplen los requisitos;
+- Buenas prácticas: Si el proyecto sigue buenas prácticas de desarrollo, incluyendo seguridad, optimización, código limpio y reutilizable, etc;
+- Control de Calidad: Si el proyecto tiene calidad asegurada por pruebas unitarias (por ejemplo, Jasmine, Mocha, Chai, Jest, etc).
+- No utilice Frameworks CSS (Boostrap, Material Angular, etc). Queremos entender cuál es su conocimiento con CSS.
+- El uso de preprocesador es muy bienvenido (Sass, Less) y ganará puntos.
+- El layout propuesto es bastante simple, pero tiene puntos que pueden ser reutilizados, reflexione sobre lo que se puede crear como componente. Analice bien el diseño y lo que se repite. Monte su biblioteca de componentes. Sugerencia, un término muy utilizado es webcomponent.
+- Documentación del proyecto, en el README.md debe ser creado y explicadar como se puede levantar la aplicacion en ambiente local, ejecutar pruebas unitarias, etc.
+- Git, el control de versión se analizará también, por lo que los commits, descripciones que se hizo en aquel commit también contará en el análisis.
+- Nomenclatura, el idioma para el código base debe estar en inglés y el idioma dirigido para el usuario en Español.
+- Requerimiento obligatorio: la página de busqueda debe pertenecer a un modulo diferente de la página de detalle.
+- El layout que esta en Zeplin se comparte cuando nuestro Recursos Humanos entran en contacto, y el css que es generado por él no debe ser utilizado. El foco es crear algo de cero y pensando en los webcomponentes reutilizables.
+
+Cada ítem arriba será evaluado y contará puntos en la evaluación final, por lo tanto aplique todo su conocimiento.
+
+### Entrega
+
+Siga los siguientes pasos para implementar y enviar este desafío:
+- Haga un **Fork** a este repositorio. Puedes mirar esta guía para mayores informaciones: [Como hacer fork de un repositorio](https://help.github.com/en/articles/fork-a-repo).
+- Implemente el desafío.
+- Después de completar el desafío, realice un **Pull Request** a este repositorio, utilizando la interface de **Github**. [Creando un Pull Request](https://help.github.com/en/articles/creating-a-pull-request-from-a-fork).
+- Si es posible, deja tu repositorio publico para hacer la revisión de código más sencilla.
+
+Ademas de eso, la aplicación debe alojarse (Heroku, Netlify, Firebase, Plunker, etc.) y cumplir con los requerimientos. Las direcciones URL deben ser agregadas a el README del proyecto.
+
+### Plazo
+
+El tiempo de entrega de 7 días.
+
+Si el equipo de Recursos Humanos no te ha contactado, escribe a [email protected]
+
+¡Buena suerte!

github-search/firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}