Este es el proyecto final realizado durante la etapa de Labs de Henry. El mismo consiste en un E-Commerce, donde se pueden ofrecer o adquirir servicios. El proyecto se llevo a cabo junto a un equipo de a 8 integrantes. Algunas de las caracteristicas principales del proyecto: Metodos de pago, Chat Online/Offline, Panel de Usuario, Filtrados, Panel de Admin.
Claudio Miguel Wusinowski- Facundo Pellicer
- Federico Avelin
- Franco Kail
- Jonatan Segovia
- Micaela Montero
- Sebastian Tobar
- Valentin Jara
- Express 4.17.1
- Node 12.21
- NPM 7.20.3
- React 17.0.1
- Redux 4.1.1
Y muchas más dependencias, consultar los package.json de la ruta /api y /client.
- Clonar o forkear el repositorio
Crear un archivo .env en la carpeta /api con los sigs parámetros:
DB_NAME = "nombre base de datos"
DB_USER = "usuario de postgres"
DB_PASSWORD = "contraseña de postgres"
DB_HOST = "localhost"
ENV_VARIABLE = "1(valor del force de sequelize, 1 === true o 0 === false)"
ORIGIN = "http://localhost:3000"
SUCCESS_MERCADOPAGO = "http://localhost:3001"
SECRET_KEY = "key para encriptar el token, puede ser cualquier string"Una vez creado y configurado el .env, hacer npm install parado en el directorio /api.
Para ejecutar el servidor, utilizar npm start (solo node), o npm run start:dev (con nodemon).
Para el front no se requiere de configuraciones adicionales. Parado en la carpeta /client, realizar npm install.
Para poner en linea el servidor del front, utilizar npm start (la primera vez puede tardar un rato).
En la carpeta /api/mock se encuentran todos los mocks para hacer las pruebas.
- Cuentas de usuarios
- Cuentas de mercadopago
- Cuentas de paypal
Landing page, se muestra el logo de la aplicacion, cuenta con animaciones, 2 cards principales, una lleva al Home de la web, el otro te lleva a un formulario de registro y acceso al Login en la parte superior derecha.
Formulario de registro. Se puede registrar de manera clasica, o utilizando los datos de google para rellenar el formulario.
Formulario de login. Se puede loguear utilizando las credenciales clasicas, o utilizando las credenciales de google, si la cuenta registrada fue creada con un mail de google valido.
Funcionalidad de recuperar contraseña. Se envia un correo con un link para restablecer la contraseña, en caso de que se haya olvidado la misma.
Pantalla principal de la web. Se puede acceder al panel de filtros en el borde superior izquierdo, carrito en el borde superior derecho, tambien se puede registrar y loguear desde el home. Cuenta con una search bar, un carrousel con los servicios destacados y las cards con informacion principal de cada servicio ofrecido.
Barra de filtros. Se puede hacer varios filtros combinados, ya sea elegir mas de una sub-categoria, filtrar por Provincia, Ciudad, por rango de precio u ordenar por Rating/Precio/Fecha, en forma Descendente o Ascendente.
Funcionalidad de darkmode. Se puede seleccionar entre activar o desactivar el darkmode. La seleccion se aplica a toda la web y se almacena la seleccion en localStorage.
Funcionalidad de carrito. Se puede agregar y quitar servicios del carrito. Todos los servicios son de cantidad 1. El carrito se mantiene en localStorage mientras no se esta logueado, una vez logueado, se mantendra en su cuenta hasta que se eliminen los items o se finalice la compra.
Funcionalidad de checkout. Se pueden remover items del carrito, hacer el pago por la plataforma de Mercadopago o por la plataforma de Paypal.
Funcionalidad de busqueda. Se puede hacer busqueda por nombre, ya sea que contenga tales caracteres, o nombre exacto. A la busqueda se le pueden aplicar los filtros de la barra lateral.
Funcionalidad de compartir. Se puede compartir por Whatsapp, Facebook o Linkedin.
Funcionalidad de paginado. Carga 20 resultados mas, si hay resultados.
Detalle del servicio. En el se puede ver el titulo completo, imagen, descripcion, precio, comentarios, servicios relacionados, vendedor, localizacion del servicio.
El usuario que adquirio el servicio puede dejar una calificacion y un comentario. La calificacion puede ser de 1 a 5 estrellas.
Perfil del vendedor. Se pueden ver los servicios que ofrece el vendedor, y compartir su perfil.
Panel de usuario. En el se pueden cambiar los datos del usuario, como la foto de perfil, nombre, apellido y contraseña. Tambien se pueden ver las ordenes que haya comprado, como el detalle de la misma, los servicios que tiene en favoritos, los servicios que tiene publicados, la opcion de crear nuevos servicios y la seccion para ir al chat.
Funcionalidad de chat. En el se encuentran los contactos a los que se les realizo alguna compra. El chat muestra el estado de un usuario, si se encuentra en linea o no. Se puede hacer tanto como un live chat, como un chat de mensajes, donde el vendedor/comprador podra ver sus mensajes luego.
Panel de admin. El administrador cuenta con privilegios mayores a los de un usuario comun. En el dashboard inicial, puede observar las estadisticas generales de la web, puede aplicar un filtrado tambien para ver en mas detalles las estadisticas.
En la seccion de servicios, puede ver un mapa interactivo, con la informacion de servicios por cada ubicacion, tambien cuenta con el poder de deshabilitar un servicio, descargar el listado de servicios en formato .CSV.
En la seccion de usuarios, puede buscar un usuario o varios usuarios, cambiarle los datos personales, o aplicarle un veto de la web.