Back to projects
May 15, 2024
3 min read

Ecommerce

Sistema web ecommerce para la administración y venta de productos online mediante pagos en linea.

Descripción

Este sistema web cuenta con todas las características de un eccommerce tradicional, desde la visualización del catálogo completo de productos, carrito de compras, pagos en linea, administración de catalogo de productos y usuarios, autenticación, protección de rutas y más. Desarrollado con Next como framework de pila completa, Postgres como base datos, JWT y Tailwind.

Stack tecnológico

Funcionalidades

Home

En esta pantalla se muestran un paginado de los productos disponibles en la tienda virtual. En la barra superior, al centro se puede filtrar el contenido por categorías. Aunque el sistema cuenta con autenticación, esta página se puede visualizar de manera no autenticada.

Home de teslo-shop

Detalle del producto

Por cada producto se muestra la información más relevante, como sea, su precio, la cantidad de productos en stock, las tallas disponibles y una descripción del mismo. Ademas de la funcionalidad de agregarlo al carrito de compras.

Detalle de producto en teslo-shop

Carrito de compras

Después de agregar algunos productos, estos se van almacenando en el carrito de compras para su posterior adquisición. El almacenamiento se hace mediante el localStorage del navegador. Por lo tanto, para su uso, no es necesario estar autenticado.

Carrito de compras en teslo-shop

Login

Para realizar el pago de los productos, y realizar un conjunto de operaciones más allá de la exploración del catálogo de producto, es necesario autenticarse.

Autenticación en teslo-shop

Checkout

Para confirmar la orden es necesario agregar la dirección de entrega de los productos, misma que tenemos la opción de guardar en la base de datos (Recordar dirección), o no, en cuyo caso solo se almacenará en el localStorage del navegador.

Checkout en teslo-shop

Posterior a la verificación de nuestra orden, esta se almacena en la base de datos y está lista para ser pagada. La confirmación de nuestra orden impacta en el stock de nuestros productos, de tal manera que otros usuarios al solicitar el contenido de nuestros productos puedan ver la disponibilidad de los productos hasta ese momento.

Checkout 2 en teslo-shop

Pagos en linea.

El sistema de comercio electrónico admite pagos en linea a través de Paypal así como tarjeta de débito y crédito.

Pagos en linea en teslo-shop

Administración de catálogo de productos.

Esta página, protegida y permitida solo para usuarios administradores, permite dar mantenimiento al catálogo de productos. Tanto editar los ya existentes, como agregar nuevos productos.

Administración de productos teslo-shop

Por cada producto podemos modificar cualquier campo de información incluyendo las fotografías. Estos cambios serán persistentes en la base de datos y se reflejarán para todos aquellos usuarios que visiten el sitio.

Edición de productos en teslo-shop

Metatags

Metatags en teslo-shop