Skip to content

JeffreySuarez/CODERFILM

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Pagina Principal


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.

Pagina Principal

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.

Pagina Principal


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

Pagina Principal

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.

Pagina Principal

  1. 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.

Pagina Principal

  1. 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.

Pagina Principal

Pagina Principal


Al precionar Terminar Compra nos redirecciona al carrito.

Pagina Principal

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

Pagina Principal

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

Pagina Principal

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.

Pagina Principal


Pagina Principal

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

Pagina Principal


Pagina Principal

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.