{"id":25451621,"url":"https://github.com/seb-rm/pi-h-pokeexplorer","last_synced_at":"2026-04-13T14:31:09.060Z","repository":{"id":215295721,"uuid":"738585989","full_name":"Seb-RM/PI-H-PokeExplorer","owner":"Seb-RM","description":"Aplicación desarrollada durante el bootcamp de Henry, con el propósito de poner en práctica los conocimientos teóricos adquiridos durante la cursada.","archived":false,"fork":false,"pushed_at":"2024-07-03T03:54:29.000Z","size":4286,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"deploy","last_synced_at":"2025-08-13T07:26:48.542Z","etag":null,"topics":["expressjs","nodejs","react","redux","responsive-web-design"],"latest_commit_sha":null,"homepage":"https://pi-h-poke-explorer.vercel.app","language":"JavaScript","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/Seb-RM.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-01-03T15:12:27.000Z","updated_at":"2024-07-03T03:54:33.000Z","dependencies_parsed_at":"2025-02-17T22:54:13.103Z","dependency_job_id":"03d0daa7-194f-40d2-87fe-feddbddf37b3","html_url":"https://github.com/Seb-RM/PI-H-PokeExplorer","commit_stats":null,"previous_names":["seb-rm/pi-h-pokeexplorer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Seb-RM/PI-H-PokeExplorer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FPI-H-PokeExplorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FPI-H-PokeExplorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FPI-H-PokeExplorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FPI-H-PokeExplorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Seb-RM","download_url":"https://codeload.github.com/Seb-RM/PI-H-PokeExplorer/tar.gz/refs/heads/deploy","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FPI-H-PokeExplorer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31757477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T13:27:56.013Z","status":"ssl_error","status_checked_at":"2026-04-13T13:21:23.512Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["expressjs","nodejs","react","redux","responsive-web-design"],"created_at":"2025-02-17T22:54:09.231Z","updated_at":"2026-04-13T14:31:09.040Z","avatar_url":"https://github.com/Seb-RM.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PokeExplorer\r\n\r\n## Descripción\r\n\r\nEste proyecto es una aplicación desarrollada durante el bootcamp de Henry, con el propósito de poner en práctica los conocimientos teóricos adquiridos durante la cursada. La aplicación aprovecha los datos proporcionados por [PokeAPI - The RESTful Pokémon API](https://pokeapi.co/)\r\n, y está construida utilizando una combinación de tecnologías como React, Redux y JavaScript para el desarrollo del frontend, mientras que para el backend se emplean Node.js y Express.\r\n\r\nEl frontend de la aplicación se desarrolló utilizando React, un framework de JavaScript ampliamente utilizado para la construcción de interfaces de usuario interactivas. Redux, por otro lado, se utilizó para gestionar el estado de la aplicación de manera eficiente, permitiendo un flujo de datos predecible y mantenible.\r\n\r\nEn cuanto al backend, se emplearon Node.js y Express para crear una API RESTful que maneja las solicitudes del cliente y gestiona la lógica del servidor. Node.js es un entorno de tiempo de ejecución de JavaScript que permite ejecutar código JavaScript fuera del navegador, mientras que Express es un framework de aplicaciones web para Node.js que simplifica el desarrollo de servidores web.\r\n\r\nAdemás, se utilizó CSS para estilizar la interfaz de usuario y mejorar la experiencia del usuario en términos de diseño y presentación.\r\n\r\n## Instalación\r\n\r\n### Requisitos Previos\r\n- Node.js instalado en tu sistema. Puedes descargarlo [aquí](https://nodejs.org/).\r\n\r\n### Pasos de Instalación\r\n1. Clona el repositorio desde GitHub:\r\n   ```bash\r\n   git clone https://github.com/Seb-RM/PI-H-PokeExplorer.git\r\n\r\n  Si prefieres, también puedes descargar el código fuente como un archivo ZIP y descomprimirlo en tu computadora.\r\n\r\n2. Accede al directorio del proyecto:\r\n   ```bash\r\n   cd pi-h-pokeexplorer\r\n\r\n3. Cambia a la rama \"master\":\r\n   ```bash\r\n   git checkout master\r\n\r\n4. Instala las dependencias del proyecto utilizando npm (Node Package Manager), en cada una de las carpetas principales \"server\" y \"client\":\r\n   ```bash\r\n   npm install\r\n  Este comando instalará todas las dependencias necesarias que se encuentran en el archivo 'package.json'.\r\n\r\n### Configuración del Entorno\r\n\r\nCrea un archivo .env en la carpeta server y configura las variables de entorno necesarias, como las credenciales de la base de datos o las claves de API. Puedes encontrar un ejemplo de las variables necesarias en el archivo .env.example.\r\n\r\n### Ejecución del Proyecto\r\n\r\nUna vez completados los pasos anteriores, puedes ejecutar el proyecto localmente:\r\n\r\n1. Para iniciar el servidor de desarrollo, abre la consola desde la carpeta server, y utiliza el siguiente comando:\r\n   ```bash\r\n   npm start\r\n  Esto iniciará el servidor y la aplicación estará disponible en tu navegador en la dirección 'http://localhost:3001/'.\r\n\r\n2. Para iniciar la app de react , abre la consola desde la carpeta client , y utiliza el siguiente comando:\r\n   ```bash\r\n   npm run dev\r\n\r\n¡Listo! Ahora puedes comenzar a utilizar la aplicación y explorar sus funcionalidades.\r\n\r\n## Uso\r\n\r\nPara empezar a utilizar la aplicación, simpemente sigue estos pasos:\r\n\r\n1. **Ingreso **: El ingreso a la aplicación es sencillo, simplemento se debe dar clic en el botón continuar.\r\n   \r\n    \u003cimg src=\"./screenshots/Captura-portada.PNG\" alt=\"Formulario de Registro\" width=\"800px\"\u003e\r\n\r\n2. **Explora Personajes**: Una vez en la aplicación puedes explorar las tarjetas de Pokémon. \r\n\r\n   \u003cimg src=\"./screenshots/Captura-home-ph.PNG\" alt=\"Sección Home\" width=\"800px\"\u003e\r\n  \r\n   La barra de herramientas te permite filtrar los Pokémon por tipo, ordenarlos según tu preferencia,y buscarlos por nombre. Además del filtrado por origen, que hace referencia al hecho de \r\n   que, además de visualizar los datos proporcionados por la API, puedes crear tu propio Pokémon para agregarlo a la lista. Solo tienes que usar el botón \"Crea tu Pokémon!!\" para acceder al \r\n   formulario de creación.\r\n  \r\n   \u003cimg src=\"./screenshots/Captura-barra-filtrado.PNG\" alt=\"Barra de búsqueda\" width=\"800px\"\u003e\r\n\r\n3. **Formulario de Creación**: Para crear un Pokémon solo tienes que seguir la indicaciones del formulario. No olvides de para la imagen debes ingresar una URL.\r\n\r\n      \u003cimg src=\"./screenshots/Captura-formulario.PNG\" alt=\"Tarjeta de Personaje\" width=\"800px\"\u003e\r\n\r\n4. **Ver Detalles**: Una vez que hayas agregado tu Pokémon a la lista, puedes acceder a los detalles de sus datos haciendo clic en la tarjeta correspondiente. También puedes hacer lo mismo con el resto de las tarjetas.\r\n   \r\n   \u003cimg src=\"./screenshots/Captura-detaller-ph.PNG\" alt=\"Sección Favoritos\" width=\"800px\"\u003e\r\n\r\n   En el caso de un Pokémon creado por un usuario y guardado en la base de datos, al acceder a sus detalles también se verá un botón \"Eliminar Pokémon\", que  borrará sus datos de la misma.\r\n\r\n   \u003cimg src=\"./screenshots/Captura-detalle-db.PNG\" alt=\"Sección Favoritos\" width=\"800px\"\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-rm%2Fpi-h-pokeexplorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseb-rm%2Fpi-h-pokeexplorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-rm%2Fpi-h-pokeexplorer/lists"}