Aplicación tienda online – por pasos

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Hacer, siguiendo los pasos indicados, la siguiente tienda online:

1. Landing + menu

• Crer el componente NavBar que será una barra de menú . Tendrá el icono de nuestra marca y un listado de categorías.

const NavBar = () => {
   return (
      <>
         <h3>Tu marca (y si quieres una imagen que será el logo)</h3>
         { /* Aquí vendría el listado de categorías */}
         <CartWidget/>
         </>
   )
}

• Crear el componente CartWidget. Tendrá un icono y lo ubicaremos en el navbar.

• Crear el componente ItemListContainer. Lo importaremos dentro de App.js. Debajo de NavBar.js.

const ItemListContainer = ({greeting}) => {
// Incluye aquí el rendering de algún texto o título provisional que luego reemplazaremos por nuetro catálogo.
}

2. Contador con Botón

Crear el componente ItemCount para incrementar o decrementar los productos en el carrito.

const ItemCount = ({stock, initial, onAdd}) => {

}

Tener en cuenta:

• Tendremos un número initial que indicará la cantidad de items. Si le hubiesemos pasado un valor el contador se inicializará con ese valor por defecto.
• El número contador nunca puede superar el stock disponible.
• Si hay stock, al clickar el botón se debe ejecutar onAdd con un número que debe ser la cantidad seleccionada por el usuario.

De momento probaremos este componente insertándolo dentro de ItemListContainer. Más adelante lo reubicaremos dentro del detalle de cada producto.

3. Catálogo con maps y promises

• Crear el componente ItemList. Estará importado dentro de ItemListContainer. Cargará un array de objetos de un JSON. Cada objeto tendrá id, title, description, price, pictureUrl y stock.

const ItemList = () => {
   <Item .../>
}

• Crear el componente Item. Estará importado dentro de ItemList. Lo utilizaremos para mostrar la información recibida como prop de ItemList.

const Item = ({id, title, price, pictureUrl}) => {
   // Desarrolla la vista de un item
}

4. Detalle del producto

const ItemDetailContainer = () => {
   // Implementar el llamado a getItem()
   return <ItemDetail item={item}/>
}

5. Routing en la App

Rutas a configurar:

• ‘/’ navega a <ItemListContainer/>.
• ‘/category/:id’ navega a <ItemListContainer/> (utilizar useParams).
• ‘/item/:id’ navega a <ItemDetailContainer /> (utilizar useParams).

Links a configurar:

• Clickar en el brand debe navegar a ‘/’.
• Clickar en Detalle del producto, dentro de un Item, debe navegar a /item/:id.
• Clickar en una categoría del navbar debe navegar a /category/:categoryId.

6. Mejorar el ItemCounter

Cuando ItemCount emita un evento onAdd, almacenar ese valor en un estado interno del ItemDetail para hacer desaparecer el ItemCount. En el lugar donde estaba ItemCount debe aparecer el botón Terminar compra que debe poder navegar a un componente vacío (por el momento) en la ruta /cart.

const ItemDetail = ({item}) =>{
   const onAdd = () => {
      ...
   }
} 

7. Implementando Context API

Crear CartContext.js con el contexto e impórtalo en App.js.

Al clickar en el botón de comprar en el componente ItemDetail se debe guardar el producto y su cantidad como objeto ({id, name, price, quantity, etc.}) en el CartContext.

Métodos recomendados:

• addItem(item, quantity). Este método debe evitar duplicados.
• removeItem(itemId)
• clear()
• isInCart(id) => true | false

8. Añadiendo Firebase

En lugar de recuperar los datos desde un fichero JSON, recuperarlos mediante una consulta a una base de datos de Firebase.