Proyecto:E-commerce: Mi Tienda

Introducción:

¡Bienvenido a E-commerce: Mi tienda! Este proyecto, lo he desarrollado con el framework Open Cells de BBVA, utilizando la librería LitElement y Material Design para crear una experiencia de usuario fluida y atractiva, tanto en ordenadores como en dispositivos móviles. Entre las principales características se incluyen una búsqueda integrada, un menú tipo hamburguesa para móviles, gestión de favoritos, un carrito de compras, soporte para temas de color personalizados y la opción de traducir el contenido del español al inglés. Como backend, he utilizado Firebase para datos y autenticación, y he desplegado la aplicación en Netlify para su acceso en vivo.

Tipo

  • Web App
  • Comercio electrónico

Herramientas:

  • Open Cells
  • LitElement
  • Material Design
  • CSS & HTML
  • Javascript ES6
  • Firebase
  • Git & GitHub
  • Netlify

En vivo:

Propósito del proyecto

He desarrollado este proyecto porque he tenido una oferta de trabajo que principalmente solicitaba conocimientos de Open Cells de BBVA y LitElement.

He intentado desarrollar una buena experiencia de usuario mediante una interfaz intuitiva y responsiva, que se adapte tanto a dispositivos de escritorio como móviles. He incluido la navegación, búsqueda de productos y gestión de los mismos para el usuario admin.

Mi papel en el proyecto

Investigar y aprender sobre la tecnologías como Open Cells, LitElement y Web Components en general.

Diseñar y desarrollar una aplicación utilizando Material Design y CSS personalizado.

Documentar el proceso de aprendizaje y desarrollo.

Resolver problemas y depurar errores durante el desarrollo.

Imágenes del formulario de múltiples pasos

Web stack y su explicación

Open Cells: Es un framework de desarrollo de aplicaciones web de código abierto desarrollado por BBVA. Utiliza canales de comunicación basados en la librería RxJS, y LitElement para las páginas web. Tiene su propio router y i18n para la internacionalización.

LitElement: Es una librería de desarrollo de aplicaciones web basada en Web Components. Permite crear componentes web reutilizables y personalizables con un enfoque en la simplicidad y el rendimiento.

Material Design: Es un sistema de diseño desarrollado por Google que se centra en la creación de interfaces de usuario. Proporciona una serie de directrices y componentes para facilitar el diseño y desarrollo de aplicaciones web y móviles.

JSON Server & Firebase: Se ha utilizado como servidor durante desarrollo. Luego he pasado los datos y la autenticación a Firebase y he publicado la app en Netlify.

Git & GitHub: Commits, Branches, Merge, Restore, Push. También conexión con Netlify para despliegue continuo.

Imágenes del formulario de múltiples pasos