Para comenzar el desarrollo de la Web App Matchify, utilizamos React para el frontend y Node.js para el backend, todo en JavaScript. Esta combinación nos permite construir una aplicación web interactiva y dinámica para conectar candidatos y empresas de manera eficient

Creación del Proyecto

La configuración inicial de Matchify se realizó en dos partes:

  1. Frontend (React): Para el frontend, usamos Create React App, que nos facilitó la configuración inicial sin complicaciones adicionales.

    npx create-react-app frontend
    
  2. Backend (Node.js): El backend fue construido desde cero con Node.js y Express, lo cual nos brinda flexibilidad para manejar las peticiones y construir una API robusta.

Estructura del Proyecto

Para una estructura de proyecto organizada y eficiente, se separaron claramente las carpetas de frontend y backend, permitiendo una clara distinción entre la interfaz de usuario y la lógica de negocio.

Configuración de Node.js

Inicialmente, el proyecto se configuró con la versión 16.20.2 de Node.js, pero se actualizó a la versión v18.17.0 para aprovechar mejoras de rendimiento y nuevas características.

Actualización de Node.js en macOS o Linux

  1. Instalación de NVM (Node Version Manager): Utilizamos NVM para manejar versiones de Node.js, facilitando actualizaciones y cambios de versión cuando sea necesario.

    curl -o- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh> | bash
    
  2. Instalación de Node.js v18.17.0: Con NVM, instalamos la versión 18.17.0 de Node.js y la configuramos como la versión activa.

    nvm install 18.17.0
    nvm use 18.17.0
    
  3. Actualización de npm: Actualizamos npm a su última versión para asegurar la compatibilidad con las dependencias de la aplicación.

    npm install -g npm@latest
    
  4. Verificación de versiones: Confirmamos las versiones instaladas para asegurarnos de que las actualizaciones se aplicaron correctamente.

    node -v
    npm -v
    

Estilos de la Interfaz de Usuario

Para construir una interfaz limpia y amigable, se utilizó Tailwind CSS en el frontend, lo cual nos permitió diseñar rápidamente elementos de la interfaz de usuario y mantener una apariencia consistente en toda la aplicación.

Comandos para Ejecutar el Proyecto

Para ejecutar y compilar el proyecto, usamos los siguientes comandos: