Loading repository data…
benjaminsaenz / repository
Proyecto académico TechStore - Frontend HTML, CSS, JS
Proyecto frontend (sin backend) de una tienda de accesorios tecnológicos.
npm install
npm run dev
npm run test # modo interactivo
npm run test:run # una sola vez
npm run test:coverage # reporte de cobertura
public/
data/products.json # "API interna" (catálogo)
img/... # imágenes
src/
api/productsApi.js # llamada Axios al JSON
hooks/useProducts.js # hook que consume la API interna
components/
NavbarMain.jsx # navbar principal (carrito + menú)
Footer.jsx # footer
ReceiptCard.jsx # boleta (reutilizable)
pages/
Home.jsx
Productos.jsx # catálogo + filtros + agregar al carrito
Categorias.jsx # vista extra (link a /productos?cat=...)
Ofertas.jsx # vista extra (usa onSale en products.json)
Carrito.jsx # carrito + botones simulación pago
Checkout.jsx # formulario + aprobar/rechazar
PagoExitoso.jsx # muestra boleta aprobada
PagoError.jsx # muestra boleta rechazada
admin/
AdminDashboard.jsx # panel administrador (sidebar)
AdminClientes.jsx # CRUD clientes (localStorage)
AdminProductos.jsx # CRUD productos (localStorage)
AdminVentas.jsx # lista ventas (se llena al aprobar compra)
adminStore.js # "BD" simulada (localStorage + seed)
utils/
cart.js # carrito (localStorage)
checkout.js # boletas + registrar venta
validation.js # validaciones (usadas en forms)
test/
setupTests.js # jest-dom para Testing Library
Estas son las claves principales usadas por el proyecto:
techstore_cart_v1 → carritotechstore_last_receipt_v1 → última boleta (aprobada/rechazada)techstore_is_admin_v1 → sesión admin (simulada)Admin:
admin_products_v1 → productos administrablesadmin_clients_v1 → clientes administrablesadmin_sales_v1 → ventas (se agregan cuando la compra es APROBADA)No hay backend. El catálogo se lee desde:
public/data/products.jsonSe consume así:
src/api/productsApi.js → axios.get("/data/products.json")src/hooks/useProducts.js → expone { products, loading, error }Cuando es APROBADA:
checkout.js)techstore_last_receipt_v1admin_sales_v1Cuando es RECHAZADA:
Se incluyen pruebas sobre:
Archivos de tests (ejemplos):
src/utils/validation.test.jssrc/utils/cart.test.jssrc/utils/checkout.test.jssrc/pages/Carrito.test.jsxApp.jsx, Carrito.jsx, checkout.js, etc.).Selected from shared topics, language and repository description—not editorial ratings.
Shomish /
## 📌 Descripción TechStore es una tienda online con diseño neon cyberpunk, desarrollada como proyecto académico para demostrar el uso de **HTML5, CSS3 y JavaScript** aplicados bajo una arquitectura por capas, consumiendo datos reales desde la Fake Store API.