Auction Website

Punto de subasta

La subastas es un sitio web donde los usuarios pueden comprar y vender artículos. Mi objetivo con este proyecto de pila completa fue el diseño y el desarrollo de una plataforma de subastas en línea, similar a eBay. La implementación sigue una arquitectura REST-API y algunas de las características clave son:

• Autorización segura y autenticación
• Control de acceso basado en roles
• Correo al cliente dentro de la aplicación
• Recomendaciones que utilizan factorización de matriz

Tecnologías

Se usó una pila de JavaScript para una implementación más fácil y más rápida, compuesta por express y node.js para el back-end, MySQL para la base de datos y reaccionar por el front-end. También se puede utilizar una base de datos relacional diferente ya que el modelado de datos, las asociaciones y las consultas se manejan con mapeo relacional de objetos utilizando SECELIZE .

Requisitos y configuración

Back-end

1. Para el back-end mySQL o se requiere una base de datos relacional similar, así como la instalación de Node.js y NPM.

2. En el archivo config.json, agregue su configuración personal de MySQL.

3. Para instalar Express, CORS y otros módulos necesarios, en la carpeta API Ejecutar: npm install

4. Para conectar SECLELIZE a la base de datos, ejecute el comando: sequelize init

5. Las transacciones se cifran a través del protocolo SSL/TLS. Para crear el certificado localmente, puede usar mkcert y luego agregar la ruta en:

 const sslServer = https . createServer ( {
    key : fs . readFileSync ( '/yourpath/key.pem' ) ,
    cert : fs . readFileSync ( '/yourpath/cert.pem' )
} , app ) ;

• Cuando el servidor comienza con una base de datos "limpia", las tablas se crean automáticamente en función de los modelos orientados a objetos definidos en los modelos.
• Además, un usuario con el rol de administrador se crea automáticamente con el nombre de usuario: admin y contraseña inicial: 1234, que se puede cambiar.
• Nodemon también está configurado, de modo que el servidor se reinicia automáticamente cada vez que se cambia el código de back-end, mientras se ejecuta el servidor.

Para iniciar el servidor, simplemente se ejecute en el directorio API:

 npm start

Interfaz

Para el front-end, todas las dependencias necesarias se definen en el archivo package.json . Para instalarlos, simplemente ejecute en el directorio frontal: npm install

Para iniciar el front-end en la ejecución del directorio delantero:

 npm start

Diseño

Para el diseño de la aplicación, utilicé CSS puro y algunos componentes de IU de material. Se agregaron algunas animaciones para las transiciones de la página, así como para la página de edición. Para los títulos y elementos principales, utilicé Futura, que es un tipo de letra simple y atemporal, mientras que para el cuerpo y los detalles utilicé Roboto y otras fuentes Sans-Serif similares.

Página de bienvenida

La página de bienvenida del sitio es bastante simple, con el objetivo de hacer que los nuevos visitantes interesen en ingresar al sitio. Solo hay un botón de inicio de sesión y un breve resumen de los servicios proporcionados, para que no estén abrumados por la información.

Subastas

Desde la página de subastas, el usuario puede explorar los listados por categoría, búsqueda o filtro. Las categorías tienen una estructura jerárquica, que se logró en MySQL mediante el uso de una llave extranjera de auto referencia y construyendo el árbol tanto en el front-end como en el back-end recursivamente cuando sea necesario.

Página de subastas

La página de subastas tiene todos los detalles de un artículo y, según si un comprador o el vendedor lo está viendo, se les presenta diferentes opciones. Las fotos se muestran en un carrusel y para la carga de fotos utilicé la API de Multer en el back-end. Para mostrar la ubicación, utilicé OpenStreetMap y Follet . El usuario puede agregar la ubicación exacta soltando un pin o buscando. Diseñé un contenedor similar a la polaroid para el mapa como se puede ver en la captura de pantalla anterior, donde las coordenadas se muestran en el formato DMS.

Iniciar sesión y registro

Para los campos de registro, así como para las otras formas del sitio web, utilicé YUP para realizar la validación de esquemas en combinación con la biblioteca Formik . La contraseña del usuario se almacena en la base de datos hash utilizando la función BCRYPT , que se basa en el cifrado Blowfish.

Perfil

En la página de perfil, un comprador puede ver todos los artículos disponibles de un vendedor. Se proporciona una página de tablero similar para cada usuario, donde también se les recomiendan elementos. El sistema de recomendación utiliza el algoritmo de factorización de matriz, mientras que los datos para él se recopilan mientras los usuarios visitan una subasta o ofertas en él.

Correo

Aparte de la bandeja de entrada, la bandeja de salida y la capacidad de enviar un nuevo mensaje, en el cliente de correo también hay una interfaz de mensajería. Aparte de los mensajes, el comprador puede calificar a un vendedor cuando ha llegado un artículo y el vendedor, respectivamente, puede calificar a un comprador cuando hayan completado el pago.

Administración

Cuando se registra en el administrador, puede aprobar aplicaciones de usuario, así como exportar los detalles de la subasta en formato XML, JSON o CSV después de la plantilla DTD de eBay. Además, para llenar la base de datos y capacitar al algoritmo de recomendación, utilicé datos reales del sitio web de eBay en formato XML proporcionado por UCLA.

Herramientas

El sitio web fue construido utilizando Express, Node.js, MySQL, Sequelize y React.