Este es un proyecto de Next.js creado desde cero con npx create-next-app, para la gestión de Menús de restaurantes y otras entidades dedicadas a la gastronomía.

1. Desarrollar una aplicación web de planificación de menús con React, TypeScript y NodeJS.
2. Utilizar librerías de UI/UX de elección para mejorar la experiencia del usuario.

• Diseño y Estructura:

  1. Crear una aplicación web con diseño responsive y atractivo.
  2. Incluir encabezado, título y menú de navegación.
  3. Diseñar secciones para la creación y visualización de menús semanales.

• Funcionalidad (JavaScript):

  1. Permitir a los usuarios crear menús semanales personalizados.
  2. Implementar búsqueda y adición de recetas a los menús desde una fuente simulada.
  3. Habilitar la edición y eliminación de elementos de los menús.
  4. Generar listas de compras basadas en los elementos seleccionados en los menús.
  5. Alguna funcionalidad agregada por usted.

Por las características del proyecto, para la persistencia de la información se utilizó SQLite como base de datos relacional y el ORM Prisma. Con el msimo, a partir de las funcionalidades que requiere el sistema, se definió en el fichero ./prisma/schema.prisma el siguiente esquema para los modelos:

model Product {
  id          Int       @id @default(autoincrement())
  name        String
  description String?
  category    String
  createdAt   DateTime  @default(now())
  menus       ProductsOnMenu[]
}

model Menu {
  id            Int     @id @default(autoincrement())
  title         String
  description   String?
  active        Boolean @default(false)
  products      ProductsOnMenu[]
}

model ProductsOnMenu {
  product_id  Int
  menu_id     Int
  product     Product @relation(fields: [product_id], references: [id], onDelete: Cascade)
  menu        Menu @relation(fields: [menu_id], references: [id], onDelete: Cascade)
  price       Float

  @@id([menu_id, product_id])
}

Con el esquema anterior se puede apreciar la estructura de la base de datos, con dos modelos: Product y Menu; y una relación de mucho-a-mucho (many-to-many) entre ambas que genera una nueva tabla llamada ProductsOnMenu, que almacena además el precio de un producto en un menú determinado.

La base de datos SQLite se almacena en el fichero que se especifique en el fichero de configuración del proyecto (.env). En este caso

DATABASE_URL="file:./menus.db"

almacenando los datos de la aplicación en el fichero menu.db dentro de la carpeta ./prisma.

Dicho fichero puede ser leído por cualquier gestor de base de datos que soporte SQLite.

Después de clonar el repositorio del proyecto, usted debe:

1. Instalar las dependencias de NPM ejecutando el comando npm install.
2. Ejecutar el proyecto. Para ello use una de estas dos variantes:
   • ejecutando el comando npm run dev. Esta opción permite una ejecución básica del proyecto en modo desarrollo.
   • o utilizando los comandos npm run build, seguido de npm run start. Esta variante permite generar una versión optimizada de la aplicación en producción.

Al realizar los pasos anteriores (en cualquiera de sus variantes), el proyecto estará ejecutándose por defecto en la dirección local https://localhost:3000, al cual podrá acceder desde su navegador para interactuar con el sistema.

1. Adicionar productos.
2. Editar productos.
3. Eliminar productos.
4. Buscar productos (filtro por nombre).
5. Adicionar menú.
6. Editar menú.
7. Eliminar menú.
8. Activar menú.
9. Ver productos de un menú agrupados por categorías.
10. Seleccionar productos de interés.
11. Adicionar productos seleccionados al carrito de compra.
12. Ver productos en el carrito de compra y el importe total.
13. Eliminar productos del carrito de compra.

• El sistema es totalmente responsive y con interfaz gráfica agradable al usuario.
• Por cuestiones de tiempo no se incluyó una autenticación al sistema.
• Por la misma razón anterior el sistema también carece de la funcionalidad de subir una imagen personalizada, por lo que tiene imágenes estáticas.
• Para agregar más cantidades de un mismo producto al carrito, se debe agregar el mismo tantas veces se desee tener.
• Por ser un sistema pequeño, los listados carecen de paginación.

This is a Next.js project created from scratch with npx create-next-app, for the management of restaurant's Menus and other companies dedicated to gastronomy.

1. Develop a menu planning web application with React, TypeScript and NodeJS.
2. Use UI/UX libraries of choice to enhance the user experience.

• Design and Structure:

  1. Create a web application with responsive and attractive design.
  2. Include header, title and navigation menu.
  3. Design sections for weekly menu creation and display.

• Functionality (JavaScript):

  1. Allow users to create custom weekly menus.
  2. Implement searching and adding recipes to menus from a mock source.
  3. Enable editing and deletion of items from menus.
  4. Generate shopping lists based on the selected items in the menus.
  5. Some functionality added by you.

Due to the characteristics of the project, SQLite was used as a relational database and the ORM Prisma for the persistence of the information. With the same, based on the functionalities required by the system, the following schema for the models was defined in the file ./prisma/schema.prisma:

model Product {
  id Int @id @default(autoincrement())
  name String
  description String?
  category String
  createdAt DateTime @default(now())
  menus ProductsOnMenu[]
}
model Menu {
  id Int @id @default(autoincrement())
  title String
  description String?
  active Boolean @default(false)
  products ProductsOnMenu[]
}
model ProductsOnMenu {
  product_id Int
  menu_id Int
  product Product Product @relation(fields: [product_id], references: [id], onDelete: Cascade)
  menu Menu @relation(fields: [menu_id], references: [id], onDelete: Cascade)
  price Float
  @@id([menu_id, product_id])
}

With the above schema you can see the structure of the database, with two models: Product and Menu; and a many-to-many relationship between the two that generates a new table called ProductsOnMenu, which also stores the price of a product in a given menu. The SQLite database is stored in the file specified in the project configuration file (.env). In this case

DATABASE_URL="file:./menus.db"

storing the application data in the menu.db file inside the ./prism folder. This file could be read by any database manager that supports SQLite.

After cloning the project repository, you should:

1. Install the NPM dependencies by running the npm install command.
2. Run the project. To do this use one of these two variants:
   • running the npm run dev command. This option allows a basic execution of the project in development mode.
   • or by using the npm run build command, followed by npm run start. This variant allows generating an optimized version of the application in production.

By performing the above steps (in any of its variants), the project will be running by default at the local address https://localhost:3000, which you will be able to access from your web browser to interact with the system.

1. Add products.
2. Edit products.
3. Delete products.
4. Search products (filter by name).
5. Add menu.
6. Edit menu.
7. Delete menu.
8. Activate menu.
9. To see products of a menu grouped by categories.
10. Select products of interest.
11. Add selected products to the shopping cart.
12. View products in the shopping cart and the total amount.
13. Remove products from the shopping cart.

• The system is fully responsive and has a user-friendly graphical interface.
• Due to time constraints an authentication to the system was not included.
• For the same reason above, the system does not allow you to upload a custom image, so it has static images.
• To add more quantities of the same product to the cart, you must add the same product as many times as you want to have.
• Being a small system, the listings are not paginated.