tengo 29 años y estoy emprendiendo este trayecto de Desarrollador Web Full Stack en CoderHouse
Loki es un proyecto desarrollado como parte del curso de React JS + vite en CoderHouse. Se trata de una aplicación que integra diversas APIs para proporcionar información actualizada sobre el clima, series y películas, así como una base de datos en Firebase relacionada con la serie "Rick and Morty". Además, incluye un reloj en tiempo real que muestra la hora y la fecha actual.
El objetivo principal de este proyecto es explorar el mundo de las APIs de películas y series, proporcionando a los usuarios la posibilidad de visualizar portadas y descripciones en un solo lugar. Además, se implementó un sistema de gestión de ventas utilizando la página de "Rick and Morty" como ejemplo. Este sistema permite realizar compras de tarjetas, que son almacenadas en Firebase, y luego se generan tickets de venta que muestran la información correspondiente.
Install reactJS with npm
git clone https://github.com/EzeMuzaber/reactJS.git
cd reactJS
npm install
iniciar vista de pagina: npm run dev
pagina operativa: https://react-js-ten-amber.vercel.app/
Carpeta Drive con video demostrativo de la pagina: https://drive.google.com/drive/folders/12hedyhdisRgFJCwbtoi33VbwkpnEJG_y?usp=sharing
- antd -- version: 5.15.3
- axios -- version: 1.6.8
- firebase -- version: 10.11.1
- lucide-react -- version: 0.362.0
- react -- version:18.2.0
- react-dom -- version: 18.2.0
- react-router-dom -- version: 6.22.3
- toastify -- version:10.0.5
- tailwindcss -- version: 3.4.1
- vite -- version: 5.1.6
- ant-design/icons -- version: 5.3.4
-
Visualización Ampliada de Portadas: Al hacer clic en cada portada de película o serie, se expande para mostrar la imagen completa, brindando una experiencia visual más detallada.
-
Descripciones Detalladas: Al hacer clic en "Ver más", se despliega una descripción detallada de cada película o serie, lo que permite a los usuarios obtener más información sobre su contenido.
-
Imagen a Color al Pasar el Mouse: Las imágenes de las portadas están en blanco y negro de forma predeterminada. Sin embargo, al pasar el mouse sobre ellas, se transforman en imágenes a todo color, agregando un efecto visual dinámico y atractivo.
-
Exploración de Personajes de "Rick and Morty": Dentro de la sección de "Rick and Morty", los usuarios pueden explorar los personajes completos de la serie. Además, hay opciones para filtrar y ver solo los personajes humanos o alienígenas, lo que facilita la búsqueda de personajes específicos según su categoría.
-
Compra de Tarjetas de Personajes: Dentro del detalle de cada personaje de "Rick and Morty", los usuarios pueden encontrar un botón "Ver más" que les permite acceder a información adicional sobre el personaje. Además, pueden seleccionar la cantidad de tarjetas que desean comprar y agregarlas directamente al carrito de compras. Un botón de "Volver a Personajes" les permite regresar fácilmente a la lista principal de personajes.
-
Funcionalidad de "Me gusta": Los usuarios tienen la opción de dar "me gusta" a cada película, aunque esta interacción no tiene más efecto que registrar la preferencia del usuario.