Ecommerce con React.js

Curso: ReactJS (2023)
Comisión: 39655
Profesor: Francisco Pugh
Alumno: Matias Baldanza
Fecha: 2023-05-16

Deploy

Repo: https://github.com/matiasbaldanza/ecommerce-reactjs

Creado con

React.js
Estilos: TailwindCSS 3.3.1
Componentes UI: DaisyUI (usados como base en componentes personalizados)
Noficicaciones: react-hot-toast
Base de datos: Firebase
Build tool: Vite
Linter: StandardJS (ESLint)

Pre-requerimientos

Luego de clonar el repositorio, instalar las dependencias

pnpm install
pnpm i firebase

Ejecutar la aplicación

Una vez instaladas las dependencias, ejecutar:

vite dev

La aplicación estará disponible en el http://localhost:5173 (o un puerto alternativo)

Rutas implementadas con react-router-dom

/
/category/:categoryId
/:productId

Nota: para los productos, no usé id numérico sino un 'slug' basado en el título de la publicación. Asumo que sería mejor usar un productId y reescribir la ruta con el slug, pero por ahora lo voy a dejar así

Los cards de producto (Componente <Item>) tienen un estado de hover que muestra la segunda imagen disponible.

Páginas de producto (rutas /:productId)

Separado en Componentes:

<ProductImage /> para preview de producto

(muestra una imagen de varias. TODO: carrusel)
<ProductInfo /> muestra la información de producto, tags,
<ProductImage /> muestra la imagen de producto _(TODO: carrusel)

Los siguientes componentes tienen render condicional, dependiendo de si hay datos disponibles:

<ProductPreview /> muestra un banner de producto
<ProductDescription /> muestra un párrafo de descripción
<ProductSpecs /> muestra las especificaciones de producto

Para solucionar problema de react-router en Vercel

Agregar en el root un archivo vercel.json con este contenido

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

Fuente: vercel/vercel#7475 (comment)