SaraiRojas / Burger-queen

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Burger Queen Api Client

Índice

1. Resumen del proyecto

Este proyecto consiste en una interfaz creada con React, a través de la cual un pequeño restaurante de hamburguesas puede tomar pedidos usando una tablet, y enviarlos a la cocina para que se preparen ordenada y eficientemente.

2. Experiencia UX

Esta interfaz esta hecha con la intencion de poder centralizar las tareas de los empleados del restaurante Burger Queen, de manera que los trabajadores puedan llevar a cabo sus tareas como Administrador, Mesero y Jefe de cocina, con las herramientas que la App le permite manejar como son:

  • Para el administrador tener una base de datos de empleados, donde puede ver, agregar, editar y quitar a los empleados segun su necesidad, a la hora de editar su menu, tambien le permite verlo, editarlo y quitar elementos.

  • Para el Mesero le permite tomar ordenes y escribir el nombre del cliente y la mesa, asi como visualizar los pedidos hechos, los pedidos listos para servir y todos los pedidos en general.

  • Para el Chef le permite ver los pedidos hechos y los pedidos listos para servir.

¿Que problema resuelve? Hace mas eficiente y rapida las tareas de los empleados como la toma de ordenes, el checado de las ordenes listas, y la administracion de empleados y menús.

(Volver al inicio)

3. Solución a los usuarios

Las historias de usuario en las que se basa el proyecto para darle solución al problema, son las siguientes:

historias-usuario-BQ

(Volver al inicio)

4. Prototipos

Para realizar dicho proyecto se llevó a cabo un prototipo de baja y alta fidelidad con el que se buscaba:

  • Brindarle al usuario una interfaz fácil de comprender
  • Un flujo de pantallas optimo y coherente
  • Un prototipo que pudiera ser iterable, creativo y representativo del mundo Tech.

4.1 Baja fidelidad (Boceto)

  • Aquí creamos el primer prototipo en papel el cual fue una guía de como quedaría la interfaz de acuerdo a componentes y elementos, y nuestro siguiente paso fue pedir feedback a otros usuarios para mejorar el prototipo.

prototipo-baja-fidelidad-admin

prototipo-baja-fidelidad-waiter-chef

(Volver al inicio)

4.2 Alta fidelidad (figma)

  • Creamos un prototipo en Figma el cual representa de manera visual el producto final de la página, esta fue la base para que pudieramos comenzar a maquetar el sistema en HTML, CSS & JS y obtuvimos el siguiente feedback: Ajuste en el tamaño de letras, fijar el hover en los botones del menu

El prototipo se pueden vizualizar en el siguiente link.


(Volver al inicio)

5. Prototipo final

5.1 Desktop

burger-queen-view-desktop

burger-queen-view-menu-desktop

5.2 Tablet

5.2.1 Vistas comunes

burger-queen-login

burger-queen-home

5.2.1 Vistas Admin

burger-queen-staff

burger-queen-menu-admin

burger-queen-menu-lunch-admin

5.2.1 Vistas Mesero

burger-queen-menu-waiter

burger-queen-menuLunch-waiter

burger-queen-order-waiter

burger-queen-server-waiter

burger-queen-order-waiter

5.2.1 Vistas Chef

burger-queen-order-chef

burger-queen-serve-chef

5.3 Mobile

burger-queen-menu-view-mobile

(Volver al inicio)

6. Tecnologías

(Techs Skills)

  • Trello
  • Figma
  • Maze
  • HTML5
  • CSS
  • JS
  • Firebase v.9.7.0
  • React v.18.1.0
  • React-router-dom v.6.3.0
  • JSON-Server v.0.17.0
  • Jest

7. Conocimientos reforzados

🖥 Semantica (HTML)
🖥 CSS (Flexbox CSS, CSS Grid)
🖥 Box Model
🖥 Responsive Web Design
🖥 Uso de funciones
🖥 Ciclos (ForEach)
🖥 Condicionales (If, else, else if)
🖥 Array Metods (.filter/ .map/ .reduce)
🖥 Uso de Strings, Array y Objetos
🖥 Manejo de Data por medio de Objetos
🖥 Uso de datos primitivos
🖥 Pruebas unitarias con Jest y Testing Library

8. Conocimientos adquiridos

💻 React
💻 JSX
💻 Manejo de State
💻 Manejo de Hooks
💻 List, Key
💻 Componentes Funcionales
💻 Manejo de Eventos
💻 Renderizado Condicional
💻 React Router Dom
💻 CSS module
💻 Material UI
💻 Peticiones a una Api Mockeada
💻 JSON-Server
💻 Firebase
💻 Autentication
💻 Firestore
💻 Pruebas asincronas
💻 Promesas
💻 Async - await
💻 Test Usuabilidad Maze
💻 Git Tags

EXTRAS

⌨ Conceptos de UI/UX
⌨ Manejo de Figma
⌨ Markdown

9. Habilidades blandas

(Life Skills)

🦾 Colaboración
🦾 Profesionalismo
🦾 Autoaprendizaje
🦾 Comunicación eficaz

10. Autores

Desarrolladoras Redes
Margarita García
Skarlet Araque
Sarai Rojas

(Volver al inicio)

11. Licencia

Este proyecto está bajo la Licencia de Maggie Sarmiento, Sarai Rojas y Skarlet Araque (BurgerQueen❤).

12. Recursos

(Volver al inicio)

About


Languages

Language:JavaScript 91.8%Language:CSS 6.7%Language:HTML 1.6%