Skip to content

ProyectoFinal+Carrouche

Latest
Latest
Compare
Choose a tag to compare
@EmmaCarro EmmaCarro released this 26 Sep 19:49
ProyectoFinal
f430008
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

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
Assets 3
Loading