Aplicación tienda online – por pasos

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.
Aplicación tienda online - por pasos 1
  • 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.
}
Aplicación tienda online - por pasos 2

2. Contador con Botón

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

Aplicación tienda online - por pasos 3
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
}
Aplicación tienda online - por pasos 4

4. Detalle del producto

  • Crear el componente ItemDetailContainer. Este componente debe recuperar la información de un producto concreto del JSON. Lo haremos a través de una función llamada getItem(id) que recibirá como parámetro de entrada el id del item que quiero recuperar y devolverá el correspondiente objeto.
const ItemDetailContainer = () => {
   // Implementar el llamado a getItem()
   return <ItemDetail item={item}/>
}
  • Crear el componente ItemDetail. Debe mostrar la vista de detalle de un item, incluyendo título, descripción, foto y precio. Este componente será quien cargue el componente ItemCount pasándole el stock del producto.

Para probar el ItemDetailContainer, podemos cambiar el componente que cargamos inicialmente desde index.js (cargaremos ItemDetailContainer en lugar de App).

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.

← Redux en React
Rutas privadas →