Version sin Vite.

backend/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:18-alpine
+
+# Directorio de trabajo
+WORKDIR /app
+
+# Copiamos dependencias
+COPY package*.json ./
+
+# Instalamos
+RUN npm install
+
+# Copiamos el resto del código
+COPY . .
+
+# Exponemos el puerto 9002 (que configuramos en index.js)
+EXPOSE 9002
+
+# Arrancamos
+CMD ["npm", "run", "dev"]

backend/middleware/auth.js

@@ -0,0 +1,13 @@
+module.exports = (req, res, next) => {
+  const authHeader = req.headers['authorization'];
+  if (!authHeader) return res.status(403).json({ error: 'No se permite el acceso sin token' });
+
+  const token = authHeader.split(' ')[1];
+  
+  // Aquí la lógica de validación de tu token
+  if (token) {
+    next(); // Si el token es válido, dejamos pasar
+  } else {
+    res.status(401).json({ error: 'Token inválido o expirado' });
+  }
+};

backend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "blog-backend",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "nodemon src/index.js"
+  },
+  "dependencies": {
+    "bcryptjs": "^2.4.3",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.1",
+    "express": "^4.18.2",
+    "express-rate-limit": "^7.1.5",
+    "jsonwebtoken": "^9.0.2",
+    "pg": "^8.11.3"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.3"
+  }
+}

backend/src/config/db.js

@@ -0,0 +1,19 @@
+const { Pool } = require('pg');
+
+/**
+ * Configuración de la conexión a PostgreSQL
+ * Host 'db' para conectar dentro de la red de Docker
+ */
+const pool = new Pool({
+  user: 'josemi',
+  host: 'db', 
+  database: 'blog_db',
+  password: 'josemivi',
+  port: 5432,
+});
+
+pool.on('connect', () => {
+  console.log('✅ Conexión establecida con PostgreSQL');
+});
+
+module.exports = pool;

backend/src/controllers/authController.js

@@ -0,0 +1,32 @@
+const pool = require('../config/db');
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+
+const login = async (req, res) => {
+  const { username, password } = req.body;
+  try {
+    const result = await pool.query('SELECT * FROM users WHERE username = $1', [username]);
+    if (result.rows.length === 0) return res.status(400).json({ error: 'Usuario no encontrado' });
+
+    const user = result.rows[0];
+    // NOTA: Si el hash del SQL falla, puedes usar /register para crear uno nuevo
+    // Aquí comparamos contraseña plana vs hash
+    const validPass = await bcrypt.compare(password, user.password);
+    if (!validPass) return res.status(400).json({ error: 'Contraseña incorrecta' });
+
+    const token = jwt.sign({ id: user.id, username: user.username }, process.env.JWT_SECRET || 'secreto', { expiresIn: '24h' });
+    res.json({ token, username: user.username });
+  } catch (err) { res.status(500).json({ error: err.message }); }
+};
+
+const register = async (req, res) => {
+  const { username, password } = req.body;
+  const salt = await bcrypt.genSalt(10);
+  const hash = await bcrypt.hash(password, salt);
+  try {
+    await pool.query('INSERT INTO users (username, password) VALUES ($1, $2)', [username, hash]);
+    res.json({ message: 'Usuario creado exitosamente' });
+  } catch (err) { res.status(500).json({ error: err.message }); }
+};
+
+module.exports = { login, register };

backend/src/controllers/postController.js

@@ -0,0 +1,71 @@
+const pool = require('../config/db');
+
+// Obtener todos los posts
+exports.getPosts = async (req, res) => {
+  try {
+    const result = await pool.query('SELECT * FROM posts ORDER BY created_at DESC');
+    res.json(result.rows);
+  } catch (err) {
+    res.status(500).json({ error: 'Error obteniendo posts' });
+  }
+};
+
+// Login (Asegúrate de que esta función esté aquí, que es la que suele fallar)
+exports.login = async (req, res) => {
+  const { username, password } = req.body;
+  // Por ahora validación simple, luego puedes meter ciberseguridad real
+  if (username === 'josemi' && password === 'josemivi') {
+    res.json({ token: 'token-seguro-josemi-' + Date.now() });
+  } else {
+    res.status(401).json({ error: 'Credenciales incorrectas' });
+  }
+};
+
+// Contador de visitas
+exports.addView = async (req, res) => {
+  try {
+    await pool.query('UPDATE posts SET views = views + 1 WHERE id = $1', [req.params.id]);
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: 'Error view' });
+  }
+};
+
+// Crear post
+exports.createPost = async (req, res) => {
+  const { title, tags, content } = req.body;
+  const slug = title.toLowerCase().replace(/ /g, '-');
+  try {
+    const result = await pool.query(
+      'INSERT INTO posts (title, slug, tags, content) VALUES ($1, $2, $3, $4) RETURNING *',
+      [title, slug, tags, content]
+    );
+    res.status(201).json(result.rows[0]);
+  } catch (err) {
+    res.status(500).json({ error: 'Error creando post' });
+  }
+};
+
+// Eliminar post
+exports.deletePost = async (req, res) => {
+  try {
+    await pool.query('DELETE FROM posts WHERE id = $1', [req.params.id]);
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: 'Error eliminando' });
+  }
+};
+
+// Estadísticas
+exports.getStats = async (req, res) => {
+  try {
+    const total = await pool.query('SELECT SUM(views) as total FROM posts');
+    const top = await pool.query('SELECT title, views FROM posts ORDER BY views DESC LIMIT 5');
+    res.json({
+      total: total.rows[0].total || 0,
+      top: top.rows
+    });
+  } catch (err) {
+    res.status(500).json({ error: 'Error stats' });
+  }
+};

backend/src/index.js

@@ -0,0 +1,48 @@
+const express = require('express');
+const cors = require('cors');
+const postRoutes = require('./routes/postRoutes');
+const pool = require('./config/db');
+
+const app = express();
+app.use(cors());
+app.use(express.json());
+
+// --- INICIALIZACIÓN DE BASE DE DATOS ---
+(async () => {
+  const client = await pool.connect();
+  try {
+    // 1. Crear tablas si no existen
+    await client.query(`
+      CREATE TABLE IF NOT EXISTS users (id SERIAL PRIMARY KEY, username TEXT UNIQUE, password TEXT);
+      CREATE TABLE IF NOT EXISTS posts (
+          id SERIAL PRIMARY KEY, 
+          title TEXT NOT NULL, 
+          slug TEXT UNIQUE NOT NULL, 
+          content TEXT, 
+          tags TEXT, 
+          url TEXT, 
+          image_url TEXT, 
+          description TEXT, 
+          type TEXT CHECK(type IN ('POST', 'LINK')) DEFAULT 'POST',
+          views INTEGER DEFAULT 0,
+          created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+      );
+    `);
+    
+    // 2. Migración: Asegurar que la columna 'views' existe (por si la tabla ya estaba creada)
+    await client.query(`ALTER TABLE posts ADD COLUMN IF NOT EXISTS views INTEGER DEFAULT 0;`);
+    
+    console.log('✅ Base de datos PostgreSQL sincronizada');
+  } catch (err) {
+    console.error('❌ Error DB:', err);
+  } finally {
+    client.release();
+  }
+})();
+
+app.use('/posts', postRoutes);
+
+const PORT = 9002;
+app.listen(PORT, '0.0.0.0', () => {
+  console.log(`🚀 Servidor backend corriendo en puerto ${PORT}`);
+});

backend/src/middleware/auth.js

@@ -0,0 +1,16 @@
+const jwt = require('jsonwebtoken');
+
+const verifyToken = (req, res, next) => {
+  const token = req.headers['authorization'];
+  if (!token) return res.status(403).json({ error: 'Token requerido' });
+
+  try {
+    const cleanToken = token.replace('Bearer ', '');
+    const decoded = jwt.verify(cleanToken, process.env.JWT_SECRET || 'secreto');
+    req.user = decoded;
+    next();
+  } catch (err) {
+    return res.status(401).json({ error: 'Token inválido' });
+  }
+};
+module.exports = verifyToken;

backend/src/routes/postRoutes.js

@@ -0,0 +1,22 @@
+const express = require('express');
+const router = express.Router();
+const postController = require('../controllers/postController');
+
+// Middleware de verificación simple
+const verifyToken = (req, res, next) => {
+    const authHeader = req.headers['authorization'];
+    if (!authHeader) return res.status(403).json({ error: 'Acceso denegado' });
+    next();
+};
+
+// RUTAS PÚBLICAS
+router.get('/', postController.getPosts);
+router.post('/login', postController.login); // <--- Aquí estaba el error si no existía en el controller
+router.post('/view/:id', postController.addView);
+
+// RUTAS PROTEGIDAS
+router.get('/stats', verifyToken, postController.getStats);
+router.post('/', verifyToken, postController.createPost);
+router.delete('/:id', verifyToken, postController.deletePost);
+
+module.exports = router;

control.sh

@@ -0,0 +1,93 @@
+#!/bin/bash
+
+# Colores para los mensajes
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Función de ayuda
+show_help() {
+    echo -e "${BLUE}===================== CONTROL DEL BLOG DE JOSEMI =================${NC}"
+    echo "                                          "
+    echo "                      Uso: ./control.sh [comando]                      "
+    echo ""
+    echo "Comandos disponibles:"
+    echo -e "  ${GREEN}start${NC}      -> Levanta todo el entorno (en segundo plano)"
+    echo -e "  ${GREEN}stop${NC}       -> Detiene los contenedores (sin borrarlos)"
+    echo -e "  ${GREEN}restart${NC}    -> Reinicia los contenedores"
+    echo -e "  ${GREEN}build${NC}      -> Reconstruye las imágenes (útil si instalas nuevas librerías)"
+    echo -e "  ${GREEN}logs${NC}       -> Ver logs de todo en tiempo real (Ctrl+C para salir)"
+    echo -e "  ${GREEN}status${NC}     -> Ver estado de los contenedores"
+    echo -e "  ${GREEN}shell-be${NC}   -> Entrar a la terminal del Backend"
+    echo -e "  ${GREEN}shell-fe${NC}   -> Entrar a la terminal del Frontend"
+    echo -e "  ${RED}reset${NC}        -> ¡PELIGRO! Borra la Base de Datos y la crea de cero (útil si cambias contraseñas)"
+    echo -e "  ${YELLOW}info${NC}      -> Muestra las URLs y credenciales de acceso"
+    echo -e "  ${RED}down${NC}         -> Deletea todo el container"
+    echo "=================================================================="
+}
+
+# Lógica del script
+case "$1" in
+    start)
+        echo -e "${GREEN}Arrancando el sistema...${NC}"
+        sudo docker-compose up -d
+        echo -e "${BLUE}¡Listo! Usa './control.sh info' para ver los accesos.${NC}"
+        ;;
+    stop)
+        echo -e "${YELLOW}Deteniendo contenedores...${NC}"
+        sudo docker-compose stop
+        ;;
+    restart)
+        echo -e "${YELLOW}Reiniciando...${NC}"
+        sudo docker-compose restart
+        ;;
+    build)
+        echo -e "${BLUE}Reconstruyendo imágenes (esto puede tardar)...${NC}"
+        sudo docker-compose up -d --build
+        ;;
+    logs)
+        echo -e "${BLUE}Mostrando logs (Ctrl+C para salir)...${NC}"
+        sudo docker-compose logs -f
+        ;;
+    status)
+        sudo docker-compose ps
+        ;;
+    shell-be)
+        echo -e "${GREEN}Entrando al contenedor del Backend...${NC}"
+        sudo docker exec -it blog_backend sh
+        ;;
+    shell-fe)
+        echo -e "${GREEN}Entrando al contenedor del Frontend...${NC}"
+        sudo docker exec -it blog_frontend sh
+        ;;
+    reset)
+        echo -e "${RED}ATENCIÓN: Esto borrará todos los datos de la base de datos.${NC}"
+        read -p "¿Estás seguro? (s/n): " confirm
+        if [[ $confirm == [sS] || $confirm == [sS][yY] ]]; then
+            echo -e "${YELLOW}Borrando todo...${NC}"
+            sudo docker-compose down -v
+            docker system prune -f
+            echo -e "${GREEN}Levantando de nuevo...${NC}"
+            sudo docker-compose up -d
+        else
+            echo "Operación cancelada."
+        fi
+        ;;
+    info)
+        echo -e "${BLUE}=== INFORMACIÓN DE ACCESO ===${NC}"
+        echo -e "Frontend (Web):    ${GREEN}http://localhost:9001${NC}"
+        echo -e "Backend (API):     ${GREEN}http://localhost:9002${NC}"
+        echo -e "Base de Datos:     ${GREEN}localhost:9003${NC}"
+        echo -e "Usuario DB:        ${YELLOW}josemi${NC}"
+        echo -e "Contraseña DB:     ${YELLOW}josemivi${NC}"
+        ;;
+     down)
+        sudo docker-compose down -v
+        sudo docker system prune -f
+        ;;   
+    *)
+        show_help
+        ;;
+esac

db/init.sql

@@ -0,0 +1,26 @@
+-- Limpieza total para inicio desde cero
+DROP TABLE IF EXISTS posts;
+DROP TABLE IF EXISTS users;
+
+-- 1. Tabla de Usuarios (Para autenticación vía curl/registro)
+CREATE TABLE IF NOT EXISTS posts (
+    id SERIAL PRIMARY KEY,
+    title VARCHAR(255) NOT NULL,
+    type VARCHAR(50) DEFAULT 'INTERNAL',
+    content TEXT,
+    url TEXT,
+    image_url TEXT,
+    description TEXT,
+    tags TEXT DEFAULT '', -- Nueva columna para SEO y filtros
+    views INTEGER DEFAULT 0,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS users (
+    id SERIAL PRIMARY KEY,
+    username VARCHAR(50) UNIQUE NOT NULL,
+    password VARCHAR(255) NOT NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+-- Índice para que las consultas por slug sean instantáneas
+CREATE INDEX idx_posts_slug ON posts(slug);

docker-compose.yml

@@ -0,0 +1,51 @@
+services:
+  db:
+    image: postgres:15-alpine
+    container_name: blog_db
+    restart: always
+    environment:
+      POSTGRES_USER: josemi
+      POSTGRES_PASSWORD: josemivi
+      POSTGRES_DB: blog_db
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+      - ./db/init.sql:/docker-entrypoint-initdb.d/init.sql
+    ports:
+      - "9003:5432"
+
+  backend:
+    build: ./backend
+    container_name: blog_backend
+    restart: always
+    ports:
+      - "9002:9002"
+    depends_on:
+      - db
+    environment:
+      # IMPORTANTE: Usamos 'db' como host porque Docker los conecta por nombre
+      DATABASE_URL: postgres://josemi:josemivi@db:5432/blog_db
+      JWT_SECRET: secreto_super_seguro_de_josemi
+      PORT: 9002
+    volumes:
+      - ./backend:/app
+      # Esta línea protege tus librerías instaladas en el build
+      - /app/node_modules
+    # Forzamos que use el comando de desarrollo definido en tu package.json
+    command: npm run dev
+
+  frontend:
+    build: ./frontend
+    container_name: blog_frontend
+    restart: always
+    ports:
+      - "9001:3000"
+    depends_on:
+      - backend
+    environment:
+      NEXT_PUBLIC_API_URL: http://localhost:9001
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+
+volumes:
+  postgres_data:

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>
+  );
+}