Skip to content

andresbonelli/TiendaOnline-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ae3b053 · Dec 4, 2024
Nov 29, 2024
Oct 24, 2024
Oct 19, 2024
Sep 27, 2024
Dec 4, 2024
Nov 29, 2024
Oct 24, 2024
Oct 24, 2024
Sep 10, 2024
Sep 26, 2024
Sep 10, 2024

Repository files navigation

Proyecto individual módulo Front End

Aplicación eCommerce sin pasarela de pagos

Características

  • Como usuario visitante:
    • Navegar la tienda, buscar productos por nombre, filtrar productos por categoría (en sub paginas).
    • Ver página de detalles de un producto.
    • Ordenar por mayor y menor precio, más vendidos y más nuevos.
    • Agregar productos a carrito de compras persistente en almacenamiento local.
    • Llegar a instancia de check-out, donde será instado a regitrarse para completar una compra.
  • Como usuario registrado (comprador):
    • Crear una cuenta distinguida tanto por nombre de usuario como e-mail.
    • Modificar datos personales (Nombre, apellido y lista de domicilios de envío), persistente en base de datos.
    • Cargar foto de perfil
    • Completar una compra en un simulacro de pago exitoso.
    • Ver historial de compras con detalle de fecha y productos, persistente en base de datos.
  • Como usuario empleado (vendedor):
    • Acceder a ruta protegida panel de administrador.
    • Crear, editar, eliminar productos.
    • Cargar imagen de producto.
    • Ver lista de productos y estadísticas básicas de ventas (filtrado unicamente a sus productos creados).
  • Como usuario administrador:
    • Todos los privilegios de empleado.
    • Ver y editar todos los productos.
    • Ver lista de usuarios.
    • Crear nuevos usuarios con rol de empleado (vendedor)
    • Activar y desactivar usuarios, otorgar rol de administrador a los empleados.
  • Servicio de Email transaccional:
    • Verificación de cuenta a través de link de activación.
    • Cambio de contraseña con link de autenticación.
    • Confirmación de compra.

Tecnologías y frameworks utilizados

  • Next.JS (v14.2.15)
  • Tailwind CSS
  • Axios (v1.7)
  • Zod (v3.23)

Requisitos previos

  • Node.js (v18.x +)
  • npm (v10.x +)
  • MongoDB Atlas (DBaaS)

Instalación

  1. Clonar repositorio
git clone https://github.com/andresbonelli/proyecto-final-frontend
  1. Navegar a directorio raíz
cd proyecto_final_frontend
  1. Instalar dependencias
npm install
  1. Crear archivo .env.local y añadir a gitignore
touch .env.local
echo '.env.local' >> .gitignore
  1. Añadir variables de entorno a .env.local (ver .env.example):
(ver variables)
NEXT_PUBLIC_API_URL="https://vocal-nelie-andresbonelli-1d085aa1.koyeb.app"
SECRET_KEY="encryption_key"
NODE_ENV="development"
  1. Ejecutar modo de desarrollo.
npm run dev

Navegar a la App expuesta en http://localhost:3000

Usuario administrador de prueba:

(ver credenciales) - Username: "admin" - Password: "admin"