Version sin Vite.

frontend/Dockerfile

@@ -0,0 +1,27 @@
+# 1. Usamos la imagen oficial de Node (versión slim para que no pese tanto)
+FROM node:20-slim
+
+# 2. Instalamos procps (el comando 'ps' completo que pide Next.js)
+# Usamos USER root para asegurar permisos y limpiamos caché de apt para ahorrar espacio
+USER root
+RUN apt-get update && \
+    apt-get install -y procps && \
+    rm -rf /var/lib/apt/lists/*
+
+# 3. Directorio de trabajo
+WORKDIR /app
+
+# 4. Copiamos los archivos de dependencias
+COPY package*.json ./
+
+# 5. Instalamos las dependencias
+RUN npm install
+
+# 6. Copiamos el resto del código del proyecto
+COPY . .
+
+# 7. Exponemos el puerto de Next.js (por defecto 3000)
+EXPOSE 3000
+
+# 8. Comando para arrancar en desarrollo con Turbopack
+CMD ["npm", "run", "dev"]

frontend/Navbar.js

@@ -0,0 +1,139 @@
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+      if (window.innerWidth > 768) setIsOpen(false);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <nav style={{
+      backgroundColor: 'white',
+      borderBottom: '1px solid #e2e8f0',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1000,
+      height: '70px',
+      display: 'flex',
+      alignItems: 'center',
+      padding: '0 20px',
+      fontFamily: 'sans-serif'
+    }}>
+      <div style={{
+        width: '100%',
+        maxWidth: '1200px',
+        margin: '0 auto',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      }}>
+        
+        {/* LOGO */}
+        <div 
+          onClick={() => router.push('/')} 
+          style={{
+            fontSize: '1.5rem',
+            fontWeight: '800',
+            color: '#0f172a',
+            cursor: 'pointer'
+          }}
+        >
+          Josemi Blog 🚀
+        </div>
+
+        {/* MENU ESCRITORIO */}
+        {!isMobile && (
+          <div style={{ display: 'flex', gap: '30px' }}>
+            <span 
+              onClick={() => router.push('/')} 
+              style={{ cursor: 'pointer', fontWeight: '600', color: '#1e293b' }}
+            >
+              Inicio
+            </span>
+            <a 
+              href="https://github.com" 
+              target="_blank" 
+              style={{ textDecoration: 'none', fontWeight: '600', color: '#1e293b' }}
+            >
+              Github
+            </a>
+          </div>
+        )}
+
+        {/* BOTÓN BURGER */}
+        {isMobile && (
+          <button 
+            onClick={() => setIsOpen(!isOpen)}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '5px'
+            }}
+          >
+            <div style={{ width: '25px', height: '3px', backgroundColor: '#0f172a' }}></div>
+            <div style={{ width: '25px', height: '3px', backgroundColor: '#0f172a' }}></div>
+            <div style={{ width: '25px', height: '3px', backgroundColor: '#0f172a' }}></div>
+          </button>
+        )}
+      </div>
+
+      {/* MENÚ MÓVIL DESPLEGABLE */}
+      {isMobile && isOpen && (
+        <div style={{
+          position: 'fixed',
+          top: '70px',
+          left: 0,
+          width: '100%',
+          backgroundColor: 'white',
+          borderBottom: '1px solid #e2e8f0',
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '20px',
+          boxShadow: '0 10px 15px rgba(0,0,0,0.1)',
+          zIndex: 999
+        }}>
+          <button 
+            onClick={() => { router.push('/'); setIsOpen(false); }} 
+            style={{
+              background: 'none',
+              border: 'none',
+              padding: '15px',
+              fontWeight: '600',
+              color: '#1e293b',
+              cursor: 'pointer',
+              borderBottom: '1px solid #f1f5f9'
+            }}
+          >
+            Inicio
+          </button>
+          <a 
+            href="https://github.com" 
+            target="_blank"
+            style={{
+              padding: '15px',
+              textAlign: 'center',
+              fontWeight: '600',
+              color: '#1e293b',
+              textDecoration: 'none'
+            }}
+          >
+            Github
+          </a>
+        </div>
+      )}
+    </nav>
+  );
+}

