Este Repositorio es un 📑Clone del Repositorio Original cambiando algunas partes para 🔐Ocultar KEYs etc...

Pagina web de una tienda de productos Personalziados.

creado por Agustin Benitez sitio oficial enmamanualidades.vercel.app

Tecnologías utilizadas

• node.js
• js
• html
• css

en CSS uso variables de COLOR: var(--color-uno) del :root del archivo colors.css

Explicacion del Proyecto

Este proyecto es una tienda de productos personalizados que utiliza tecnologías como node.js, js, html y css. La página web permite a los usuarios ver una lista de productos disponibles, ver detalles de cada producto, filtrar productos por categoría y precio, y realizar compras. La página web está alojada en Vercel y la base de datos en Neon Postgres.

Base de Datos en Neon Postgres Creada con SQL

Alojé la base de datos del proyecto en Neon Postgres. Para luego poder mantener facilmente los productos de la web como precio, stock, nombre tec... Para la creación de la tabla de productos utilicé el siguiente código SQL:

CREATE TABLE IF NOT EXISTS productos ( 
  id SERIAL PRIMARY KEY, 
  nombre VARCHAR(100) NOT NULL, 
  descripcion TEXT, 
  precio DECIMAL(10, 2) NOT NULL, 
  categoria VARCHAR(50) NOT NULL, 
  imagen VARCHAR(255), 
  stock INT DEFAULT 0, 
  fecha_creacion TIMESTAMP DEFAULT CURRENT_TIMESTAMP 
);

Esta tabla almacena toda la información relacionada con los productos disponibles en mi tienda.

Además, añadí índices para mejorar el rendimiento de las consultas:

-- Índices para mejorar el rendimiento de las consultas 
CREATE INDEX IF NOT EXISTS idx_productos_categoria ON productos(categoria); 
CREATE INDEX IF NOT EXISTS idx_productos_precio ON productos(precio);

tambien uso SQL para crear las categorias.

CREATE TABLE IF NOT EXISTS categorias (
  id SERIAL PRIMARY KEY,
  nombre VARCHAR(50) NOT NULL UNIQUE,
  slug VARCHAR(50) NOT NULL UNIQUE,
  fecha_creacion TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

asi se ve en Neon Postgres:

NODE.JS

Utilicé Node.js para crear el servidor de la página web lo Hosteo en Vercel. El servidor se ejecuta en el puerto 3000 y se encarga de manejar las solicitudes HTTP entrantes. Para crear el servidor, utilicé el siguiente código:

const express = require('express');
const app = express();
const port = 3000;

Utilizo npm para instalar las dependencias del proyecto:

npm install

con node.js hago las redireciones para las paginas de los productos:

app.get('/productos/:id', (req, res) => {
  const id = req.params.id;
  const producto = productos.find((producto) => producto.id === parseInt(id));
  if (producto) {
    res.render('producto', { producto });
  } else {
    res.status(404).send('Producto no encontrado');
  }
})

Diseño de la Página Web

Utilicé HTML y CSS para diseñar la página web. creo los primeros bocetos de diseños con Figma y luego los hago yo en HTML y CSS.

Y asi como quedo con el resultado final HTML & CSS:

OPTIMIZACION DE LAS IMAGENES .WEBP

Utilicé Webp para optimizar las imagenes de la pagina web.

LICENCIA

Este proyecto está licenciado bajo la Licencia MIT. Custom License

¡Gracias por visitar mi proyecto! 😊

si te gusto el proyecto te agradezco que me sigas en GitHub

APORTACIONES 📨

si queres apuntar algun error o mejorar el proyecto te agradezco que mandesme un pull request. 🖇️Crear un pull request aqui!