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.
- Desarrollar una aplicación web de planificación de menús con React, TypeScript y NodeJS.
- Utilizar librerías de UI/UX de elección para mejorar la experiencia del usuario.
-
Diseño y Estructura:
- Crear una aplicación web con diseño responsive y atractivo.
- Incluir encabezado, título y menú de navegación.
- Diseñar secciones para la creación y visualización de menús semanales.
-
Funcionalidad (JavaScript):
- Permitir a los usuarios crear menús semanales personalizados.
- Implementar búsqueda y adición de recetas a los menús desde una fuente simulada.
- Habilitar la edición y eliminación de elementos de los menús.
- Generar listas de compras basadas en los elementos seleccionados en los menús.
- Alguna funcionalidad agregada por usted.
Tecnología | Versión | Descripción |
---|---|---|
Node.js | v20.11.0 | Servidor web |
Next.js | v14.1.0 | Framework backend |
React | v18.2.0 | Framework frontend |
Typescript | v5.3.3 | Lenguaje de programación |
SQLite | - | Base de datos |
Librería | Versión | Descripción |
---|---|---|
@mui/material | v5.15.10 | Framework para maquetar UI/UX |
@mui/icons-material | v5.15.10 | Íconos de Material UI |
prisma | v5.9.1 | ORM |
@reduxjs/toolkit | v2.2.1 | Para el manejo estados globales en la aplicación |
Herramienta | Versión | Descripción |
---|---|---|
VS Code | v1.86.2 | Entorno de desarrollo integrado |
Extensión Thunder Client | v2.17.8 | Extension para probar API Rest en VS Code |
Extensión SQLite Viewer | v0.3.17 | Extensión para visualizar el contenido de bases de datos SQLite en VSCode |
Extensión 'React Developer Tools' | v5.0.0 | Extensión de Google Chrome para inspeccionar componentes React, editar props y estados, e identificar problemas de rendimiento. |
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:
- Instalar las dependencias de NPM ejecutando el comando
npm install
. - 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 denpm run start
. Esta variante permite generar una versión optimizada de la aplicación en producción.
- ejecutando el comando
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.
- Adicionar productos.
- Editar productos.
- Eliminar productos.
- Buscar productos (filtro por nombre).
- Adicionar menú.
- Editar menú.
- Eliminar menú.
- Activar menú.
- Ver productos de un menú agrupados por categorías.
- Seleccionar productos de interés.
- Adicionar productos seleccionados al carrito de compra.
- Ver productos en el carrito de compra y el importe total.
- 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.
- Develop a menu planning web application with React, TypeScript and NodeJS.
- Use UI/UX libraries of choice to enhance the user experience.
-
Design and Structure:
- Create a web application with responsive and attractive design.
- Include header, title and navigation menu.
- Design sections for weekly menu creation and display.
-
Functionality (JavaScript):
- Allow users to create custom weekly menus.
- Implement searching and adding recipes to menus from a mock source.
- Enable editing and deletion of items from menus.
- Generate shopping lists based on the selected items in the menus.
- Some functionality added by you.
Technology | Version | Description |
---|---|---|
Node.js | v20.11.0 | Web server |
Next.js | v14.1.0 | Framework backend |
React | v18.2.0 | Framework frontend |
Typescript | v5.3.3 | Programming language |
SQLite | - | Database |
Library | Version | Description |
---|---|---|
@mui/material | v5.15.10 | Framework for UI/UX layout |
@mui/icons-material | v5.15.10 | Material UI icons |
prism | v5.9.1 | ORM |
@reduxjs/toolkit | v2.2.1 | For handling global states in the application |
Tool | Version | Description |
---|---|---|
VS Code | v1.86.2 | Integrated development environment |
Thunder Client extension | v2.17.8 | Extension for testing API Rest in VS Code |
SQLite Viewer extension | v0.3.17 | Extension to view SQLite database content in VSCode |
'React Developer Tools' extension | v5.0.0 | Google Chrome extension for inspecting React components, editing props and states, and identifying performance issues. |
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:
- Install the NPM dependencies by running the
npm install
command. - 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 bynpm run start
. This variant allows generating an optimized version of the application in production.
- running the
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.
- Add products.
- Edit products.
- Delete products.
- Search products (filter by name).
- Add menu.
- Edit menu.
- Delete menu.
- Activate menu.
- To see products of a menu grouped by categories.
- Select products of interest.
- Add selected products to the shopping cart.
- View products in the shopping cart and the total amount.
- 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.