frontend/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "blog-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-quill": "^2.0.0" 
+  }
+}

frontend/pages/admin.js

@@ -0,0 +1,202 @@
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import Navbar from '../Navbar';
+
+export default function Admin() {
+  const [token, setToken] = useState('');
+  const [authorized, setAuthorized] = useState(false);
+  const [tab, setTab] = useState('crear');
+  const [stats, setStats] = useState({ total: 0, top: [] });
+  const [form, setForm] = useState({ title: '', tags: '', content: '' });
+  const [posts, setPosts] = useState([]);
+  const router = useRouter();
+
+  useEffect(() => {
+    const t = localStorage.getItem('blog_token');
+    if (!t) {
+      router.push('/login');
+    } else {
+      setToken(t);
+      setAuthorized(true);
+      loadPosts();
+      loadStats(t);
+    }
+  }, []);
+
+  const loadPosts = () => {
+    fetch('http://localhost:9002/posts')
+      .then(r => r.json())
+      .then(setPosts)
+      .catch(e => console.error("Error cargando posts"));
+  };
+
+  const loadStats = (t) => {
+    fetch('http://localhost:9002/posts/stats', {
+      headers: { 'Authorization': `Bearer ${t || token}` }
+    })
+      .then(r => r.json())
+      .then(setStats)
+      .catch(e => console.error("Error en stats"));
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('blog_token');
+    router.push('/login');
+  };
+
+  const handleSave = async (e) => {
+    e.preventDefault();
+    const res = await fetch('http://localhost:9002/posts', {
+      method: 'POST',
+      headers: { 
+        'Content-Type': 'application/json', 
+        'Authorization': `Bearer ${token}` 
+      },
+      body: JSON.stringify(form)
+    });
+    if (res.ok) {
+      alert('Publicado con éxito');
+      setForm({ title: '', tags: '', content: '' });
+      loadPosts();
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if(!confirm('¿Estás seguro de eliminar este post?')) return;
+    await fetch(`http://localhost:9002/posts/${id}`, { 
+      method: 'DELETE',
+      headers: { 'Authorization': `Bearer ${token}` }
+    });
+    loadPosts();
+  };
+
+  // Protección de renderizado
+  if (!authorized) {
+    return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', fontFamily: 'sans-serif' }}>
+      <h2 style={{ color: '#64748b' }}>Verificando credenciales...</h2>
+    </div>;
+  }
+
+  return (
+    <div style={{ backgroundColor: '#f8fafc', minHeight: '100vh', fontFamily: 'sans-serif', paddingBottom: '50px' }}>
+      <Navbar />
+      
+      <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '40px 20px' }}>
+        
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '40px' }}>
+          <h1 style={{ color: '#0f172a', margin: 0, fontSize: '2rem' }}>Panel Administrativo</h1>
+          <button 
+            onClick={handleLogout}
+            style={{ padding: '10px 20px', backgroundColor: '#ef4444', color: 'white', border: 'none', borderRadius: '8px', fontWeight: 'bold', cursor: 'pointer' }}
+          >
+            Cerrar Sesión 🔒
+          </button>
+        </div>
+
+        {/* NAVEGACIÓN */}
+        <div style={{ display: 'flex', gap: '10px', marginBottom: '30px' }}>
+          <button 
+            onClick={() => setTab('crear')}
+            style={{ 
+              padding: '12px 24px', borderRadius: '10px', fontWeight: 'bold', cursor: 'pointer',
+              border: '2px solid #0f172a', 
+              backgroundColor: tab === 'crear' ? '#0f172a' : 'transparent',
+              color: tab === 'crear' ? 'white' : '#0f172a'
+            }}
+          >
+            ✏️ Crear Post
+          </button>
+          <button 
+            onClick={() => setTab('lista')}
+            style={{ 
+              padding: '12px 24px', borderRadius: '10px', fontWeight: 'bold', cursor: 'pointer',
+              border: '2px solid #0f172a', 
+              backgroundColor: tab === 'lista' ? '#0f172a' : 'transparent',
+              color: tab === 'lista' ? 'white' : '#0f172a'
+            }}
+          >
+            📋 Gestionar
+          </button>
+          <button 
+            onClick={() => { setTab('stats'); loadStats(); }}
+            style={{ 
+              padding: '12px 24px', borderRadius: '10px', fontWeight: 'bold', cursor: 'pointer',
+              border: '2px solid #0f172a', 
+              backgroundColor: tab === 'stats' ? '#0f172a' : 'transparent',
+              color: tab === 'stats' ? 'white' : '#0f172a'
+            }}
+          >
+            📊 Estadísticas
+          </button>
+        </div>
+
+        {/* CONTENIDO */}
+        {tab === 'crear' && (
+          <form onSubmit={handleSave} style={{ backgroundColor: 'white', padding: '30px', borderRadius: '16px', boxShadow: '0 4px 6px rgba(0,0,0,0.05)', border: '1px solid #e2e8f0' }}>
+            <input 
+              placeholder="Título" 
+              value={form.title} 
+              onChange={e => setForm({...form, title: e.target.value})} 
+              style={{ width: '100%', padding: '15px', marginBottom: '20px', borderRadius: '8px', border: '1px solid #e2e8f0', fontSize: '1rem', boxSizing: 'border-box' }} 
+              required 
+            />
+            <input 
+              placeholder="Tags" 
+              value={form.tags} 
+              onChange={e => setForm({...form, tags: e.target.value})} 
+              style={{ width: '100%', padding: '15px', marginBottom: '20px', borderRadius: '8px', border: '1px solid #e2e8f0', fontSize: '1rem', boxSizing: 'border-box' }} 
+            />
+            <textarea 
+              placeholder="Contenido (puedes usar HTML)" 
+              value={form.content} 
+              onChange={e => setForm({...form, content: e.target.value})} 
+              style={{ width: '100%', padding: '15px', marginBottom: '20px', borderRadius: '8px', border: '1px solid #e2e8f0', fontSize: '1rem', height: '250px', boxSizing: 'border-box', fontFamily: 'inherit' }} 
+              required 
+            />
+            <button style={{ width: '100%', padding: '15px', backgroundColor: '#2563eb', color: 'white', border: 'none', borderRadius: '8px', fontWeight: 'bold', fontSize: '1.1rem', cursor: 'pointer' }}>
+              Publicar Artículo
+            </button>
+          </form>
+        )}
+
+        {tab === 'lista' && (
+          <div style={{ backgroundColor: 'white', borderRadius: '16px', border: '1px solid #e2e8f0', overflow: 'hidden' }}>
+            {posts.map(p => (
+              <div key={p.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '20px', borderBottom: '1px solid #f1f5f9', alignItems: 'center' }}>
+                <span style={{ fontWeight: '600', color: '#334155' }}>{p.title}</span>
+                <button 
+                  onClick={() => handleDelete(p.id)}
+                  style={{ backgroundColor: '#fee2e2', color: '#ef4444', border: 'none', padding: '8px 15px', borderRadius: '6px', fontWeight: 'bold', cursor: 'pointer' }}
+                >
+                  Eliminar
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {tab === 'stats' && (
+          <div style={{ backgroundColor: 'white', padding: '30px', borderRadius: '16px', border: '1px solid #e2e8f0' }}>
+            <div style={{ textAlign: 'center', marginBottom: '40px', padding: '30px', backgroundColor: '#f0f9ff', borderRadius: '12px' }}>
+              <h3 style={{ margin: 0, color: '#0369a1' }}>Visitas Totales</h3>
+              <p style={{ fontSize: '3rem', fontWeight: '800', margin: '10px 0', color: '#0284c7' }}>{stats.total}</p>
+            </div>
+            <h4 style={{ marginBottom: '20px' }}>Ranking de Lectura</h4>
+            {stats.top.map((s, i) => (
+              <div key={i} style={{ marginBottom: '20px' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                  <span style={{ fontSize: '0.9rem', fontWeight: '600' }}>{s.title}</span>
+                  <span style={{ fontSize: '0.9rem', color: '#2563eb', fontWeight: 'bold' }}>{s.views} views</span>
+                </div>
+                <div style={{ width: '100%', height: '8px', backgroundColor: '#f1f5f9', borderRadius: '4px', overflow: 'hidden' }}>
+                  <div style={{ width: `${(s.views / (stats.total || 1)) * 100}%`, height: '100%', backgroundColor: '#2563eb' }}></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+      </div>
+    </div>
+  );
+}

frontend/pages/index.js

@@ -0,0 +1,159 @@
+import { useState, useEffect } from 'react';
+import Navbar from '../Navbar';
+
+export default function Home() {
+  const [posts, setPosts] = useState([]);
+  const [filter, setFilter] = useState('');
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    // Carga de posts
+    fetch('http://localhost:9002/posts')
+      .then(res => res.json())
+      .then(data => setPosts(Array.isArray(data) ? data : []))
+      .catch(err => console.error("Error:", err));
+
+    // Manejo de responsive
+    const handleResize = () => setIsMobile(window.innerWidth <= 768);
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const handleRead = async (id) => {
+    try { await fetch(`http://localhost:9002/posts/view/${id}`, { method: 'POST' }); } catch (e) {}
+  };
+
+  const filtered = posts.filter(p => 
+    p.title.toLowerCase().includes(filter.toLowerCase()) || 
+    p.tags?.toLowerCase().includes(filter.toLowerCase())
+  );
+
+  return (
+    <div style={{ 
+      fontFamily: "'Plus Jakarta Sans', sans-serif", 
+      backgroundColor: '#f8fafc', 
+      minHeight: '100vh', 
+      color: '#1e293b' 
+    }}>
+      <Navbar />
+      
+      <div style={{ 
+        maxWidth: '1200px', 
+        margin: '0 auto', 
+        padding: isMobile ? '30px 15px' : '60px 24px' 
+      }}>
+        
+        <header style={{ textAlign: 'center', marginBottom: isMobile ? '30px' : '50px' }}>
+          <h1 style={{ 
+            fontSize: isMobile ? '1.8rem' : '2.8rem', 
+            fontWeight: '800', 
+            marginBottom: '20px', 
+            color: '#0f172a',
+            letterSpacing: '-0.025em'
+          }}>
+            Bienvenido al Blog
+          </h1>
+          <input 
+            placeholder="🔍 Buscar por título o tag..." 
+            value={filter} 
+            onChange={e => setFilter(e.target.value)} 
+            style={{
+              width: '100%', 
+              maxWidth: '600px', 
+              padding: isMobile ? '12px 20px' : '16px 25px',
+              borderRadius: '30px', 
+              border: '2px solid #e2e8f0',
+              fontSize: '1rem', 
+              outline: 'none',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
+              boxSizing: 'border-box'
+            }}
+          />
+        </header>
+
+        <main style={{
+          display: 'grid',
+          gap: isMobile ? '20px' : '30px'
+        }}>
+          {filtered.map(post => (
+            <article key={post.id} style={{
+              backgroundColor: 'white', 
+              padding: isMobile ? '25px' : '40px', 
+              borderRadius: '20px',
+              border: '1px solid #e2e8f0', 
+              boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05)',
+              transition: 'transform 0.2s ease'
+            }}>
+              <div style={{ 
+                display: 'flex', 
+                justifyContent: 'space-between', 
+                alignItems: 'center', 
+                marginBottom: '15px' 
+              }}>
+                <span style={{ 
+                  color: '#2563eb', 
+                  fontWeight: '800', 
+                  fontSize: '0.75rem', 
+                  textTransform: 'uppercase', 
+                  backgroundColor: '#eff6ff',
+                  padding: '4px 12px',
+                  borderRadius: '20px'
+                }}>
+                  #{post.tags || 'General'}
+                </span>
+                <span style={{ fontSize: '0.8rem', color: '#94a3b8' }}>
+                  {post.views || 0} visitas
+                </span>
+              </div>
+              
+              <h2 style={{ 
+                margin: '0 0 15px 0', 
+                fontSize: isMobile ? '1.4rem' : '1.8rem', 
+                color: '#0f172a',
+                lineHeight: '1.2'
+              }}>
+                {post.title}
+              </h2>
+              
+              <div 
+                dangerouslySetInnerHTML={{ __html: post.content?.substring(0, 180) + '...' }} 
+                style={{ 
+                  lineHeight: '1.6', 
+                  color: '#475569',
+                  fontSize: isMobile ? '0.95rem' : '1rem'
+                }} 
+              />
+              
+              <button 
+                onClick={() => handleRead(post.id)} 
+                style={{
+                  marginTop: '25px', 
+                  color: 'white', 
+                  backgroundColor: '#0f172a',
+                  border: 'none',
+                  padding: '10px 20px',
+                  borderRadius: '10px',
+                  fontWeight: '600', 
+                  cursor: 'pointer', 
+                  fontSize: '0.9rem',
+                  display: 'inline-flex',
+                  alignItems: 'center'
+                }}
+              >
+                Leer más
+                <span style={{ marginLeft: '8px' }}>→</span>
+              </button>
+            </article>
+          ))}
+          
+          {filtered.length === 0 && (
+            <div style={{ textAlign: 'center', padding: '40px' }}>
+              <p style={{ color: '#64748b', fontSize: '1.1rem' }}>No se encontraron artículos que coincidan con tu búsqueda.</p>
+            </div>
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}

frontend/pages/login.js

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+export default function Login() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const router = useRouter();
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await fetch('http://localhost:9002/posts/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password })
+      });
+      const data = await res.json();
+
+      if (res.ok) {
+        localStorage.setItem('blog_token', data.token);
+        router.push('/admin');
+      } else {
+        alert('Credenciales incorrectas');
+      }
+    } catch (err) {
+      alert('Error de conexión');
+    }
+  };
+
+  return (
+    <div style={{
+      height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center',
+      backgroundColor: '#f8fafc', fontFamily: 'sans-serif'
+    }}>
+      <form onSubmit={handleLogin} style={{
+        backgroundColor: 'white', padding: '50px', borderRadius: '20px',
+        border: '1px solid #e2e8f0', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)',
+        width: '100%', maxWidth: '400px'
+      }}>
+        <h2 style={{ textAlign: 'center', marginBottom: '30px', color: '#0f172a', marginTop: 0 }}>
+          Admin Login 🔐
+        </h2>
+        
+        <input 
+          placeholder="Usuario" 
+          value={username} 
+          onChange={e => setUsername(e.target.value)} 
+          style={{
+            width: '100%', padding: '14px', border: '2px solid #e2e8f0',
+            borderRadius: '10px', marginBottom: '20px', fontSize: '1rem', 
+            boxSizing: 'border-box', outline: 'none'
+          }}
+        />
+        
+        <input 
+          type="password" 
+          placeholder="Contraseña" 
+          value={password} 
+          onChange={e => setPassword(e.target.value)} 
+          style={{
+            width: '100%', padding: '14px', border: '2px solid #e2e8f0',
+            borderRadius: '10px', marginBottom: '30px', fontSize: '1rem', 
+            boxSizing: 'border-box', outline: 'none'
+          }}
+        />
+        
+        <button style={{
+          width: '100%', padding: '16px', backgroundColor: '#2563eb', color: 'white',
+          border: 'none', borderRadius: '10px', fontWeight: '800', fontSize: '1rem',
+          cursor: 'pointer'
+        }}>
+          Entrar al Sistema
+        </button>
+      </form>
+    </div>
+  );
+}