Una plantilla base para proyectos de Ingeniería de Software (ISW) desarrollados durante el año 2024-2. Esta plantilla está diseñada para ayudar a los estudiantes a estructurar y organizar sus proyectos de software, incluyendo tanto la parte de Backend como de Frontend.
- Descripción General
- Backend
- Frontend
- Arquitectura del Proyecto
- Instalación y Configuración
- Tecnologías
La Plantilla-ISW-Proyecto-2024 es una base preconfigurada para proyectos de Ingeniería de Software que incluye tanto la parte del Backend como la del Frontend. Está diseñada para que los estudiantes puedan enfocarse en desarrollar sus funcionalidades específicas sin tener que preocuparse por la configuración inicial del proyecto.
El Backend de esta plantilla implementa las siguientes funcionalidades principales:
- Autenticación y Autorización: Uso de
passport.jspara la autenticación segura de los usuarios. - CRUD de Usuarios: Permite la lectura, actualización y eliminación de usuarios.
- Registro de Usuarios: Implementación de un sistema de registro que permite a nuevos usuarios registrarse en la aplicación.
El Frontend proporciona una interfaz de usuario simple y funcional para interactuar con el sistema. Incluye las siguientes páginas y funcionalidades:
- Página de Inicio de Sesión: Permite a los usuarios autenticarse en el sistema.
- Página de Registro de Usuarios: Los nuevos usuarios pueden registrarse mediante un formulario.
- Página de Error: Muestra un mensaje de error cuando algo sale mal.
- Página Principal: Página de inicio tras la autenticación exitosa.
- Página de Gestión de Usuarios:
- Muestra una tabla con todos los usuarios registrados.
- Permite modificar y eliminar usuarios directamente desde la tabla.
- Incluye una funcionalidad de búsqueda para encontrar usuarios específicos.
- Cerrar Sesión: Opción para que los usuarios cierren su sesión de manera segura.
Esta plantilla proporciona una estructura robusta para que los estudiantes puedan extender y personalizar según las necesidades de sus proyectos.
Este proyecto está dividido en dos partes principales: el Backend y el Frontend. A continuación, se muestra la estructura del Backend:
├── backend
│ ├── node_modules
│ ├── src
│ │ ├── auth
│ │ │ └── passport.auth.js
│ │ ├── config
│ │ │ ├── .env.example
│ │ │ ├── configDb.js
│ │ │ ├── configEnv.js
│ │ │ └── initialSetup.js
│ │ ├── controllers
│ │ │ ├── auth.controller.js
│ │ │ └── user.controller.js
│ │ ├── entity
│ │ │ └── user.entity.js
│ │ ├── handlers
│ │ │ └── responseHandlers.js
│ │ ├── helpers
│ │ │ └── bcrypt.helper.js
│ │ ├── middlewares
│ │ │ ├── authentication.middleware.js
│ │ │ └── authorization.middleware.js
│ │ ├── routes
│ │ │ ├── auth.routes.js
│ │ │ ├── index.routes.js
│ │ │ └── user.routes.js
│ │ ├── services
│ │ │ ├── auth.service.js
│ │ │ └── user.service.js
│ │ ├── validations
│ │ │ ├── auth.validation.js
│ │ │ └── user.validation.js
│ │ └── index.js
│ ├── .gitignore
│ ├── .prettierrc.json
│ ├── .eslintrc.config.js
│ ├── package-lock.json
│ └── package.json├── frontend
│ ├── node_modules
│ ├── public
│ ├── src
│ │ ├── assets
│ │ │ ├── deleteIcon.svg
│ │ │ ├── react.svg
│ │ │ └── updateIcon.svg
│ │ ├── components
│ │ │ ├── Filter.jsx
│ │ │ ├── Form.jsx
│ │ │ ├── Navbar.jsx
│ │ │ ├── Table.jsx
│ │ │ └── userOptions.jsx
│ │ ├── context
│ │ │ └── AuthContext.jsx
│ │ ├── helpers
│ │ │ ├── formatData.js
│ │ │ ├── lowerCaseData.js
│ │ │ └── sweetAlert.js
│ │ ├── hooks
│ │ │ ├── auth
│ │ │ │ ├── useLogin.jsx
│ │ │ │ └── useRegister.jsx
│ │ │ ├── table
│ │ │ │ └── useTable.jsx
│ │ │ └── users
│ │ │ ├── useDeleteUser.jsx
│ │ │ ├── useEditUser.jsx
│ │ │ └── useGetUsers.jsx
│ │ ├── pages
│ │ │ ├── EditUser.jsx
│ │ │ ├── Error404.jsx
│ │ │ ├── Home.jsx
│ │ │ ├── Login.jsx
│ │ │ ├── Register.jsx
│ │ │ └── Users.jsx
│ │ ├── services
│ │ │ ├── auth.service.js
│ │ │ ├── root.service.js
│ │ │ └── user.service.js
│ │ ├── styles
│ │ │ ├── animations.css
│ │ │ └── styles.css
│ ├── index.css
│ ├── main.jsx
│ ├── .env.example
│ ├── .gitignore
│ ├── .eslint.config.js
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
└── └── vite.config.jsAntes de comenzar, asegúrate de tener instalados los siguientes programas:
- Node.js (versión 20.X.X LTS) como entorno de ejecución de JavaScript.
- Git (versión 2.45.2 o superior) para clonar el repositorio.
- PostgreSQL (versión 16.X.X) para la base de datos.
- DBeaver (versión 24.X.X) para la administración de la base de datos (opcional, pero recomendado).
Primero, clona el repositorio en tu máquina local usando el siguiente comando:
git clone https://github.com/tu-usuario/Plantilla-ISW-Proyecto-2024.git- Accede al directorio del Backend:
cd backend- Instala las dependencias del proyecto:
npm install- Renombra el archivo
.env.examplea.envy configura las variables de entorno necesarias.
HOST= localhost (Proyecto en local) o IP servidor (Proyecto en producción)
PORT= (3000-5000) (Proyecto en local) o Puerto 80 (Proyecto en producción)
DB_USERNAME= Nombre de usuario en la instancia de PostgreSQL
PASSWORD= Contraseña de usuario en la instancia de PostgreSQL
DATABASE= Nombre de la base de datos
ACCESS_TOKEN_SECRET= Secreto del JWT
cookieKey= Llave de la cookie- Configura PostgreSQL:
- Crea una base de datos en PostgreSQL con el nombre especificado en el archivo
.env.
- Inicia el servidor:
npm run dev- Accede al directorio del Frontend:
cd frontend- Instala las dependencias del proyecto:
npm install- Renombra el archivo
.env.examplea.envy configura las variables de entorno necesarias.
VITE_BASE_URL=http://<IP:(Puerto 80 -> 4 digitos)>/api- Inicia la aplicación Frontend:
npm run dev- Instalación de PostgreSQL:
- Descarga e instala PostgreSQL desde el siguiente enlace: PostgreSQL.
- Durante la instalación, configura la contraseña para la base de datos.
- Configuración de DBeaver:
- Descarga e instala DBeaver desde el siguiente enlace: DBeaver.
- Abre DBeaver y crea una nueva conexión a la base de datos PostgreSQL.
- Ingresa el nombre de usuario y la contraseña configurados durante la instalación de PostgreSQL.
- Uso de DBeaver:
- Utiliza DBeaver para administrar y visualizar la base de datos PostgreSQL.
- Puedes crear tablas, insertar datos, ejecutar consultas SQL y más.
Este proyecto utiliza el stack PERN, que incluye las siguientes tecnologías:
- Descripción: Sistema de gestión de bases de datos relacional y objeto.
- Uso en el Proyecto: Se utiliza para almacenar y gestionar datos de usuarios y otros datos de la aplicación.
- Enlace: PostgreSQL
- Descripción: Framework minimalista para Node.js que facilita la creación de aplicaciones web y APIs.
- Uso en el Proyecto: Se utiliza para construir la API del Backend, gestionando rutas y solicitudes HTTP.
- Enlace: Express.js
- Descripción: Biblioteca de JavaScript para construir interfaces de usuario.
- Uso en el Proyecto: Se utiliza para construir la interfaz de usuario del Frontend, proporcionando una experiencia interactiva y dinámica.
- Enlace: React
- Descripción: Entorno de ejecución para JavaScript en el lado del servidor.
- Uso en el Proyecto: Se utiliza para ejecutar el código del Backend y manejar la lógica del servidor.
- Enlace: Node.js
- Passport.js: Middleware de autenticación para Node.js.
- Enlace: Passport.js
- bcrypt.js: Biblioteca para el hashing de contraseñas.
- Enlace: bcrypt.js
- dotenv: Carga variables de entorno desde un archivo
.env.- Enlace: dotenv
Estas tecnologías y herramientas forman la base de la aplicación y permiten su funcionamiento de forma correcta.
⌨️ with ❤️ by @Didudocl