{"id":26334524,"url":"https://github.com/dianaclabel/burger-queen-api-client","last_synced_at":"2026-04-09T02:01:23.914Z","repository":{"id":180810433,"uuid":"665561976","full_name":"dianaclabel/burger-queen-api-client","owner":"dianaclabel","description":null,"archived":false,"fork":false,"pushed_at":"2023-09-18T06:39:44.000Z","size":976,"stargazers_count":0,"open_issues_count":5,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-16T00:19:37.425Z","etag":null,"topics":["api-client","css","hooks","laboratoria","react","tailwind","typescript","use-context"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Laboratoria/DEV006-burger-queen-api-client","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dianaclabel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-12T13:30:09.000Z","updated_at":"2023-08-31T06:39:55.000Z","dependencies_parsed_at":"2023-07-12T23:37:15.746Z","dependency_job_id":null,"html_url":"https://github.com/dianaclabel/burger-queen-api-client","commit_stats":null,"previous_names":["dianaclabel/burger-queen-api-client"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dianaclabel/burger-queen-api-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dianaclabel%2Fburger-queen-api-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dianaclabel%2Fburger-queen-api-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dianaclabel%2Fburger-queen-api-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dianaclabel%2Fburger-queen-api-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dianaclabel","download_url":"https://codeload.github.com/dianaclabel/burger-queen-api-client/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dianaclabel%2Fburger-queen-api-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31581864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"online","status_checked_at":"2026-04-09T02:00:06.848Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-client","css","hooks","laboratoria","react","tailwind","typescript","use-context"],"created_at":"2025-03-16T00:19:24.593Z","updated_at":"2026-04-09T02:01:23.899Z","avatar_url":"https://github.com/dianaclabel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Burger Queen (API Client)\n\n## Índice\n\n* [1. Preámbulo](#1-preámbulo)\n* [2. Resumen del proyecto](#2-resumen-del-proyecto)\n* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje)\n* [4. Consideraciones](#4-consideraciones)\n* [5. Criterios de aceptación del proyecto](#5-criterios-de-aceptación-del-proyecto)\n* [6. Despliegue](#6-despliegue)\n* [7. Pistas / tips](#7-pistas--tips)\n\n***\n\n## 1. Preámbulo\n\n[React](https://es.react.dev/) y [Angular](https://angular.io/)\nson algunos de los _frameworks_ y _librerías_ de JavaScript más utilizados por\nlxs desarrolladorxs alrededor del mundo, y hay una razón para eso.\nEn el contexto del navegador, [_mantener la interfaz sincronizada con el estado\nes difícil_](https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445).\nAl elegir un _framework_ o _librería_ para nuestra interfaz, nos apoyamos en una\nserie de convenciones e implementaciones _probadas_ y _documentadas_ para\nresolver un problema común a toda interfaz web. Esto nos permite concentrarnos\nmejor (dedicar más tiempo) en las características _específicas_ de\nnuestra aplicación.\n\nCuando elegimos una de estas tecnologías no solo importamos un pedacito de\ncódigo para reusarlo (lo cuál es un gran valor per se), si no que adoptamos una\n**arquitectura**, una serie de **principios de diseño**, un **paradigma**, unas\n**abstracciones**, un **vocabulario**, una **comunidad**, etc.\n\nComo desarrolladora Front-end, estos kits de desarrollo pueden resultarte\nde gran ayuda para implementar rápidamente características de los proyectos en\nlos que trabajes.\n\n## 2. Resumen del proyecto\n\nUn pequeño restaurante de hamburguesas, que está creciendo, necesita un\nsistema a través del cual puedan tomar pedidos usando una _tablet_, y enviarlos\na la cocina para que se preparen ordenada y eficientemente.\n\n![burger-queen](https://user-images.githubusercontent.com/110297/42118136-996b4a52-7bc6-11e8-8a03-ada078754715.jpg)\n\nEste proyecto tiene dos áreas: interfaz (cliente) y API (servidor). Nuestra\nclienta nos ha solicitado desarrollar la interfaz que se integre con una API.\n\nEsta vez tenemos un proyecto 100% por encargo. Si bien siempre puedes (y debes)\nhacer sugerencias de mejoras y/o cambios, muchas veces trabajarás en proyectos\nen los que primero hay que asegurarse de cumplir con lo requerido.\n\nEsta es la información que tenemos de la clienta:\n\n\u003e Somos **Burguer Queen**, una cadena de comida 24hrs.\n\u003e\n\u003e Nuestra propuesta de servicio 24hrs ha tenido muy buena acogida y, para\n\u003e seguir creciendo, necesitamos un sistema que nos ayude a tomar los pedidos de\n\u003e nuestrxs clientxs.\n\u003e\n\u003e Tenemos 2 menús: uno muy sencillo para el desayuno:\n\u003e\n\u003e | Ítem                      |Precio $|\n\u003e |---------------------------|------|\n\u003e | Café americano            |    5 |\n\u003e | Café con leche            |    7 |\n\u003e | Sandwich de jamón y queso |   10 |\n\u003e | Jugo de frutas natural    |    7 |\n\u003e\n\u003e Y otro menú para el resto del día:\n\u003e\n\u003e | Ítem                      |Precio|\n\u003e |---------------------------|------|\n\u003e |**Hamburguesas**           |   **$**   |\n\u003e |Hamburguesa simple         |    10|\n\u003e |Hamburguesa doble          |    15|\n\u003e |**Acompañamientos**        |   **$**   |\n\u003e |Papas fritas               |     5|\n\u003e |Aros de cebolla            |     5|\n\u003e |**Para tomar**             |   **$**   |\n\u003e |Agua 500ml                 |     5|\n\u003e |Agua 750ml                 |     7|\n\u003e |Bebida/gaseosa 500ml       |     7|\n\u003e |Bebida/gaseosa 750ml       |     10|\n\u003e\n\u003e Nuestrxs clientxs son bastante indecisos, por lo que es muy común que cambien\n\u003e el pedido varias veces antes de finalizarlo.\n\nLa interfaz debe mostrar los dos menús (desayuno y resto del día), cada uno\ncon todos sus _productos_. La usuaria debe poder ir eligiendo qué _productos_\nagregar y la interfaz debe ir mostrando el _resumen del pedido_ con el\ncosto total.\n\n![out](https://user-images.githubusercontent.com/110297/45984241-b8b51c00-c025-11e8-8fa4-a390016bee9d.gif)\n\nAdemás la clienta nos ha dado un [link a la documentación](https://app.swaggerhub.com/apis-docs/ssinuco/BurgerQueenAPI/2.0.0)\nque especifica el comportamiento esperado de la API HTTP que deberás consumir.\nAhí puedes encontrar todos los detalles de los _endpoints_, como por ejemplo\nqué parámetros esperan, qué deben responder, etc.\n\nEl objetivo principal de es aprender a construir una _interfaz web_ usando\nel _framework_ elegido (React, Angular o Vue). Todos estos frameworks de\nFront-end tratan de solucionar el mismo problema: **cómo mantener la interfaz\ny el estado sincronizados**. Así que esta experiencia espera familiarizarte con\nel concepto de _estado de pantalla_, y como cada cambio sobre el estado se va\na ir reflejando en la interfaz (por ejemplo, cada vez que agregamos un _producto_\na un _pedido_, la interfaz debe actualizar la lista del pedido y el total).\n\n## 3. Objetivos de aprendizaje\n\nReflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.\n\n### HTML\n\n- [ ] **Uso de HTML semántico**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html)\n  * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)\n\u003c/p\u003e\u003c/details\u003e\n\n### CSS\n\n- [ ] **Uso de selectores de CSS**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css)\n  * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Modelo de caja (box model): borde, margen, padding**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Box Model \u0026 Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display)\n  * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)\n  * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\n  * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display)\n  * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Uso de flexbox en CSS**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n  * [Flexbox Froggy](https://flexboxfroggy.com/#es)\n  * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Uso de CSS Grid Layout**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [A Complete Guide to Grid - CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)\n  * [Grids - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Uso de media queries**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [CSS media queries - MDN](https://developer.mozilla.org/es/docs/CSS/Media_queries)\n\u003c/p\u003e\u003c/details\u003e\n\n### JavaScript\n\n- [ ] **Pruebas unitarias (unit tests)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Pruebas asíncronas**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Tests de código asincrónico con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/asynchronous)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Uso de mocks y espías**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Manual Mocks con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/manual-mocks)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Módulos de ECMAScript (ES Modules)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import)\n  * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Uso de linter (ESLINT)**\n\n- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)**\n\n### Control de Versiones (Git y GitHub)\n\n- [ ] **Git: Instalación y configuración**\n\n- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)**\n\n- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)**\n\n- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH**\n\n- [ ] **GitHub: Despliegue con GitHub Pages**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Sitio oficial de GitHub Pages](https://pages.github.com/)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)**\n\n- [ ] **GitHub: Organización en Github (projects | issues | labels | milestones | releases)**\n\n### HTTP\n\n- [ ] **Consulta o petición (request) y respuesta (response).**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Generalidades del protocolo HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Overview)\n  * [Mensajes HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Messages)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Cabeceras (headers)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [HTTP headers - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Headers)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Cuerpo (body)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Cuerpo de Mensajes HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Messages#cuerpo)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Verbos HTTP**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Métodos de petición HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Methods)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Códigos de status de HTTP**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Códigos de estado de respuesta HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Status)\n  * [The Complete Guide to Status Codes for Meaningful ReST APIs - dev.to](https://dev.to/khaosdoctor/the-complete-guide-to-status-codes-for-meaningful-rest-apis-1-5c5)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Encodings y JSON**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Introducción a JSON - Documentación oficial](https://www.json.org/json-es.html)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **CORS (Cross-Origin Resource Sharing)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Control de acceso HTTP (CORS) - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/CORS)\n\u003c/p\u003e\u003c/details\u003e\n\n### Angular\n\n- [ ] **Components \u0026 templates**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Angular Components Overview - Documentación oficial (en inglés)](https://angular.io/guide/component-overview)\n  * [Introduction to components and templates - Documentación oficial (en inglés)](https://angular.io/guide/architecture-components#introduction-to-components)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Directivas estructurales (ngIf / ngFor)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Writing structural directives - Documentación oficial (en inglés)](https://angular.io/guide/structural-directives)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **@Input | @Output**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Component interaction - Documentación oficial (en inglés)](https://angular.io/guide/component-interaction#component-interaction)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Creación y uso de servicios**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Providing services - Documentación oficial (en inglés)](https://angular.io/guide/architecture-services#providing-services)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Manejo de rutas**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [In-app navigation: routing to views - Documentación oficial (en inglés)](https://angular.io/guide/router)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Creación y uso de Observables.**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Observables in Angular - Documentación oficial (en inglés)](https://angular.io/guide/observables-in-angular)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Uso de HttpClient**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Communicating with backend services using HTTP - Documentación oficial (en inglés)](https://angular.io/guide/http)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Estilos de componentes (ngStyle / ngClass)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Template syntax - Documentación oficial (en inglés)](https://angular.io/guide/template-syntax#built-in-directives)\n\u003c/p\u003e\u003c/details\u003e\n\n### React\n\n- [ ] **JSX**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Presentando JSX - Documentación oficial](https://es.react.dev/learn/writing-markup-with-jsx)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Componentes y propiedades (props)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Componentes y propiedades - Documentación oficial](https://es.react.dev/learn/passing-props-to-a-component)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Manejo de eventos**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Manejando eventos - Documentación oficial](https://es.react.dev/learn/responding-to-events)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Listas y keys**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Listas y keys - Documentación oficial](https://es.react.dev/learn/rendering-lists)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Renderizado condicional**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Renderizado condicional - Documentación oficial](https://es.react.dev/learn/conditional-rendering)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Elevación de estado**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Levantando el estado - Documentación oficial](https://es.react.dev/learn/sharing-state-between-components)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Hooks**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Presentando Hooks - Documentación oficial](https://es.react.dev/reference/react)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **CSS modules**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Adding a CSS Modules Stylesheet - Documentación de Create React App (en inglés)](https://vitejs.dev/guide/features.html#css-modules)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **React Router**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Quick Start - Documentación oficial (en inglés)](https://reactrouter.com/en/main/start/tutorial)\n\u003c/p\u003e\u003c/details\u003e\n\n### Vue\n\n- [ ] **Instancia de Vue.js**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [La instancia Vue - Documentación oficial](https://es.vuejs.org/v2/guide/instance.html)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Datos y métodos**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Datos y Métodos - Documentación oficial](https://es.vuejs.org/v2/guide/instance.html#Datos-y-Metodos)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Uso y creación de componentes**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Conceptos Básicos de Componentes - Documentación oficial](https://es.vuejs.org/v2/guide/components.html)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Props**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Pasando datos a componentes secundarios con Props - Documentación oficial](https://es.vuejs.org/v2/guide/components.html#Pasando-datos-a-componentes-secundarios-con-Props)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Directivas (v-bind | v-model)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [v-bind - Documentación oficial](https://es.vuejs.org/v2/api/#v-bind)\n  * [Binding en Formularios - Documentación oficial](https://es.vuejs.org/v2/guide/forms.html)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Iteración (v-for)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Mapeando una matriz a elementos con v-for - Documentación oficial](https://es.vuejs.org/v2/guide/list.html#Mapeando-una-matriz-a-elementos-con-v-for)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Eventos (v-on)**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Manejo de eventos - Documentación oficial](https://es.vuejs.org/v2/guide/events.html)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Propiedades Computadas y Observadores**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Propiedades Computadas y Observadores](https://es.vuejs.org/v2/guide/computed.html)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Routing**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Getting Started - Documentación oficial de Vue Router](https://router.vuejs.org/guide/#html)\n\u003c/p\u003e\u003c/details\u003e\n\n- [ ] **Clases y Estilos**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Enlace Clases y Estilos - Documentación oficial](https://es.vuejs.org/v2/guide/class-and-style.html)\n\u003c/p\u003e\u003c/details\u003e\n\n### Bases de datos\n\n- [ ] **Modelado de datos**\n\n### Centrado en el usuario\n\n- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro**\n\n### Diseño de producto\n\n- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones**\n\n- [ ] **Seguir los principios básicos de diseño visual**\n\n### Investigación\n\n- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad**\n\n  \u003cdetails\u003e\u003csummary\u003eLinks\u003c/summary\u003e\u003cp\u003e\n\n  * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15)\n  * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7)\n\u003c/p\u003e\u003c/details\u003e\n\n## 4. Consideraciones\n\nEste proyecto se debe \"resolver\" en duplas y puedes elegir entre\nestas tres opciones la manera en que trabajarás con el backend.\n\n1. Consumiendo una API que desarrollarán tus compañeras.\n2. Consumiendo esta\n[API](https://github.com/Laboratoria/burger-queen-api-mock/)\nque desarrollamos para ti.\n3. Mockeando la API, puedes utilizar herramientas como\n[nock](https://github.com/nock/nock),\n[json-server](https://www.npmjs.com/package/json-server)\no [mockoon](https://mockoon.com).\n\nEl rango de tiempo estimado para completar el proyecto es de 3 a 5 Sprints.\n\nTrabaja en una historia hasta terminarla antes de pasar a la siguiente. Trabaja\nhasta la historia que puedas en el tiempo especificado.\n\nLa lógica del proyecto debe estar implementada completamente en JavaScript\n(ES6+), HTML y CSS y empaquetada de manera automatizada.\n\nEn este proyecto Sí está permitido usar librerías o frameworks\n(debes elegir entre [React](https://es.react.dev/) o\n[Angular](https://angular.io/)).\n\nLa aplicación debe ser un _Single Page App_. Los pedidos los tomaremos desde una\n_tablet_, pero **no queremos una app nativa**, sino una web app que sea\n**mobile-first**.\n\nNecesitamos pensar bien en el aspecto UX de de quienes van a tomar los pedidos,\n el tamaño y aspecto de los botones, la visibilidad del estado actual del\n pedido, etc.\n\nLa aplicación desplegada debe tener 80% o más el las puntuaciones de\nPerformance, Progressive Web App, Accessibility y Best Practices de Lighthouse.\n\nLa aplicación debe hacer uso de `npm-scripts` y contar con scripts `start`,\n`test`, `build` y `deploy`, que se encarguen de arrancar, correr las pruebas,\nempaquetar y desplegar la aplicación respectivamente.\n\nLos tests unitarios deben cubrir un mínimo del 90% de _statements_, _functions_,\n_lines_ y _branches_.\n\nPor otro lado, deberás definir la estructura de carpetas y archivos que consideres\nnecesaria. Puedes guiarte de las convenciones del _framework_ elegido. Por ende,\nlos _tests_ y el _setup_ necesario para ejecutarlos, serán hechos por ti.\n\n## 5. Criterios de aceptación del proyecto\n\n### Definición del producto\n\nEl [_Product Owner_](https://www.youtube.com/watch?v=r2hU7MVIzxs\u0026t=202s)\nnos presenta este _backlog_ que es el resultado de su trabajo con el clientx\nhasta hoy.\n\n***\n\n#### [Historia de usuario 1] Mesero/a debe poder ingresar al sistema, si el admin ya le ha asignado credenciales\n\nYo como meserx quiero poder ingresar al sistema de pedidos.\n\n##### Criterios de aceptación\n\nLo que debe ocurrir para que se satisfagan las necesidades del usuario.\n\n* Acceder a una pantalla de login.\n* Ingresar email y contraseña.\n* Recibir mensajes de error comprensibles, dependiendo de cuál es el error\n  con la información ingresada.\n* Ingresar al sistema de pedidos si las crendenciales son correctas.\n\n##### Definición de terminado\n\nLo acordado que debe ocurrir para decir que la historia está terminada.\n\n* Debes haber recibido _code review_ de al menos una compañera.\n* Haces _test_ unitarios y, además, has testeado tu producto manualmente.\n* Hiciste _tests_ de usabilidad e incorporaste el _feedback_ del usuario.\n* Desplegaste tu aplicación y has etiquetado tu versión (git tag).\n\n***\n\n#### [Historia de usuario 2] Mesero/a debe poder tomar pedido de cliente/a\n\nYo como meserx quiero tomar el pedido de unx clientx para no depender de mi mala\nmemoria, para saber cuánto cobrar, y enviarlo a la cocina para evitar errores y\nque se puedan ir preparando en orden.\n\n##### Criterios de aceptación\n\nLo que debe ocurrir para que se satisfagan las necesidades del usuario\n\n* Anotar nombre de clientx.\n* Agregar productos al pedido.\n* Eliminar productos.\n* Ver resumen y el total de la compra.\n* Enviar pedido a cocina (guardar en alguna base de datos).\n* Se ve y funciona bien en una _tablet_\n\n##### Definición de terminado\n\nLo acordado que debe ocurrir para decir que la historia está terminada.\n\n* Debes haber recibido _code review_ de al menos una compañera.\n* Haces _test_ unitarios y, además, has testeado tu producto manualmente.\n* Hiciste _tests_ de usabilidad e incorporaste el _feedback_ del usuario.\n* Desplegaste tu aplicación y has etiquetado tu versión (git tag).\n\n***\n\n#### [Historia de usuario 3] Jefe de cocina debe ver los pedidos\n\nYo como jefx de cocina quiero ver los pedidos de lxs clientxs en orden y\nmarcar cuáles están listos para saber qué se debe cocinar y avisar a lxs meserxs\nque un pedido está listo para servirlo a un clientx.\n\n##### Criterios de aceptación\n\n* Ver los pedidos ordenados según se van haciendo.\n* Marcar los pedidos que se han preparado y están listos para servirse.\n* Ver el tiempo que tomó prepara el pedido desde que llegó hasta que se\n  marcó como completado.\n\n##### Definición de terminado\n\n* Debes haber recibido _code review_ de al menos una compañera.\n* Haces _test_ unitarios y, además, has testeado tu producto manualmente.\n* Hiciste _tests_ de usabilidad e incorporaste el _feedback_ del usuario.\n* Desplegaste tu aplicación y has etiquetado tu versión (git tag).\n\n***\n\n#### [Historia de usuario 4] Meserx debe ver pedidos listos para servir\n\nYo como meserx quiero ver los pedidos que están preparados para entregarlos\nrápidamente a lxs clientxs que las hicieron.\n\n##### Criterios de aceptación\n\n* Ver listado de pedido listos para servir.\n* Marcar pedidos que han sido entregados.\n\n##### Definición de terminado\n\n* Debes haber recibido _code review_ de al menos una compañera.\n* Haces _test_ unitarios y, además, has testeado tu producto manualmente.\n* Hiciste _tests_ de usabilidad e incorporaste el _feedback_ del usuario.\n* Desplegaste tu aplicación y has etiquetado tu versión (git tag).\n* Los datos se deben mantener íntegros, incluso después de que un pedido ha\n  terminado. Todo esto para poder tener estadísticas en el futuro.\n\n***\n\n#### [Historia de usuario 5] Administrador(a) de tienda debe administrar a sus trabajadorxs\n\nYo como administrador(a) de tienda quiero gestionar a los usuarios de\nla plataforma para mantener actualizado la informacion de mis trabajadorxs.\n\n##### Criterios de aceptación\n\n* Ver listado de trabajadorxs.\n* Agregar trabajadorxs.\n* Eliminar trabajadoxs.\n* Actualizar datos de trabajadorxs.\n\n##### Definición de terminado\n\n* Debes haber recibido _code review_ de al menos una compañera.\n* Haces _test_ unitarios y, además, has testeado tu producto manualmente.\n* Hiciste _tests_ de usabilidad e incorporaste el _feedback_ del usuario.\n* Desplegaste tu aplicación y has etiquetado tu versión (git tag).\n\n***\n\n#### [Historia de usuario 6] Administrador(a) de tienda debe administrar a sus productos\n\nYo como administrador(a) de tienda quiero gestionar los productos\npara mantener actualizado el menú.\n\n##### Criterios de aceptación\n\n* Ver listado de productos.\n* Agregar productos.\n* Eliminar productos.\n* Actualizar datos de productos.\n\n##### Definición de terminado\n\n* Debes haber recibido _code review_ de al menos una compañera.\n* Haces _test_ unitarios y, además, has testeado tu producto manualmente.\n* Hiciste _tests_ de usabilidad e incorporaste el _feedback_ del usuario.\n* Desplegaste tu aplicación y has etiquetado tu versión (git tag).\n\n***\n\n## 6. Despliegue\n\nPuedes elegir el proveedor (o proveedores) que prefieras junto\ncon el mecanismo de despligue y estrategia de alojamiento.\nRecuerda que si mockeaste la API, también tienes que desplegarla.\nTe recomendamos explorar las siguientes opciones:\n\n* [Vercel](https://vercel.com/) es una plataforma de _despliegue_ que\nnos permite desplegar nuestra aplicación web estática (HTML, CSS y\nJavaScript) y también nos permite desplegar aplicaciones web que se\nejecutan en el servidor (Node.js).\n* [Netlify](https://www.netlify.com/) al igual que Vercel, es una\nplataforma de _despliegue_ que nos permite desplegar nuestra aplicación\nweb estática (HTML, CSS y JavaScript) y también nos permite desplegar\naplicaciones web que se ejecutan en el servidor (Node.js).\n\n## 7. Pistas / Tips\n\nSúmate al canal de Slack\n[#project-bq-api-client](https://claseslaboratoria.slack.com/archives/C04A0GS1WJX)\npara conversar y pedir ayuda del proyecto.\n\n### Frameworks / libraries\n\n* [React](https://react.dev/)\n* [Angular](https://angular.io/)\n\n### Herramientas\n\n* [npm-scripts](https://docs.npmjs.com/misc/scripts)\n* [Babel](https://babeljs.io/)\n* [webpack](https://webpack.js.org/)\n* [json-server](https://www.npmjs.com/package/json-server)\n* [mockoon](https://mockoon.com)\n* [nock](https://github.com/nock/nock)\n\n### PWA\n\n* [Tu primera Progressive Web App - Google developers](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=es)\n* [Progressive Web Apps - codigofacilito.com](https://codigofacilito.com/articulos/progressive-apps)\n* [Usando Service Workers - MDN](https://developer.mozilla.org/es/docs/Web/API/Service_Worker_API/Using_Service_Workers)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdianaclabel%2Fburger-queen-api-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdianaclabel%2Fburger-queen-api-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdianaclabel%2Fburger-queen-api-client/lists"}