- El proyecto está separado en dos carpetas principales. En la carpta PROJECT se encuentra el front end de la aplicación y en la carpeta BACKEND hay un pequeño servidor montado con express y nodejs que sirve los datos.
cd BACKEND
npm installcd PROJECT
npm install- Abrir dos terminales simultáneamente
cd BACKEND
npm startcd PROJECT
npm run dev-
Hay dos vistas principales organizadas con Vue Router: WeeklyMeal (Plan semanal) y FavoriteMeals (Lista de platos favoritos)
-
Funcionalidad: Añadir platos a un menú semanal. Se permite borrar todo el menú semanal con un botón en el pie de página. Aunque se borre el plan semanal, los platos favoritos se mantienen en la vista de favoritos. Se puede copiar el plan semanal al portapapeles. Los platos se pueden editar, borrar, añadir a favoritos y filtrar por nombre.
-
Los días se muestran en tarjetas y al hacer click en un día se abre un modal que muestra la lista de platos de ese día. También hay un botón "Añadir" para que se puedan agregar platos para ese día desde el modal. En cada tarjeta se puede ver cuantos platos hay guardados en un día.
-
En la cabecera hay tres botónes:
-
Filter: permite filtrar los platos por nombre. Al escribir en el input, si se encuentra el plato, se muestra el día al que está asignado. Si no se encuentra, se muestra un mensaje indicándolo.
-
Favorite: Para cambiar a la vista de favoritos, donde se muestran los platos favoritos. Cada plato contiene un select para añadirlos a un día de la semana.
-
Add meal: Para añadir un plato nuevo al menú semanal, a través de un pequeño formulario compuesto por un input, un select y un botón de añadir.
-
-
El estado de la aplicación se gestiona con Pinia
-
Se utiliza Tailwind CSS para el diseño
-
No he utilizado pinia-plugin-persistedstate, ya que he preferido guardar el estado en el backend simulado con express y nodejs. De esta forma, al recargar la página, los datos se mantienen.