Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gamboacarlos/preview-test
https://github.com/gamboacarlos/preview-test
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gamboacarlos/preview-test
- Owner: gamboacarlos
- Created: 2022-08-24T20:34:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-04T10:00:35.000Z (over 1 year ago)
- Last Synced: 2023-10-04T18:57:23.318Z (over 1 year ago)
- Language: TypeScript
- Size: 429 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Breaking Bad App
## Demo
[Link](https://guileless-syrniki-3de03d.netlify.app/)
## Instalación
```bash
npm install
```
## Ejecución
```bash
npm run dev
```
## Hecho con
- [TypeScript](https://www.typescriptlang.org/)
- [Vite](https://vitejs.dev)
- [Redux](https://es.redux.js.org/)
- [Redux-Saga](https://redux-saga.js.org/)
- [Jest](https://jestjs.io/es-ES/)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
- [Sass](https://sass-lang.com/)
- [i18next](https://www.i18next.com/)
# Estructura del proyecto
Este proyecto fue creado utilizando una estructura por tipo de fichero ya que es un proyecto sencillo, esta estructura permite hacer una separación entre los componentes y las vistas. Cada componente esta dentro de una carpeta con su respectivo nombre, estilos y tests, se aplica la misma estructura para los hooks.
## Estructura de carpetas
```
react-app/
├── src/
│ ├── components/
│ │ ├── CharacterCard/
│ │ ├── CharacterDescription/
│ │ ├── CharacterInfo/
│ │ ├── CharactersList/
│ │ ├── Footer/
│ │ ├── Layout/
│ │ ├── LoadingScreen/
│ │ ├── MainContainer/
│ │ ├── NavBar/
│ │ └── Paginator/
│ ├── hooks/
│ │ ├── useData/
│ │ ├── usePagination/
│ │ └── useTranslator/
│ ├── store/
│ │ ├── reducer/
│ │ └── sagas/
│ ├── globalStyles/
│ ├── routes/
│ ├── translations/
│ ├── types/
│ ├── utils/
│ ├── views/
│ ├── App.tsx
│ └── main.tsx
├── .babelrc
├── .eslintrc.cjs
├── .gitignore
├── .prettierrc
├── index.html
├── package.json
├── README.md
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
```
## Estructura de componentes
```
└─ src/
├── components/
│ ├── CharacterCard/
│ │ ├── CharacterCard.module.scss
│ │ ├── CharacterCard.spec.tsx
│ │ └── CharacterCard.tsx
```
## Estructura de hooks
```
└─ src/
├── hooks/
│ ├── useData/
│ │ ├── useData.spec.ts
│ │ └── useData.tsx
```
# Arquitectura
Definire una arquitectura React-Redux. He decidido usar Redux para el manejo del estado y Redux-Saga como middleware para comunicarme con la API, Redux-Saga me permitira un mejor control de la comunicación asincrona y manejo de errores.
## Memorias
> 22/08/2022
> Para esta aplicación usare Vite en lugar de Create React App, principalmente por dos razones, practicamente no necesita configuración y me permitira levantar un servidor de desarrollo de carga muy rapida ya que trabaja directamente con ES Modules. Tambien tiene soporte nativo para TypeScript.
> 22/08/2022
> Inicio el desarrollo de la aplicación, iniciando Git en el directorio raiz
> e instalando las dependencias:
- react-router-dom
- eslint
- prettier
- redux
- redux-saga
- jest
- sass
> 22/08/2022
> Usare CSS modules para los estilos con Sass, con CSS modules se podran mantener los estilos aislados dentro de cada componente.
> 22/08/2022
> Decido usar la configuracion "Standard" para Eslint haciendo uso de "eslint-config-prettier" para que no colisione con Prettier y lo configuro en el archivo eslintrc:
```
extends: [
'plugin:react/recommended',
'standard-with-typescript',
'prettier'
],
```
> 22/08/2022
> Para el testing utilizare Jest y React Testing Library, ambas son las librerias que uso habitualmente, luego de completar la instalacion creo el archivo .babelrc y configuro los presets que me permitiran correr los tests de la siguiente manera:
```
{
"presets": ["@babel/preset-env", ["@babel/preset-react", {
"runtime": "automatic"
}], "@babel/preset-typescript"]
}
```
> 22/08/2022
> Defino los scripts para Eslint y Jest:
```
"scripts": {
...
"test": "jest",
"test:watch": "npm test -- --watch",
"lint": "eslint src/**/*.{ts,tsx}"
},
```
> 23/08/2022
> Ya creada la vista principal de la aplicación defino su ruta en el componente MainRoutes haciendo uso de React Router.
> 23/08/2022
> Creo el store de la aplicacion con un único reducer y las sagas correspondientes.
```
└─ src/
├── store/
│ ├── reducer/
│ │ ├── actions/
│ │ └── app.reducer.ts
│ ├── sagas/
│ └── store.ts
```
> 23/08/2022
> He creado 3 custom hooks para despachar acciones y obtener los datos del estado: useData, usePagination y useTranslator, esto me va a permitir mantener los componentes mas compactos y faciles de leer.
```
└─ src/
├── hooks/
│ ├── useData/
│ ├── usePagination/
│ └── useTranslator/
```
> 23/08/2022
> Decido añadir paginación a la vista principal para poder tener disponible todos los personajes sin tener que hacer un solo fetch tan pesado que comprometa el rendimiento de la app y generar asi una mejor experiencia de usuario, tambien creo una animación de carga que se mostrara mientras los elementos aun no esten disponibles.
> 23/08/2022
> Inicio la instalación y configuración de i18next para manejar el idioma de la aplicación. El idioma podra ser cambiado manualmente entre ingles y español desde la parte derecha del NavBar.
> 24/08/2022
> Inicio la refactorización en base a los tests creados.
> 25/08/2022
> Añado tests unitarios a los actions generators del store incluyendo el tipado.
## Test coverage
---------------------------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
---------------------------------|---------|----------|---------|---------|-------------------
All files | 86.01 | 72 | 88.63 | 86.42 |
components/CharacterCard | 80 | 100 | 50 | 80 |
CharacterCard.tsx | 80 | 100 | 50 | 80 | 20
components/CharacterDescription | 100 | 100 | 100 | 100 |
CharacterDescription.tsx | 100 | 100 | 100 | 100 |
components/CharacterInfo | 100 | 50 | 100 | 100 |
CharacterInfo.tsx | 100 | 50 | 100 | 100 | 50
components/CharactersList | 100 | 100 | 100 | 100 |
CharactersList.tsx | 100 | 100 | 100 | 100 |
components/Footer | 100 | 100 | 100 | 100 |
Footer.tsx | 100 | 100 | 100 | 100 |
components/Layout | 100 | 100 | 100 | 100 |
Layout.tsx | 100 | 100 | 100 | 100 |
components/LoadingScreen | 100 | 100 | 100 | 100 |
LoadingScreen.tsx | 100 | 100 | 100 | 100 |
components/MainContainer | 100 | 100 | 100 | 100 |
MainContainer.tsx | 100 | 100 | 100 | 100 |
components/NavBar | 100 | 100 | 100 | 100 |
NavBar.tsx | 100 | 100 | 100 | 100 |
components/Paginator | 100 | 50 | 100 | 100 |
Paginator.tsx | 100 | 50 | 100 | 100 | 22-34
hooks/useData | 81.81 | 100 | 60 | 90 |
useData.tsx | 81.81 | 100 | 60 | 90 | 22
hooks/usePagination | 100 | 100 | 100 | 100 |
usePagination.tsx | 100 | 100 | 100 | 100 |
hooks/useTranslator | 100 | 100 | 100 | 100 |
useTranslator.tsx | 100 | 100 | 100 | 100 |
store | 100 | 100 | 100 | 100 |
store.ts | 100 | 100 | 100 | 100 |
store/reducer | 84.61 | 81.81 | 100 | 84.61 |
app.reducer.ts | 84.61 | 81.81 | 100 | 84.61 | 44-46
store/reducer/actions | 100 | 100 | 100 | 100 |
actionTypes.ts | 100 | 100 | 100 | 100 |
app.actions.ts | 100 | 100 | 100 | 100 |
store/sagas | 38.09 | 0 | 75 | 35 |
appSaga.tsx | 31.57 | 0 | 66.66 | 31.57 | 30-67
selectors.ts | 100 | 100 | 100 | 100 |
translations | 100 | 100 | 100 | 100 |
i18n.ts | 100 | 100 | 100 | 100 |
utils | 90 | 100 | 66.66 | 88.88 |
functions.ts | 75 | 100 | 50 | 66.66 | 2
testingUtils.tsx | 100 | 100 | 100 | 100 |
utils/fetchData | 85.71 | 100 | 100 | 85.71 |
fetchData.ts | 85.71 | 100 | 100 | 85.71 | 13
---------------------------------|---------|----------|---------|---------|-------------------
Test Suites: 15 passed, 15 total
Tests: 33 passed, 33 total
Snapshots: 0 total
Time: 6.819 s, estimated 7 s
Ran all test suites.