https://github.com/ignag-dev/pokedexapp
Aplicación diseñada para mostrar información detallada sobre Pokémons, utilizando datos de la API de PokeApi
https://github.com/ignag-dev/pokedexapp
debounce navigation pokeapi pokedex react-native tanstack-query
Last synced: 2 months ago
JSON representation
Aplicación diseñada para mostrar información detallada sobre Pokémons, utilizando datos de la API de PokeApi
- Host: GitHub
- URL: https://github.com/ignag-dev/pokedexapp
- Owner: IgnaG-Dev
- Created: 2024-12-29T11:14:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-29T11:39:14.000Z (over 1 year ago)
- Last Synced: 2025-02-22T05:26:20.036Z (over 1 year ago)
- Topics: debounce, navigation, pokeapi, pokedex, react-native, tanstack-query
- Language: TypeScript
- Homepage:
- Size: 297 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PokedexApp 📖
Esta aplicación se enfoca en conceptos avanzados como manejo de caché, búsqueda eficiente, carga perezosa de imágenes y reutilización de componentes, con el objetivo de crear una experiencia fluida y visualmente atractiva.
## Funcionalidades principales 🌟
- **Exploración de Pokémons**: Visualiza una lista completa de Pokémons con detalles relevantes como habilidades, tipos y estadísticas.
- **Búsqueda avanzada**:
- Búsqueda por **ID** y **nombre**.
- Implementación de **debounce manual** para evitar llamadas excesivas a la API.
- **Manejo de caché**: Optimización del acceso a datos almacenados localmente para reducir la dependencia de la API.
- **Carga perezosa de imágenes**: Mejora del rendimiento mediante la carga diferida de imágenes.
- **Memorización de valores**: Uso de estrategias para mejorar el rendimiento en componentes que dependen de datos complejos.
- **Múltiples `useQueries`**: Ejecución simultánea de consultas para diferentes datos en el mismo componente.
## Tecnologías utilizadas 🛠️
- **React Native**: Framework para el desarrollo de aplicaciones móviles.
- **TanStack Query**:
- `useQuery` para consultas simples.
- `useInfiniteQuery` para listas con paginación infinita.
- **TypeScript**: Tipado estático para mejorar la mantenibilidad del código.
- **React Navigation**: Manejo de navegación fluida entre pantallas.
- **Axios**: Cliente HTTP para consumir la API de PokeApi.
- **Debounce**: Técnica para optimizar las búsquedas reduciendo la frecuencia de llamadas a la API.
- **Lazy Loading**: Carga perezosa de imágenes para optimizar el rendimiento.
## Configuración del Proyecto ⚙️
> **Nota:** Asegúrate de tener Node.js, npm o yarn, y un entorno configurado para React Native CLI.
1. Clona este repositorio en tu máquina local:
```bash
git clone https://github.com/IgnaG-Dev/PokedexApp
```
2. Navega al directorio del proyecto:
```bash
cd PokedexApp
```
3. Instala las dependencias necesarias:
```bash
npm install
```
o
```bash
yarn install
```
4. Ejecuta la aplicación en un emulador o dispositivo físico:
- Para Android:
```bash
npx react-native run-android
```
- Para iOS:
```bash
npx react-native run-ios
```
## Contribución 🤝
¡Las contribuciones son bienvenidas! Si tienes ideas para mejorar esta aplicación, abre un issue o envía una pull request con tus propuestas.
## Contacto 📧
Si tienes alguna pregunta o sugerencia, no dudes en ponerte en contacto.