Buscador de los personajes de Rick and Morty

Funcionalidades principales:

• Versión clara/oscura
• Buscador de personajes
• Filtro por estado

Puedes ver una DEMO del proyeto en este enlace https://rtelenta.github.io/rick-and-morty/.

Mira Instalación para conocer ejecutarlo en un ambiente local.

node.js
yarn

Instalando de dependencias

yarn install

Ejecutando el proyecto en local. http://localhost:3000

yarn start

Compilando el proyecto. Se generará una carpeta build con los archivos compilados

yarn build

El proyecto cuenta con pruebas unitarias y un reporte de cobertura de código

Ejecutando las pruebas unitarias

yarn test

Ejecutando la cobertura de código

yarn test:coverage

Dentro de la carpeta components se encuentran los componentes generales acompañados cada uno de su respectivo test. Ejemplo:

📦components
 ┣ 📂CardImage
 ┃ ┣ 📜CardImage.test.tsx
 ┃ ┗ 📜index.tsx
 ┣ 📂...

Dentro de la carpeta features se encuentra una carpeta Finder con todos los archivos y tests del buscador. Ejemplo:

📦features
 ┗ 📂Finder
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📜SearchForm.tsx
 ┃ ┃ ┗ 📜...
 ┃ ┣ 📂graphql
 ┃ ┃ ┣ 📂queries
 ┃ ┃ ┃ ┗ 📜getCharactersQuery.ts
 ┃ ┃ ┗ 📂types
 ┃ ┃ ┃ ┣ 📜charactersDataType.ts
 ┃ ┃ ┃ ┗ ...
 ┃ ┣ 📂hooks
 ┃ ┃ ┗ 📜useCharacters.ts
 ┃ ┣ 📂services
 ┃ ┃ ┗ 📜getCharacters.ts
 ┃ ┣ 📂__tests__
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┣ 📜AlertMessage.test.tsx
 ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┗ 📜Finder.test.tsx
 ┃ ┗ 📜index.tsx

Versión clara	Versión oscura

Liberías y tecnologías usadas en el proyecto

• React - Estructuración y construcción de interfaces de usuario
• Typescript - Extensión a javascript para agregar tipado
• GraphQL - Lenguaje de queries para APIs
• React Query - Libería para caché de datos
• Mock Service Worker - Libería para Mock de APIs
• Chakra UI - Sistema de diseño