README.md

Proyecto React Comision 34730

En este proyecto se aplicaron varios conceptos importantes de React. Los que se usaron fueron:

• useState.
• useEffect.
• useRef.

---

Pasos para ejecutar el proyecto de forma local.

Este proyecto se creo con VITE y su ejecucion se hara de la siguiente manera:

1. Abrir la carpeta del proyecto CODERFILM en VC.
2. Abrir la terminal dentro de la carpeta que contiene el proyecto.
3. Escribir lo siguiente: npm i (se instalara las dependencias usadas en el proyecto).
4. Ejecutar el proyecto: npm run dev
5. Se visualizara un direccion ip donde le daras control y click con el mouse para que te direcciones al Browser predeterminado.

Tambien puedes abrir el proyecto dando click en el siguiente enlace:

CODERFILM.com

---

Al ejecutar la pagina abrira esta pantalla de CODERFILM

Abajo del titulo CODERFILM hay un play en un circulo celeste. Tiene un efecto Hover que se desplazara. Se tiene que dar click en ese boton para ingresar a la pagina de HOME.

Presionar el boton Ingresar para redireccionar a HOME.

---

Observamos la parte del Home, donde encontramos el navbar y un slider.

En el navbar esta dividido en 3

1. El logo CODERFILM¨ si precionas en el logo se devuelve.
2. Dos iconos que uno es Homme y el segundo se redirecciona a una ventana nueva de Peliculas.
3. Ese ultimo nos muestra el carrito de compras.

Tambien en home al desplazar el scroll encontramos el footer y un slider pequeño. En ese Footer esta la palabra Home y la palabra Peliculas que redireccionan al precionar.

---

Nos devolvemos al Header donde esta el navbar, y precionaremos el segundo icono que parece un rollo de peliculas para ir a la parte de peliculas

En Peliculas encontraras el header con el navbar. Encontraras un filter, que al precionar en Accion, Marvel, Terro, hara el filtrado segun la categoria, tambien si quieres volver a ver todo el repertorio hay un ultimo icono que parece unas flechas curvas y retorna todo el contenido.

Pasos para agregar una pelicula al carrito de compras y hacer la orden.

1. Pasar el Mouse por encima de la pelicula y dar click, redireccionara hacia una ventana, donde mostrara el detalle de la pelicula.

2. Como ven mantenemos el header con el navbar y en el detalle esta la foto de la pelicula, el contenido y mas abajo, encontraremos el stock, el precio y los controles para agregar peliculas.

3. Observan que hay un carrito dentro de un circulo celeste, al precionar ese boton agregara el producto al carrito y aparecera otro boton que dice terminar compra y ese te redireccionara al carrito o puede ingresar al mismo precionando el carrito del navbar.

---

Al precionar Terminar Compra nos redirecciona al carrito.

Podemos eliminarlo precionando el cesto rojo o precionar nuevamente Terminar compra, donde nos redireccionara a la ventana para generar la orden.

El formulario fue realizado con formik, y tiene validaciones en los input.

Si agregar la informacion correcta se elminiaran los mensajes de error. Le daremos Generar Orden y se borrara el contenido del carrito y la informacion ira a firebase.

---

precionamos Generar Orden y veremos que llega la informacion a firebase y la confirmacion de la compra.

---

Al darle click a seguir comprando nos redirecciona a la pagina de peliculas para seguir comprando.

---

---

---

---

Les quiero dar las gracias por el bootcamp de React js.