ProyectoFinal+Carrouche

Video: https://www.youtube.com/watch?v=XZNDnn8yEA0

SchnauZaar

Descripcion

SchnauZaar es un proyecto de pagina e-commerce de venta de articulos de mascotas.

Instalacion

1. Clonar el repositorio:

   git clone https://github.com/EmmaCarro/coder-emma-react.git

2. Instalar las dependencias:

     * ReactJS -> Vite instalado en modo Javascript 
     * Firebase (npm install firebase)
     * React Icons (npm install react-icons)
     * Bootstrap (npm install react-bootstrap)
     * SweetAlert2 (npm install react-sweetalert2)
   

3. Iniciar la aplicacion:

   npm run dev

4. Ejecucion

 * Si tu browser no abre automaticamente con la pagina copiar el link localhost a una ventana del mismo, por ejemplo `localhost:3000`

5. Modificaciones desde la branch preentrega2 o main

* Se limpio el código y se rehizo desde el inicio para estructurar mejor todo. Ademas, se comento organizadamente que hace cada elemento.
* Ya no hay un CSS general sino que cada componente tiene el suyo.
* Se utilizo menos bootstrap para que el codigo quede mas limpio, y se trasladaron esos valores a los CSS.
* Se agregaron componentes: Cart, el carrito de compras.
* Se agregaron componentes: Form, para hacer el checkout del carrito de compras.
* Se agregaron componentes: Counter, para el contador de articulos agregados al carrito.
* Se eliminaron todos los componentes en la carpeta pages, y se movio de ahi solamente el componente Error a su propia carpeta, para su uso en el error 404.
* Se elimino el componente index.js y se reemplazo por main.jsx, ahora contiene tambien firebase.
* Se creo una firebase con algunos articulos inventados.
* Se reemplazo el asyncMock por el firebase. La firebase puede guardar las ordenes con su numero de orden y usuario.
* El carrito se mantiene localmente durante la sesion, no hay usuario y contraseña.
* Se redujo el codigo y se mejoro la navegacion eliminando componentes como Layout, y el uso de Outlet. Ahora se utiliza solo el ItemListContainer como componente principal.
* Se instalo React Icons para no hacer uso de archivos de imagenes locales para el carrito y el logo de la pagina
* Se agregaron chequeos al formulario para los errores, y se reemplazaron algunos con alertas de SweetAlert2. Tambien, se utilizo para confirmar el checkout y dar el numero de orden.
* Se agrego el contexto para el carrito que debe estar presente siempre, y sus componentes de Context

PreEntrega2+Carrouche

Segunda preentrega del proyecto. Mas descripcion de lo hecho en el Readme

PreEntrega1+Carrouche

Pre entrega 1 del proyecto del curso de ReactJS de coderhouse.

Agregados:

• Titulo de la pagina con slogan
• Barra de navegacion (sin links, a modificar)
• Imagen de carrito de compras con un numero hardcodeado (a modificar)
• Texto de bienvenida en el cuerpo de la pagina, usando props
• Uso de bootstrap, instalado desde npm. Y un poco de CSS

• Se borraron los archivos por defecto de la carpeta public/ excepto el index.html