🍔Burger Queen👑

Índice

• 1. Resumen del proyecto
• 2. Historias de usuario
• 3. Objetivos de aprendizaje

---

1. Resumen del proyecto

El restaurante 🍔Burguer Queen👑, necesita una interfaz en la que puedan tomar pedidos usando una tablet 📱, y enviarlos a la cocina para que se preparen en forma ordenada y eficiente.

El usuario puede ir eligiendo y agregando los productos, y la interfaz va mostrando el resumen del pedido con el total a pagar.

---

2. Historias de usuario

📋 2.1. Historia de usuario 1:

Meserx debe poder tomar pedido de cliente

• 🤵Yo como meserx.
• 📝Quiero tomar el pedido de un cliente.
• 💡 Para no depender de mi mala memoria, para saber cuánto cobrar, y enviarlo a la cocina para evitar errores y que se puedan ir preparando en orden.

Criterios de aceptación

• ✅ Anotar nombre de cliente.
• ✅ Agregar productos al pedido.
• ✅ Eliminar productos.
• ✅ Ver resumen y el total de la compra.
• ✅ Enviar pedido a cocina (guardar en una base de datos).
• ✅ Se ve y funciona bien en una tablet.

📋 2.2. Historia de usuario 2:

Jefe de cocina debe ver los pedidos

• 👩‍🍳 Yo como jefx de cocina
• 👀 Quiero ver los pedidos de los clientes en orden y marcar cuáles están listos
• 🍽 Para saber qué se debe cocinar y avisar a lxs meserxs que un pedido está listo para servirlo a un cliente.

Criterios de aceptación

• ✅ Ver los pedidos ordenados según se van haciendo.

• ✅ Marcar los pedidos que se han preparado y están listos para servirse.

• ✅ Ver el tiempo que tomó prepara el pedido desde que llegó hasta que se marcó como completado.

  

📋 2.3 Historia de usuario 3:

Meserx debe ver pedidos listos para servir

• 🤵 Yo como meserx.
• 👀 Quiero ver los pedidos que están preparados.
• 🍽 Para entregarlos rápidamente a los clientes que las hicieron.

Criterios de aceptación

• ✅ Ver listado de pedido listos para servir.
• ✅ Marcar pedidos que han sido entregados.

3. Objetivos de aprendizaje

📚 HTML

• Uso de HTML semántico

📚 CSS

• Uso de selectores de CSS
• Modelo de caja (box model): borde, margen, padding
• Uso de flexbox en CSS
• Uso de CSS Grid Layout
• Uso de media queries

📚 JavaScript

• Arrays (arreglos)
• Objetos (key, value)
• Diferenciar entre tipos de datos primitivos y no primitivos
• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
• Funciones (params, args, return)
• Pruebas unitarias (unit tests)
• Pruebas asíncronas
• Uso de mocks y espías
• Módulos de ECMAScript (ES Modules)
• Uso de linter (ESLINT)
• Uso de identificadores descriptivos (Nomenclatura y Semántica)
• Diferenciar entre expresiones (expressions) y sentencias (statements)
• Callbacks
• Promesas

📚 Control de Versiones (Git y GitHub)

• Git: Instalación y configuración
• Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
• Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)
• GitHub: Creación de cuenta y repos, configuración de llaves SSH
• GitHub: Despliegue con GitHub Pages
• GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
• GitHub: Organización en Github (projects | issues | labels | milestones | releases)

📚 UX (User eXperience)

• Diseñar la aplicación pensando en y entendiendo al usuario
• Crear prototipos para obtener feedback e iterar
• Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
• Planear y ejecutar tests de usabilidad

📚 Firebase

• Firebase Auth
• Firestore

📚 React

• JSX
• Componentes y propiedades (props)
• Manejo de eventos
• Listas y keys
• Renderizado condicional
• Elevación de estado
• Hooks
• CSS modules
• React Router