Bugtracker 🐞

Una aplicación simple y potente para el seguimiento de "issues", construida con el stack MERN (MongoDB, Express.js, React, Node.js). Permite a los usuarios crear, visualizar, editar, borrar y flitrar issues de manera eficiente.

⚙️ Instalación

En esta sección se detallan los pasos para instalar y configurar el proyecto en un entorno de desarrollo local. Se recomienda usar las versiones especificadas para asegurar la compatibilidad.

Prerrequisitos

Para la ejecución de ambos entornos (frontend y backend), se necesita una base de software instalada en el sistema.

• Node.js y npm Como prerrequisito fundamental, se necesita Node.js para poder ejecutar el entorno de ejecución del backend. Junto con Node.js, se instala automáticamente npm (Node Package Manager), que es el gestor de paquetes utilizado para instalar todas las librerías y dependencias necesarias tanto para la API como para la aplicación de React.

  • Versión recomendada de Node.js: v22.13.1
  • Versión recomendada de npm: v11.3.0
  • Se pueden descargar desde la página oficial de Node.js.

• MongoDB El proyecto utiliza MongoDB como sistema de base de datos NoSQL para almacenar toda la información. Se puede optar por una de las siguientes dos configuraciones:

  1. Local: Instalar MongoDB Community Server, lo que garantiza un entorno de desarrollo totalmente gratuito y sin dependencia de internet.

     • Versión recomendada: v8.2.0
     • Se puede descargar desde la página oficial de MongoDB.

     La configuración por defecto durante la instalación es suficiente para que la aplicación se conecte. Durante este proceso, también se recomienda instalar MongoDB Compass, una herramienta gráfica (GUI) que facilita enormemente la gestión de la base de datos.

     Verificación con MongoDB Compass: Para asegurar que la conexión funciona y para crear la base de datos, se pueden seguir estos pasos en Compass:

     1. Abre Compass y crea una nueva conexión.
     2. En el diálogo, inserta la URI de conexión local. Generalmente, tiene este formato:

        mongodb://localhost:27017
        

     3. Asegúrate de que el puerto (27017 por defecto) coincida con el de tu instalación. Si la conexión desde Compass es exitosa, también lo será desde el backend.
     4. Una vez conectado, puedes usar la interfaz de Compass para crear una nueva base de datos con el nombre que usarás en tu archivo .env (ej. bugtracker).

  2. En la nube: Utilizar un servicio como MongoDB Atlas, que ofrece un plan gratuito. Esta opción facilita la configuración inicial y el acceso remoto.

     Nota sobre Atlas: El mismo proceso se puede realizar con MongoDB Compass para conectarse a una base de datos en la nube de Atlas. Simplemente se utiliza la URI de conexión que provee Atlas en lugar de la local.

Backend (Express.js)

El backend está construido sobre Node.js y requiere varias librerías clave para su funcionamiento: Express para la creación del servidor y manejo de rutas, Mongoose como ODM (Object Data Modeling) para establecer la conexión y modelar los datos de MongoDB, CORS para permitir una comunicación segura entre el frontend y el backend, y dotenv para la gestión de variables de entorno. Adicionalmente, para el entorno de desarrollo, se utiliza Nodemon para reiniciar automáticamente el servidor al detectar cambios.

1. Navegar a la carpeta del backend Desde la carpeta raíz del proyecto, acceda a la carpeta del backend a través de la terminal.

   cd Bugtracker-Backend

2. Instalar dependencias Ejecute el siguiente comando para instalar todas las librerías requeridas. Este comando leerá el archivo package.json e instalará las versiones especificadas para cada paquete.

   npm install

   Las dependencias principales que se instalarán son:

   • express: ^5.1.0
   • mongoose: ^8.18.2
   • cors: ^2.8.5
   • dotenv: ^17.2.2
   • nodemon: ^3.1.10 (como dependencia de desarrollo)

3. Configurar variables de entorno En la carpeta del backend ya se incluye un archivo .env que funciona como plantilla. Es necesario revisar este archivo y asegurarse de que la variable MONGODB_URI apunte correctamente a tu base de datos y que el PORT sea el deseado para tu entorno local. Dentro del archivo .env puedes encontrar más información al respecto.

   PORT=3000
   MONGODB_URI=mongodb://localhost:27017/bugtracker

Frontend (React)

La interfaz de usuario está construida con React. El proyecto utiliza Vite como herramienta de construcción y servidor de desarrollo, lo que proporciona un arranque casi instantáneo y una experiencia de desarrollo extremadamente rápida. Para la comunicación con el backend, se utiliza Axios como cliente HTTP.

1. Navegar a la carpeta del frontend Desde la raíz del proyecto, acceda a la carpeta del frontend.

   cd Bugtracker-Frontend

2. Instalar dependencias Ejecute el siguiente comando para instalar las librerías necesarias, como React y Axios, en las versiones recomendadas que se especifican en el package.json.

   npm install

   Las dependencias principales que se instalarán son:

   • react: ^19.1.1
   • react-dom: ^19.1.1
   • axios: ^1.12.2

3. Configurar la URL del Backend Es importante establecer la URL de conexión con el backend. En este proyecto, la configuración se realiza directamente en el archivo de servicio.

   • Abra el archivo src/Services/IssueService.jsx.
   • Modifique la constante API_URL para que apunte al puerto que configuró en el archivo .env del backend.

   const API_URL = "http://localhost:3000/api/";

🚀 Ejecución en Entorno Local

Para ejecutar la aplicación completa, es necesario levantar ambos servicios, el del backend y el del frontend, de forma simultánea. Para ello, se deben utilizar dos terminales separadas.

Backend (Servidor de la API)

El servidor del backend se encarga de gestionar las peticiones de la aplicación y comunicarse con la base de datos.

1. Abrir una terminal en la carpeta Bugtracker-Backend.
2. Ejecutar el siguiente comando para iniciar el servidor en modo de desarrollo:

   npm run dev

   Este script utiliza Nodemon para vigilar los cambios en los archivos, reiniciando el servidor automáticamente cada vez que se guarda un cambio. La API estará disponible y escuchando peticiones en la dirección http://localhost:3000 (o en el puerto especificado en el archivo .env).

Frontend (Aplicación de Usuario)

El frontend es la interfaz visual con la que el usuario interactúa.

1. Abrir una nueva terminal en la carpeta Bugtracker-Frontend.
2. Ejecutar el siguiente comando para iniciar el servidor de desarrollo de Vite:

   npm run dev

   Este comando pondrá en marcha el servidor de Vite, que compilará la aplicación de React y la servirá localmente. La aplicación se abrirá automáticamente en el navegador web por defecto en la dirección http://localhost:5173/ o en un puerto similar si este se encuentra ocupado.
3. Acceder a la aplicación Una vez que el servidor se haya compilado, abre tu navegador web y navega a la siguiente dirección para interactuar con el sistema:

   http://localhost:5173