Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mauricio-hub/test
Test front
https://github.com/mauricio-hub/test
jest reactjs typescript
Last synced: 24 days ago
JSON representation
Test front
- Host: GitHub
- URL: https://github.com/mauricio-hub/test
- Owner: mauricio-hub
- Created: 2024-10-19T01:27:51.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-23T16:30:13.000Z (3 months ago)
- Last Synced: 2024-10-31T16:06:31.215Z (2 months ago)
- Topics: jest, reactjs, typescript
- Language: TypeScript
- Homepage: https://mauricio-hub.github.io/test/
- Size: 1.15 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Requerimientos
Necesitamos desarrollar una Single Page Application (SPA) que muestre la información de nuestras imagenes:
1. Mostrar todas las imagenes con un scroll infinito.
2. Filtrar el contenido a través de una búsqueda (No es necesario que el resultado sea coherente).
3. Realizar un like/unlike de cada uno de los items. UI responsive.
# Información
En el momento del desarrollo de la aplicación cliente, el API no se encuentra desarrollada, por
lo que esta incluida una api mock que simula el comportamiento de la API.
Para arrancar la api mock simplemente ejecutar:
`npm run mocks`
## Endpoints
### `GET http://localhost:3100/images`
```json
[
{
"type": "Image",
"id": 2,
"title": "Train in India-Agra",
"author": "SamyRoad",
"created_at": "2012-12-12T21: 08: 20Z",
"main_attachment": {
"big": "http://lorempixel.com/400/500/",
"small": "http://lorempixel.com/100/125/"
},
"likes_count": 5,
"liked": true,
"links": [
{
"rel": "avatar",
"uri": "http://lorempixel.com/250/250/",
"methods": "GET"
},
{
"rel": "like",
"uri": "http://localhost:3100/images/2/likes",
"methods": "POST"
}
]
},
...
]
```
Se puede utilizar los query params `search` y `page` para simular la busqueda y paginación.
### `POST http://localhost:3100/images/:id/likes`
Espera un body vacio y respondera con un 204 si todo ha ido correctamente, simula la acción de like.
# Diseño
La visualización de la aplicación cambia dependiendo del dispositivo que se este utilizando.
- En el caso de que se utilice un dispositivo móvil, se debe de mostrar la aplicación siguiendo el diseño mobile.psd.
- En el caso que se utilice una pantalla mayor, se debe de utilizar el diseño web.psd, con un mínimo de 2 columnas y un máximo de 4.
Los diseños se pueden encontrar [aqui](https://www.dropbox.com/sh/r1fp5nz7x046kjt/AACQdbp6bZlv2pNtCN2lTEoEa?dl=0).
Si no dispones de photoshop puedes usar [photopea](https://www.photopea.com/).
# Implementación
- Diseñar e implementar la aplicación usando preferiblemente React.
- HTML y estilos responsive a partir de los PSDs: mobile para móviles y web para Desktop.
Se valorarán el uso e implementación de tests.
# configuracion adicional si al iniciar da problemas con version de node
-Configurar una variable de entorno para usar el comportamiento antiguo de OpenSSL
en PowerShell $env:NODE_OPTIONS="--openssl-legacy-provider"
## Testing
Este proyecto utiliza Jest para realizar pruebas.
Para ejecutar las pruebas:
```bash
npm run test