Prueba técnica Frontend Developer (vue)
¿Qué se busca evaluar?
- Creatividad para resolver los requerimientos
- Calidad del código entregado (estructura y buenas prácticas)
- Eficiencia de los algoritmos entregados
- Familiaridad con el stack de desarrollo y autentificación de APIs
Objetivo
Crear una app web que contenga un CRUD de items de un inventario, haciendo uso de la API REST de prueba que se encuentra en este mismo archivo (README.md).
Requerimientos
- Crear CRUD de items (crear, enlistar, editar, eliminar)
- Utilizar Vue 2 como framework frontend
- Usar Vuetify como biblioteca de componentes
- Usar Vue Router y Vuex donde se considere necesario
- Implementar al menos dos vistas
- Utilizar la información del endpoint "/categories" para construir el selector de categorías en la vista de edición/creación de items
- No es necesario incluir un paginador, es suficiente con que se muestre la primera página
- No es necesario incluir un login, se puede usar un token estático
Deseable
- Usar Actions de Vuex para hacer las llamadas a API
Fuente de datos
A continuación se detallan los endpoints, el contenido de sus solicitudes y el contenido de sus respuestas. También se puede hacer uso de este Postman Collection que concentra la misma información.
Endpoint base: https://pt.arriagada.dev/api
Método de autenticación: Bearer TOKEN
Email: demo@demo.cl
Password: demo
POST /login
Headers:
Accept: application/json
Content-Type: application/json
Request body:
{
"email": "demo@demo.cl",
"password": "demo"
}
Response:
{
"user": {
"id": 1,
"name": "Demo User",
"email": "demo@demo.cl",
"email_verified_at": null,
"created_at": "2021-04-27T13:19:22.000000Z",
"updated_at": "2021-04-27T13:19:22.000000Z"
},
"access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9...."
}
GET /items
Headers:
Accept: application/json
Content-Type: application/json
Authorization: Bearer [TOKEN]
Response:
{
"current_page": 1,
"data": [
{
"id": 11,
"name": "GALAX GeForce GTX 1050 Ti (1-Click OC) 128-bit DDR5",
"quantity": "1244",
"status": "1"
},
{
"id": 10,
"name": "ZOTAC GAMING GeForce GTX 1660 SUPER Twin Fan 6GB GDDR6",
"quantity": "252",
"status": "1"
},
...
],
"first_page_url": "https://pt.arriagada.dev/api/items?page=1",
"from": 1,
"last_page": 1,
"last_page_url": "https://pt.arriagada.dev/api/items?page=1",
"next_page_url": null,
"path": "https://pt.arriagada.dev/api/items",
"per_page": 15,
"prev_page_url": null,
"to": 11,
"total": 11
}
GET /item/{itemId}
Headers:
Accept: application/json
Content-Type: application/json
Authorization: Bearer [TOKEN]
Response:
{
"id": 1,
"name": "ASUS ROG STRIX Z490-E Gaming",
"description": "Lorem ipsum dolor sit amet consectetur...",
"quantity": 223,
"categoryId": 1,
"priceTaxExcluded": 361,
"status": 0
}
POST /item
Headers:
Accept: application/json
Content-Type: application/json
Authorization: Bearer [TOKEN]
Body request:
{
"name": "ASUS ROG STRIX Z490-E Gaming",
"description": "Lorem ipsum dolor sit amet consectetur...",
"quantity": 223,
"categoryId": 1,
"priceTaxExcluded": 361,
"status": 0
}
Response:
{
"name": "ASUS ROG STRIX Z490-E Gaming",
"description": "Lorem ipsum dolor sit amet consectetur...",
"quantity": 223,
"category_id": 1,
"price_tax_excluded": 361,
"status": 0,
"updated_at": "2021-07-31T21:28:45.000000Z",
"created_at": "2021-07-31T21:28:45.000000Z",
"id": 1
}
PUT /item
Headers:
Accept: application/json
Content-Type: application/json
Authorization: Bearer [TOKEN]
Body request:
{
"id": 1,
"name": "ASUS ROG STRIX Z490-E Gaming",
"description": "Lorem ipsum dolor sit amet consectetur...",
"quantity": 223,
"categoryId": 1,
"priceTaxExcluded": 361,
"status": 0
}
Response:
{
"id": 1,
"name": "ASUS ROG STRIX Z490-E Gaming",
"description": "Lorem ipsum dolor sit amet consectetur...",
"quantity": 223,
"category_id": 1,
"price_tax_excluded": 361,
"status": 0,
"created_at": "2021-07-31T20:51:49.000000Z",
"updated_at": "2021-07-31T21:30:01.000000Z"
}
DELETE /item/{itemId}
Headers:
Accept: application/json
Content-Type: application/json
Authorization: Bearer [TOKEN]
Response:
{
"message": "This item was deleted successfully"
}
GET /categories
Headers:
Accept: application/json
Content-Type: application/json
Authorization: Bearer [TOKEN]
Response:
[
{
"id": 1,
"name": "Motherboard"
},
{
"id": 2,
"name": "Cabinet"
},
{
"id": 3,
"name": "RAM"
},
{
"id": 4,
"name": "Cooling System"
},
...
]