fronend-test's Introduction

Test Práctico - Frontend

Objetivos:

● En base a los diseños dados, construir las siguientes tres vistas:

○ Caja de búsqueda
○ Resultados de la búsqueda
○ Detalle del producto

● Las vistas son navegables de manera independiente y cuentan con su propia url:

○ Caja de Búsqueda: “/”
○ Resultados de la búsqueda: “/items?search=”
○ Detalle del producto: “/items/:id”

● Construir los siguientes endpoints para ser utilizados desde las vistas:

○ /api/items?q= :query
○ /api/items/ :id

Search Bar:

Lista de productos buscados:

Detalle de Producto:

Para correr el test, hay que correr el Back (ubicado en la carpeta 'api') para poder tener resultados en las busquedas y luego el Front (ubicado en la carpeta 'client').

Lo primero, es abrir la terminal, ubicarse en la carpeta api y correr el comando npm install y luego npm start. Luego, el mismo proceso pero ahora situado en la carpeta client.

Listo! Una vez hecho, ya podes ingresar a tu navegador predeterminado e ingresar a http://localhost:3000/. Queres ver los datos que traigo desde la api de mercado libre? Podes ingresar a http://localhost:3001/api/items?q=_Busqueda_ o http://localhost:3001/api/items/_ID_Producto_ para el detalle.

const test = {
    author: {
        name: "Juan Manuel",
        speaker: "Gimenez Chabaudie",
        mail: "[email protected]",
        celular: "https://wa.me/+5491155760486"
    },
    back: [Javascript, Node, Express],
    front: [React, Sass, Css Grid],
    responsive: true,
    message: "Ojalá me llamen 🙏🏽  Saludos!!"
}

Recommend Projects