Ecommerce

Desarrolla el frontend de una página web una ecommerce, basada en una fake API donde se registran los productos, para simular la interacción con la base de datos y los servicios externos. Esta fake API permitirá al equipo de desarrollo trabajar en el Front-end y en la lógica de la aplicación sin depender de datos reales ni conexiones a sistemas externos. Pertenecerás a un equipo de desarrollo, en el cual deberás desempeñar un rol como developer y llegar a un mínimo producto viable funcional de la aplicación que esté propuesta en el brief de proyecto.

Contexto del proyecto

Como desarrollador/a realizar el diseño y desarrollo de un ecommerce de temática libre. Se tendrá en cuenta el diseño y la experiencia de usuario así como los requerimientos técnicos. Hacemos la maquetación de cada una de las vistas en HTML y CSS (se permite uso de preprocesadores y frameworks de CSS): una vista principal con menu, header, sección de productos, una vista del producto detallado, una vista del carrito y el dashboard de Admin. Hacemos la lógica del carrito de la compra utilizando métodos de arrays en Javascript. Consumimos la fake API usando Json Server para pintar todos los productos y hacer el panel de Admin con el CRUD de productos. Ubicamos nuestra tienda usando Web API Geolocation.

Requerimientos técnicos (MVP):

• El proyecto se realizará siguiendo el marco de trabajo SCRUM.
• El desarrollo tendrá tres sprints de una semana.
• Realizar un planning utilizando un tablero kanban (trello, jira o la pared), y product backlog respetando las fechas de las entregas.
• Es necesario hacer historias de usuario y diagrama de flujo.
• Se requiere mockup en Figma y hay que elegir dos resoluciones (Escritorio y móvil).
• El desarrollo debe ser con HTML, CSS y Javascript vanilla.
• El desarrollo debe estar en inglés al 100%.
• El desarrollo debe ser responsive con uso de la estrategia Mobile First.
• El frontend tiene que estar testeado.
• Las funciones básicas de la fake API tienen que estar testadas.
• El código debe ser ordenado, indentado, semántico y con buenas prácticas de desarrollo: clean code.
• El desarrollo debe contar con las siguientes vistas:
  • Home (con menú de navegación, header, sección de productos, footer)
  • Vista del producto detallado
  • Vista del carrito de compra
  • Dashboard del Admin (CRUD de productos)

Extras:

Se puede usar frameworks y preprocesadores de CSS

Definición de los sprints:

Es importante respetar el orden de requerimientos de cada sprint. En caso de duda con las prioridades se debe hablar con el cliente.

Los sprints se dividen en las siguientes funcionalidades:

Sprint I:

• Menú
• Header
• Sección productos
• Footer
• Vista del producto detallado
• Formulario Crear/Editar Producto

Sprint II:

• Filtro por nombre de producto (búsqueda)
• Filtro por categoría de productos
• Consumo de fake API usando Json Server para el fetch de productos.
• Carrito de compra (añadir producto, manipular cantidad de producto, quitar producto).

Sprint III:

• Consumo de fake API usando Json Server para el CRUD de productos (agregar, eliminar y actualizar los productos que se venden).
• Implementación de funcionalidades del panel de admin.
• Separación de vistas de usuario y administrador usando Json Server.
• Ubicación de tiendas o puntos de venta cercanos (usando Geolocation API)

Modalidades pedagógicas

• El desarrollo se hará en grupo.
• El proyecto se desarrollará con el marco de trabajo SCRUM.
• Cliente: David Picó.
• Se permite y se incentiva a la colaboración con otros equipos de desarrollo.

Modalidades de evaluación

• Presentación siguiendo los pasos explicados en clase (Cómo presentar un proyecto).

Entregables

• Enlace del Product backlog.
• Repositorio con el fichero README explicando:
• Descripción del proyecto (con vistas)
• Link del despliegue
• Mockup (enlace Figma)
• Herramientas utilizadas
• Cómo instalar el proyecto en el ordenador (local)

¿Qué competencias se evalúan?

• Maquetar una web nivel 3
• Desarrollar una interfaz de usuario web dinámica nivel 3

Inspiración:

https://www.cyberclick.es/numerical-blog/que-es-un-ecommerce-tipos-como-crearlo-y-ejemplos https://www.mercadona.es/ https://es.wallapop.com/

Recursos:

https://www.freecodecamp.org/news/json-server-for-frontend-development/ https://developer.mozilla.org/en-US/docs/Web/API https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API