Scientific Article Aggregator - Web Version

Una aplicación web moderna estilo Medium para descubrir y explorar artículos científicos, construida con React + Vite.

Características

• UI Moderna Estilo Medium: Diseño limpio y elegante, optimizado para lectura
• Animaciones Suaves: Transiciones y animaciones fluidas con Framer Motion
• Búsqueda Avanzada: Busca artículos en múltiples fuentes (arXiv, Europe PMC, Crossref, bioRxiv/medRxiv)
• Guardado de Artículos: Guarda tus artículos favoritos en el navegador (localStorage)
• Diseño Responsive: Funciona perfectamente en dispositivos móviles y escritorio
• Funciona sin Backend: Búsquedas directas a APIs públicas, almacenamiento local
• Despliegue en GitHub Pages: Lista para desplegarse como sitio estático

Requisitos Previos

• Node.js 18+ y npm

Instalación

Frontend (React + Vite)

npm install

Ejecutar la Aplicación

Modo Desarrollo

npm run dev

El frontend estará disponible en http://localhost:5173

Build para Producción

npm run build

Los archivos estáticos se generan en la carpeta dist/ y pueden desplegarse en GitHub Pages, Netlify, Vercel, etc.

Estructura del Proyecto

article-aggregator-web/
├── src/
│   ├── components/
│   │   ├── Layout.tsx       # Layout principal
│   │   ├── ArticleCard.tsx  # Tarjeta de artículo
│   │   ├── SearchForm.tsx   # Formulario de búsqueda
│   │   ├── ArticleDetailModal.tsx # Modal de detalles
│   │   └── ExportImportButtons.tsx # Exportar/Importar
│   ├── pages/
│   │   ├── Home.tsx         # Página principal
│   │   ├── ArticleDetail.tsx # Detalle de artículo
│   │   └── SavedArticles.tsx # Artículos guardados
│   ├── services/
│   │   ├── api.ts           # Cliente API (con fallback)
│   │   ├── searchService.ts # Búsqueda directa sin backend
│   │   └── storage.ts       # Almacenamiento localStorage
│   ├── types/
│   │   └── article.ts       # Tipos TypeScript
│   ├── App.tsx              # Componente principal
│   ├── main.tsx             # Punto de entrada
│   └── index.css            # Estilos globales
├── public/                  # Archivos estáticos
├── tailwind.config.js       # Configuración Tailwind
└── vite.config.ts           # Configuración Vite

Configuración

Variables de Entorno (Opcional)

Si en el futuro agregas un backend, crea un archivo .env en la raíz del proyecto:

VITE_API_URL=http://localhost:8000

Por defecto, la aplicación funciona sin backend usando búsquedas directas a las APIs públicas.

Despliegue en GitHub Pages

El proyecto está configurado para desplegarse automáticamente en GitHub Pages usando GitHub Actions.

Configuración Inicial (Solo una vez)

1. Ve a tu repositorio en GitHub: https://github.com/jorgetzec/scientific-article-aggregator
2. Ve a Settings > Pages
3. En Source, selecciona GitHub Actions
4. Guarda los cambios

Despliegue Automático

Una vez configurado, cada vez que hagas push a la rama main, GitHub Actions:

1. Construirá automáticamente el proyecto
2. Desplegará el sitio en GitHub Pages

El sitio estará disponible en: https://jorgetzec.github.io/scientific-article-aggregator/

Despliegue Manual (Opcional)

Si prefieres hacer el despliegue manualmente, puedes usar gh-pages:

npm install -D gh-pages

Agrega al package.json:

{
  "scripts": {
    "deploy": "npm run build && gh-pages -d dist"
  }
}

Luego ejecuta:

npm run deploy

Y configura GitHub Pages para usar la rama gh-pages como fuente.

Preview Local del Build de Producción

Para probar localmente cómo se verá en GitHub Pages:

npm run build
npm run preview:prod

Esto inicia un servidor local con el base path correcto (/scientific-article-aggregator/).

Diseño

El diseño está inspirado en Medium, con:

• Tipografía elegante (Inter + Merriweather)
• Espaciado generoso
• Colores suaves y minimalistas
• Animaciones sutiles y profesionales
• Layout centrado para lectura óptima

Almacenamiento

La aplicación usa localStorage del navegador para:

• Guardar artículos favoritos
• Mantener el estado de búsquedas recientes
• Exportar/importar artículos como JSON

Nota: Los artículos guardados son locales al navegador. Puedes exportarlos como JSON para hacer backup o compartirlos entre dispositivos.

Notas

• Sin Backend Requerido: La aplicación funciona completamente sin backend
• Búsquedas Directas: Se conecta directamente a las APIs públicas (arXiv, Europe PMC, Crossref, bioRxiv)
• GitHub Pages Ready: Lista para desplegarse como sitio estático
• Offline Capable: Los artículos guardados están disponibles offline (solo lectura)

Contribuir

Las contribuciones son bienvenidas. Por favor, abre un issue o pull request.

Licencia

MIT License