Nation Navigator: prueba técnica. 🇪🇸

Esta es una prueba técnica que realicé para practicar con la biblioteca React js. Esta prueba técnica consiste en renderizar/pintar la respuesta de la API: https://restcountries.eu/. Esta API devuelve un listado de paises con diversos datos de cada uno de ellos.

Requisitos mínimos:

• Mostrar el listado de todos los paises al arrancar la página.
• Al hacer click en un país, deberían mostrarse los detalles de ese país.
• La aplicación debe permitir una búsqueda por nombre.
• Se debe desplegar/publicar el proyecto en GitHub Pages.

Extras:

• Permitir el filtrado por regiones.
• Permitir el filtrado por idiomas.
• En los detalles de cada país, mostrar la localización del país en un mapa.
• Guardar paises en una lista de favoritos, usando local storage o un servidor para almacenarlos.
• Mostrar un icono de corazón o similar, para indicar que un país es favorito.
• Añadir un área para los paises marcados como favoritos.

Otras mejoras:

• Uso de HTML semántico.
• Buenas practicas.
• Web responsive.
• Uso de diferentes ramas y GitHub Projects.
• Uso de preprocesador tipo Sass, Less o cualquier otro con el que te sientas cómod@.
• Cuidar el diseño.

Tech Stack:

• Plantilla de react.js con TypeScript
• JavaScript
• Sass
• Media queries
• Local storage

Visualización del proyecto:

Este proyecto está desplegado en GitHub Pages, puedes ver el resultado haciendo click en este enlace: https://storrecu.github.io/NationNavigator/ También encontrarás este enlace en la esquina superior derecha, en la sección "About".

Próximas mejoras:

1. Arreglar Tooltip para visualizar el nombre completo del país al poner el ratón encima del nombre del país.
2. La sección de favoritos está en la parte superior de la página y justo debajo el listado de paises. Si refrescas la página, se mantienen los paises que se hayan añadido a favoritos, pero el icono de favorito en el listado de paises se pierde. La idea es, que si el país está en la lista de favoritos, el icono de dicho país quede siempre marcado aunque refresques la página.
3. Mostrar más detalles de cada país y dar estilo a la sección, por ahora, sólo muestra la ubicación del país en un mapa.
4. Añadir el tipado de TypeScript

Pasos para arrancar el proyecto.

1. Ubica el botón azul con el texto: <> Code y copia la URL que aparece en HTTPS.
2. Abre la terminal en tu equipo y decide en que carpeta guardarás el proyecto. Una vez te hayas ubicado, ejecuta el comando: git clone seguido de la URL que has copiado anteriormente.
3. Abre el proyecto en Visual Studio Code y abre la terminal.
4. Ejecuta npm install
5. A continuación ejecuta npm start . Se abrirá el proyecto en una ventana de tu navegador para ver el proyecto.

Contribución.

Estoy abierta a cualquier mejora, sugerencia o feedback que quieras comunicarme. No tengas reparos en comunicarte conmigo mediante correo o linkedIn:

---

Nation Navigator: Technical Test. 🇬🇧

This is a technical test I performed to practice with the React.js library. This technical test consists of rendering/painting the response from the API: https://restcountries.eu/. This API returns a list of countries with various data for each of them.

Minimum Requirements:

• Display the list of all countries when the page loads.
• When clicking on a country, the details of that country should be displayed.
• The application should allow searching by name.
• The project must be deployed/published on GitHub Pages.

Extras:

• Allow filtering by regions.
• Allow filtering by languages.
• In the details of each country, show the location of the country on a map.
• Save countries in a favorites list, using local storage or a server to store them.
• Show a heart icon or similar to indicate that a country is a favorite.
• Add an area for countries marked as favorites.

Other Improvements:

• Use of semantic HTML.
• Best practices.
• Web responsive.
• Use of different branches and GitHub Projects.
• Use of preprocessor like Sass, Less, or any other you feel comfortable with.
• Careful design.

Tech Stack:

• React.js template with TypeScript
• JavaScript
• Sass
• Media queries
• Local storage

Project Visualization:

This project is deployed on GitHub Pages, you can see the result by clicking on this link: https://storrecu.github.io/NationNavigator/ You will also find this link in the top right corner, under the "About" section.

Next Improvements:

1. Fix Tooltip to display the full name of the country when hovering over the country name.
2. The favorites section is at the top of the page and just below the list of countries. If you refresh the page, the countries that have been added to favorites are retained, but the favorite icon in the list of countries is lost. The idea is that if the country is in the favorites list, the icon of that country should always be marked even if you refresh the page.
3. Show more details of each country and style the section, for now, it only shows the location of the country on a map.
4. Add TypeScript typing"

Steps to start the project.

1. Locate the blue button with the text: <> Code and copy the URL that appears in HTTPS.
2. Open the terminal on your computer and decide in which folder you will save the project. Once located, execute the command: git clone followed by the URL you copied earlier.
3. Open the project in Visual Studio Code and open the terminal.
4. Run npm install
5. Next, run npm start . The project will open in a window of your browser to view the project.

Contribution.

I am open to any improvement, suggestion, or feedback you want to communicate to me. Feel free to contact me via email or LinkedIn: