Product List - Copy this React, Tailwind Component to your project

esta bien pero quiero que lo jale de mi base de datos los productos , esta es mi coneccion para jalar los datos de productos y categorias: const express = require("express"); const mysql = require("mysql"); const path = require("path"); const cors = require("cors"); const app = express(); const PORT = 8080; // Middleware app.use(cors()); app.use(express.json()); app.use(express.static(path.join(__dirname, "assets"))); // Sirve archivos estáticos de 'assets' // Ruta de fallback para servir index.html (después de todas las rutas API) app.get("*", (req, res) => { if (req.originalUrl.startsWith("/api")) { return res.status(404).json({ error: "Ruta API no encontrada" }); } res.sendFile(path.join(__dirname, "..", "public", "index.html")); }); // Configuración de la base de datos const db = mysql.createConnection({ host: "localhost", user: "root", password: "", database: "ecomerce", // Asegúrate de que el nombre esté bien escrito }); // Conectar con la base de datos db.connect((err) => { if (err) { console.error("Error al conectar con la base de datos:", err.code, err.message); process.exit(1); // Detiene el servidor si la conexión falla } console.log("Conexión exitosa a la base de datos"); }); // Ruta para obtener todos los productos app.get('/api/productos', (req, res) => { console.log('Solicitud para obtener productos...'); const query = 'SELECT * FROM productos'; db.query(query, (err, results) => { if (err) { console.error('Error en la consulta de productos:', err); return res.status(500).json({ error: 'Error interno del servidor' }); } console.log('Resultados obtenidos:', results); res.json(results); }); }); // Ruta para obtener las categorías app.get("/api/categorias", (req, res) => { const query = "SELECT * FROM categorias"; // Asegúrate de que la tabla se llame "categorias" db.query(query, (err, results) => { if (err) { console.error("Error en la consulta:", err); return res.status(500).json({ error: "Error al obtener las categorías" }); } res.json(results); // Devolver las categorías como respuesta JSON }); }); // Ruta para obtener productos filtrados por categoría app.get("/api/productos/categoria", (req, res) => { const { categoria } = req.query; // Obtener el parámetro 'categoria' de la consulta (URL) // Verificar que 'categoria' esté presente if (!categoria) { return res.status(400).json({ error: "Se requiere una categoría" }); } const query = "SELECT * FROM productos WHERE categoria = ?"; // Usar el marcador de posición '?' // Ejecutar la consulta, pasando el parámetro de categoría db.query(query, [categoria], (err, results) => { if (err) { console.error("Error en la consulta:", err); return res.status(500).json({ error: "Error al obtener los productos" }); } res.json(results); // Devolver los productos filtrados como respuesta JSON }); }); // Ruta para el favicon app.get("/favicon.ico", (req, res) => { res.sendFile(path.join(__dirname, "public", "vite.svg")); }); // Ruta de fallback para servir index.html del frontend app.get("*", (req, res) => { res.sendFile(path.join(__dirname, "..", "public", "index.html")); }); // Iniciar el servidor app.listen(PORT, () => { console.log(`Servidor corriendo en http://localhost:${PORT}`); });