🐧 PinguiShop

😘 Demo

📚 Sobre el proyecto

• Este proyecto corresponde al trabajo final del curso de React en Coderhouse.
• Opté por crear una tienda de Funkos porque ya tenía imágenes guardadas de un proyecto anterior.
• Este e-commerce fue creado con React, Vite, SCSS y Firebase.
• En mi caso, he nombrado de manera diferente algunos componentes opcionales requeridos:
  • Wishlist = LikeContain: con este componente, se puede crear una lista de productos que hayas marcado con "like". Desde esta lista, se pueden desmarcar o comprar los productos seleccionados.

🏗️ Componentes Creados

🛸 Vistao a la seccion de detalles

🛸 Vistao añadiendo productos al cart y a meGustan

🛸 Vistao a cart y meGusta

📘 Nota

Quedo a la espera de sugerencias.. 🐧🐧🐧

👨‍💻 Dependencias

• react : 18.2.0:

  • Biblioteca de JavaScript de código abierto para la construcción de interfaces de usuario (UI) en aplicaciones web.

  • En mi caso en mi proyecto use React+vite, por lo que use:

    ╭─pescado at rabioso in ~
    ╰─○ npm create vite@latest proyectoConReact

  • Luego:

    ╭─pescado at rabioso in ~
    ╰─○ cd proyectoConReact
    ╭─pescado at rabioso in ~/proyectoConReact on main✔
    ╰─± npm install  
    ╭─pescado at rabioso in ~/proyectoConReact on main✔
    ╰─± npm run dev  

• react-dom: 18.2.0:

  • Librería de React que proporciona una forma eficiente de actualizar el árbol de elementos de la interfaz de usuario (UI) de una página web.

    ╭─pescado at rabioso in ~/proyectoConReact on main✔
    ╰─± npm install react-dom

• react-router-dom: 6.8.0:

  • librería de React que te permite crear rutas y navegación dentro de una aplicación web de una sola página (SPA).

    ╭─pescado at rabioso in ~/proyectoConReact on main✔
    ╰─± npm install react-router-dom 

• firebase": 9.17.1:

  • Firebase es una plataforma de desarrollo de aplicaciones móviles y web, propiedad de Google, que proporciona una variedad de herramientas y servicios para el desarrollo de aplicaciones, la gestión de usuarios, el análisis y la monetización.

    ╭─pescado at rabioso in ~/proyectoConReact on main✔
    ╰─± npm install firebase 

• react-slick: 0.29.0 :

  • Es una biblioteca de carruseles (carousels) para aplicaciones web React. Me permite generar de forma facil un slider banner en mi pagina principal.

    ╭─pescado at rabioso in ~/proyectoConReact on main✔
    ╰─± npm install react-slick 

• react-toastify: 9.1.1 :

  • Es una biblioteca de notificaciones de estilo de toast para aplicaciones web React. Estas notificaciones son útiles para informar al usuario sobre cambios de estado en la aplicación, confirmar acciones, mostrar errores y más.

    ╭─pescado at rabioso in ~/proyectoConReact on main✔
    ╰─± npm install --save react-toastify 

• sass: 1.57.1:

  • Sass es un preprocesador de CSS que agrega características adicionales a los estilos CSS, como variables, anidamiento, mixins, etc.
    en mi caso intetegrare sass a mi proyecto

    ╭─pescado at rabioso in ~/proyectoConReact on main✔
    ╰─± npm i -D sass

  • Arme un script para poder crear automaticamente todo el arbol de directorio de scss, segun mi criterio.. si desea usarla, esta desponible abajo.

• Script: integrar-sas-vite.zsh

  • Si desea usarlo (si usa linux 🐧🐧), copie peguelo en su proyecto, luego dele permiso de ejecusion: chmod + x integrar-sas-vite.zsh, Luego solo ejecutelo.. ./integrar-sas-vite.zsh o bash integrar-sas-vite.zsh o zsh integrar-sas-vite.zsh.. etc..

  • Tmbien puede añadirlo (cp, mv) a /usr/bin/ o alguna ruta que se encuentre en su $PATH.. para poder llamar a el script desde donde sea que se encuentre.

    ╭─pescado at rabioso in ~/proyectoConReact on main✔
    ╰─± cp integrar-sas-vite.zsh /usr/bin/ 

• vite: 4.0.0:

  • Vite es un sistema de construcción (build system) para aplicaciones web de una sola página (SPA) y bibliotecas de JavaScript. Proporciona un entorno de desarrollo rapido y eficiente.

    ╭─pescado at rabioso in ~/proyectoConReact on main✔
    ╰─± cp npm install vite

🚀 Caracteristica

• Carrito de compras
• Integración con Firebase Firestore
• Integración con Firebase Authentication
• Responsive design
• Slider de productos destacados

📦 Instalación

• Clonar el repositorio:

  git clone https://github.com/guillenec/pinguiShop.git

• Acceder a la carpeta del proyecto:

  cd ./pinguiShop

• Instalar las dependencias:

  npm install

• Iniciar la aplicación:

  npm start

👍 Espero te guste

Espero sea de tu agrado mi contenido, tratare de tener todo publico siempre... si te sirve mi contenido no dudes en compartirlo, pero referenciame xD.

Mi contacto

👤 Guillermo Agustín Neculqueo

🏠 Homepage

✉️ guillermoneculqueo@gmail