- 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.
- Next.JS (v14.2.15)
- Tailwind CSS
- Axios (v1.7)
- Zod (v3.23)
- Node.js (v18.x +)
- npm (v10.x +)
- MongoDB Atlas (DBaaS)
- Clonar repositorio
git clone https://github.com/andresbonelli/proyecto-final-frontend
- Navegar a directorio raíz
cd proyecto_final_frontend
- Instalar dependencias
npm install
- Crear archivo
.env.local
y añadir a gitignore
touch .env.local
echo '.env.local' >> .gitignore
- 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"
- Ejecutar modo de desarrollo.
npm run dev
Navegar a la App expuesta en http://localhost:3000