https://github.com/pagarciasima/angular-countries-app

https://github.com/pagarciasima/angular-countries-app

angular bootstrap css fontawesome html typescript

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/pagarciasima/angular-countries-app
• Owner: PagarciaSima
• Created: 2024-10-18T04:29:48.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-21T05:52:54.000Z (over 1 year ago)
• Last Synced: 2025-03-06T02:47:05.674Z (over 1 year ago)
• Topics: angular, bootstrap, css, fontawesome, html, typescript
• Language: TypeScript
• Homepage: https://countries-application-angular.netlify.app/
• Size: 329 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🌎 Aplicación de Búsqueda de Países en Angular 15.2.0

## 🌟 Características

Esta es una aplicación desarrollada en Angular que permite buscar información detallada de países a través de la API pública de [Rest Countries](https://restcountries.com/).  

Los usuarios pueden **buscar por nombre**, **buscar por capital**, **filtrar por región**, y **navegar hacia páginas individuales** con información detallada de cada país.  

Además, se ha implementado **paginación** para mejorar la navegación y **FontAwesome** para iconos interactivos.

---

### 🚀 Tecnologías utilizadas

- **Angular 15.2.0**

- **Rest Countries API** para la información de países

- **Angular Router** para la navegación SPA  

- **Lazy Loading** para optimización de recursos  

- **FontAwesome** para iconos  

- **Netlify** para el despliegue  

---

## 🖥️ Interfaces

### Búsqueda por país

![Búsqueda por país](img/porPais.png)  

Permite buscar un país específico escribiendo su nombre completo o parcial.

---

### Búsqueda por capital

![Búsqueda por capital](img/porCapital.png)  

Permite buscar países escribiendo el nombre de su capital.

---

### Búsqueda por región

![Búsqueda por región](img/porRegion.png)  

Filtra los resultados por región geográfica, como Europa, Asia, América, etc.

---

### Detalle del país

![Detalle del país](img/detalle.png)  

Muestra información detallada de un país.

---

### 🔗 Enlace a la App Desplegada

➡️ [Ver la aplicación en Netlify](https://countries-application-angular.netlify.app/)

---

### 📹 Demo en YouTube

Mira el funcionamiento de la aplicación en este video:  

[Demo en YouTube](https://www.youtube.com/watch?v=QSTm5xKzQkk)

---

## 📦 Instalación y uso

1. **Clona este repositorio**:

   ```bash

   git clone https://github.com/PagarciaSima/Angular-Countries-App

   cd Angular-Countries-App