Portfolio Card Viewer 📇

Aplicación Full Stack que permite visualizar una colección de tarjetas de proyectos, con detalles accesibles desde una vista ampliada.

---

🛠️ Tecnologías utilizadas

Frontend:

• HTML5, CSS3 y JavaScript
• Vite: Entorno de desarrollo rápido
• Eslint: Análisis de calidad del código
• Responsive Design

Backend:

• Node.js y Express
• EJS: Plantillas HTML dinámicas
• dotenv: Gestión de variables de entorno
• Middleware: para logs, rutas y errores personalizados

Base de datos:

• MySQL: Sistema gestor de bases de datos relacional
• MySQL Workbench: Modelado y gestión visual de la base de datos
• mysql2/promise: Cliente Node.js para conexión con MySQL

---

🗄️ Estructura y uso de la base de datos

El backend de la aplicación se conecta a una base de datos MySQL para almacenar y recuperar la información de cada tarjeta de proyecto. Se emplean consultas parametrizadas mediante mysql2/promise para evitar inyecciones SQL.

Tabla principal: projects

• id (INT, AUTO_INCREMENT, PRIMARY KEY)
• name (VARCHAR): Nombre del proyecto
• slogan (VARCHAR): Slogan descriptivo
• description (TEXT): Descripción extendida
• technologies (VARCHAR): Tecnologías usadas
• repo (VARCHAR): URL del repositorio
• demo (VARCHAR): URL de la demo
• author (VARCHAR): Nombre del autor/a
• job (VARCHAR): Rol profesional del autor/a
• photo (VARCHAR): URL de la imagen/portada

La base de datos puede ser gestionada desde MySQL Workbench, y configurada mediante las variables de entorno en el archivo .env.

Ejemplo de conexión en index.js:

const mysql = require("mysql2/promise");
const connection = await mysql.createConnection({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASS,
  database: process.env.DB_NAME,
});

🚀 Cómo ejecutar el proyecto

1. Clonar el repositorio

git clone https://github.com/tu-usuario/tu-repo.git
cd tu-repo

2. Configurar el entorno

Backend

cd BACKEND
cp .env-sample .env
npm install
npm start

Frontend

cd ../FRONTEND
npm install
npm run dev

Accede a: http://localhost:5173

📁 Estructura del proyecto

proyecto/ ├── BACKEND/ │ ├── src/ │ │ └── index.js │ ├── views/ │ └── views_static/ ├── FRONTEND/ │ └── src/ │ └── components/ │ ├── Form/ │ ├── Pages/ │ ├── preview/ │ └── data/ └── README.md

🧪 Próximas mejoras

• Panel de administración para editar/eliminar tarjetas
• Almacenamiento en la nube de las imágenes de los proyectos
• Validación de formularios en tiempo real

👩‍💻 Autores

• María Candelaría Zamora H.
• Jessica Valderrama
• Raquel Pérez Z.
• Cristina Pérez