Git Product home page Git Product logo

reactjs's Introduction

Hi, I'm Ezequiel Muzaber! 👋

tengo 29 años y estoy emprendiendo este trayecto de Desarrollador Web Full Stack en CoderHouse

Loki: Integracion de APIs y gestion de venta

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.

Installation

Install reactJS with npm

    git clone https://github.com/EzeMuzaber/reactJS.git
    cd reactJS
    npm install
    iniciar vista de pagina: npm run dev

Enlaces

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

Tecnologias Usadas

  1. antd -- version: 5.15.3
  2. axios -- version: 1.6.8
  3. firebase -- version: 10.11.1
  4. lucide-react -- version: 0.362.0
  5. react -- version:18.2.0
  6. react-dom -- version: 18.2.0
  7. react-router-dom -- version: 6.22.3
  8. toastify -- version:10.0.5
  9. tailwindcss -- version: 3.4.1
  10. vite -- version: 5.1.6
  11. ant-design/icons -- version: 5.3.4

Funcionalidades Destacadas

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

reactjs's People

Contributors

ezemuzaber avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.