🛒 Techland - E-commerce de Tecnología

E-commerce moderno y completo para la venta de gadgets tecnológicos, desarrollado con Next.js 16, TypeScript y MongoDB. Incluye sistema de autenticación, carrito de compras, panel administrativo, internacionalización y más.

Enlaces

Demo en Vercel: https://techland-one.vercel.app/

Características Implementadas

E-commerce Core

✅ Catálogo de productos con búsqueda y filtros por categoría
✅ Carrito de compras con persistencia local
✅ Vista de detalles de productos con modal
✅ Productos destacados en home
✅ Paginación del lado del servidor (server-side pagination)
✅ Filtrado del lado del servidor (server-side filtering)
✅ Diseño responsive (mobile, tablet, desktop)

Autenticación y Usuarios

✅ Sistema de registro y login
✅ Autenticación con Google (NextAuth.js)
✅ Roles de usuario (Admin / Customer)
✅ Protección de rutas según rol
✅ Gestión de sesiones con Context API

Panel Administrativo

✅ Dashboard para administradores
✅ CRUD completo de productos (Crear, Leer, Actualizar, Eliminar)
✅ Subida de imágenes a Cloudinary
✅ Gestión de stock y productos destacados
✅ Validaciones en frontend y backend

Internacionalización (i18n)

✅ Soporte para Español e Inglés
✅ Cambio de idioma en tiempo real
✅ Traducción de toda la interfaz
✅ Descripciones de productos traducidas
✅ Persistencia de idioma preferido

Sistema de Emails

✅ Email de bienvenida al registrarse
✅ Templates HTML personalizados
✅ Integración con Nodemailer (Gmail)

Validaciones y Seguridad

✅ Validaciones en frontend (validaciones manuales)
✅ Validaciones en backend con Yup
✅ Schemas de validación para productos y autenticación
✅ Manejo de errores consistente

UI/UX

✅ Diseño moderno con gradientes y animaciones
✅ Componentes reutilizables (Button, Input, ProductCard, etc.)
✅ Notificaciones toast (React Toastify)
✅ Alertas personalizadas (SweetAlert2)
✅ Menú hamburguesa responsive
✅ Tipografía moderna (Space Grotesk)

Tecnologías Utilizadas

Frontend

Next.js 16 - Framework React con App Router
React 19 - Biblioteca UI
TypeScript - Tipado estático
Tailwind CSS - Estilos utility-first
CSS Modules - Estilos modulares
Heroicons - Iconos

Backend

Next.js API Routes - Endpoints del servidor
MongoDB - Base de datos NoSQL
Mongoose - ODM para MongoDB
NextAuth.js - Autenticación
Nodemailer - Envío de emails

Servicios Externos

Cloudinary - Almacenamiento de imágenes
Vercel - Hosting y despliegue

Validación y Utilidades

Yup - Validación de esquemas
Axios - Cliente HTTP
React Toastify - Notificaciones
SweetAlert2 - Alertas personalizadas

Testing

Jest - Framework de pruebas unitarias
React Testing Library - Utilidades para testing de componentes
Cypress - Pruebas end-to-end (E2E)
ts-node - Ejecución de TypeScript en Jest

Instalación y Configuración

Prerrequisitos

Node.js 18+
npm o yarn
MongoDB Atlas (o MongoDB local)
Cuenta de Cloudinary
Cuenta de Gmail (para emails)

Pasos para clonar y ejecutar

Clonar el repositorio

git clone https://github.com/Susanagc99/Techland.git
cd techland

Instalar dependencias

npm install

Configurar variables de entorno

Crea un archivo .env.local en la raíz del proyecto:

# Base de datos
MONGODB_URI=tu-mongodb-connection-string

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=tu-secret-key-generada

# Cloudinary
CLOUDINARY_CLOUD_NAME=tu-cloud-name
CLOUDINARY_API_KEY=tu-api-key
CLOUDINARY_API_SECRET=tu-api-secret

# Email (Nodemailer)
MAIL_USER=tu-email@gmail.com
MAIL_PASS=tu-app-password-gmail

# URL de la aplicación
NEXT_PUBLIC_APP_URL=http://localhost:3000

Ejecutar en desarrollo

npm run dev

Abrir en el navegador

http://localhost:3000

Estructura del Proyecto

techland/
├── src/
│   ├── app/                 # Rutas y páginas (App Router)
│   │   ├── api/            # API Routes
│   │   ├── dashboard/      # Panel administrativo
│   │   ├── shop/           # Tienda
│   │   ├── cart/           # Carrito
│   │   └── ...
│   ├── components/         # Componentes reutilizables
│   ├── context/            # Context API (Auth, Cart, Language)
│   ├── database/           # Modelos de MongoDB
│   ├── helpers/            # Funciones helper/utilidades
│   ├── i18n/               # Traducciones (es.json, en.json)
│   ├── lib/                # Configuraciones (DB, Cloudinary, Email)
│   ├── schemas/            # Validaciones (Yup schemas)
│   ├── services/           # Lógica de negocio
│   └── styles/             # CSS Modules
├── __tests__/              # Pruebas unitarias (Jest)
├── cypress/                # Pruebas E2E (Cypress)
│   ├── e2e/               # Tests end-to-end
│   ├── fixtures/          # Datos de prueba
│   └── support/           # Comandos personalizados
└── public/                 # Archivos estáticos

Credenciales de Prueba

Usuario Admin

Username: susana
Password: admin123

Usuario Customer

Puedes registrarte desde /register

Funcionalidades por Rol

Customer (Cliente)

Navegar por la tienda
Buscar y filtrar productos
Ver detalles de productos
Agregar productos al carrito
Cambiar idioma (ES/EN)
Registrarse e iniciar sesión

Admin (Administrador)

Acceso exclusivo al dashboard
Crear, editar y eliminar productos
Subir imágenes de productos
Gestionar stock y productos destacados
Ver todos los productos en tabla

Internacionalización

El proyecto soporta Español e Inglés. El idioma se puede cambiar desde el selector en el navbar y se persiste en localStorage.

Todas las páginas están traducidas
Descripciones de productos traducidas manualmente
Categorías y mensajes del sistema traducidos

Sistema de Emails

Al registrarse, los usuarios reciben un email de bienvenida con:

Template HTML personalizado
Diseño responsive
Links a la tienda
Branding de Techland

Configuración requerida:

Gmail con App Password habilitado
Variables MAIL_USER y MAIL_PASS en .env.local

Validaciones

Frontend

Validaciones en tiempo real en formularios
Mensajes de error traducidos
Validación de tipos de archivo
Validación de tamaños de imagen

Backend

Validaciones con Yup en todas las APIs
Schemas para productos (crear/actualizar)
Schemas para autenticación (login/registro)
Validación de categorías y subcategorías
Validación de tipos MIME para imágenes

Paginación y Filtrado del Servidor

El proyecto implementa paginación y filtrado del lado del servidor para optimizar el rendimiento y la escalabilidad.

Características

✅ Paginación del servidor: Solo se cargan los productos de la página actual
✅ Filtrado del servidor: Los filtros se aplican en la base de datos
✅ Búsqueda del servidor: Búsqueda por nombre o descripción en MongoDB
✅ Parámetros de paginación: page y perPage (máximo 100 por página)
✅ Información de paginación: Total de productos, páginas totales, página actual

API Endpoint

GET /api/products

Query Parameters:

page (opcional): Número de página (default: 1)
perPage (opcional): Items por página (default: 8, máximo: 100)
category (opcional): Filtrar por categoría
subcategory (opcional): Filtrar por subcategoría
featured (opcional): Filtrar productos destacados (true/false)
search (opcional): Búsqueda por nombre o descripción

Ejemplo de respuesta:

{
  "success": true,
  "data": [...productos...],
  "pagination": {
    "page": 1,
    "perPage": 8,
    "total": 50,
    "totalPages": 7
  }
}

Implementación

Backend: Usa sort(), skip() y limit() de MongoDB para paginación
- Orden estable con sort({ createdAt: -1, _id: -1 }) para evitar duplicados
- Orden correcto: sort() → skip() → limit() para consistencia
Frontend: Envía parámetros de paginación en cada request
Optimización: Solo se traen los productos necesarios, reduciendo el tiempo de carga

Testing

El proyecto incluye pruebas unitarias y pruebas end-to-end (E2E) para garantizar la calidad del código.

Pruebas Unitarias (Jest)

Las pruebas unitarias están ubicadas en __tests__/ y utilizan Jest y React Testing Library.

Ejecutar pruebas unitarias:

npm test              # Ejecutar todas las pruebas
npm run test:watch    # Modo watch (observa cambios)
npm run test:cov      # Con cobertura de código

Tests implementados:

✅ Componente Button (6 tests)
- Renderizado con texto correcto
- Manejo de eventos onClick
- Estado disabled
- Variantes (primary, secondary)
- Tamaños (sm, md, lg)
- Propiedad fullWidth

Pruebas E2E (Cypress)

Las pruebas end-to-end están ubicadas en cypress/e2e/ y cubren flujos completos de usuario.

Ejecutar pruebas E2E:

npm run cypress:open        # Abrir interfaz gráfica de Cypress
npm run cypress:run         # Ejecutar en modo headless
npm run cypress:test        # Iniciar servidor y ejecutar tests
npm run cypress:test:open   # Iniciar servidor y abrir interfaz

Tests implementados:

Registro de Usuario (`register.cy.ts` - 9 tests)

✅ Interfaz del formulario (campos requeridos, labels)
✅ Validación de formulario (campos vacíos, formato email, longitud contraseña, coincidencia de contraseñas)
✅ Registro exitoso
✅ Estado de carga durante registro
✅ Navegación al login

Flujo Completo de Usuario (`user-flow.cy.ts` - 3 tests)

✅ Registro y login automático
✅ Manejo de errores de login
✅ Navegación por la tienda

Total: 12 tests E2E pasando ✅

Configuración de Testing

Jest (jest.config.ts):

Entorno: jsdom para testing de componentes React
Transformación TypeScript con ts-jest
Mapeo de alias @/ para imports
Mock de archivos CSS y assets

Cypress (cypress.config.ts):

Base URL: http://localhost:3000
Viewport: 1280x720
Timeouts configurados para requests y comandos
Screenshots en caso de fallos

Estructura de Testing

techland/
├── __tests__/              # Pruebas unitarias
│   └── Button.test.tsx
├── cypress/
│   ├── e2e/               # Pruebas E2E
│   │   ├── register.cy.ts
│   │   └── user-flow.cy.ts
│   ├── fixtures/          # Datos de prueba
│   └── support/           # Comandos personalizados
├── jest.config.ts         # Configuración Jest
└── jest.setup.ts          # Setup de Jest

Scripts Disponibles

npm run dev              # Desarrollo (localhost:3000)
npm run build             # Build de producción
npm run start              # Servidor de producción
npm run lint               # Linter

# Testing
npm test                   # Pruebas unitarias (Jest)
npm run test:watch         # Pruebas unitarias en modo watch
npm run test:cov           # Pruebas unitarias con cobertura
npm run cypress:open       # Abrir Cypress (interfaz gráfica)
npm run cypress:run        # Ejecutar Cypress (headless)
npm run cypress:test       # Iniciar servidor y ejecutar Cypress

Despliegue

El proyecto está configurado para desplegarse en Vercel:

Conecta tu repositorio a Vercel
Configura las variables de entorno en Vercel
Deploy automático en cada push

Variables de entorno necesarias en Vercel:

MONGODB_URI
NEXTAUTH_URL
NEXTAUTH_SECRET
CLOUDINARY_CLOUD_NAME
CLOUDINARY_API_KEY
CLOUDINARY_API_SECRET
MAIL_USER
MAIL_PASS
NEXT_PUBLIC_APP_URL

Autor

Susanagc

Licencia

Este proyecto es privado y está destinado para fines educativos.

Si te gustó el proyecto, no olvides darle una estrella en GitHub!

Name		Name	Last commit message	Last commit date
Latest commit History 29 Commits
.vscode		.vscode
__tests__		__tests__
cypress		cypress
public		public
src		src
.gitignore		.gitignore
README.md		README.md
cypress.config.ts		cypress.config.ts
eslint.config.mjs		eslint.config.mjs
jest.config.ts		jest.config.ts
jest.setup.ts		jest.setup.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🛒 Techland - E-commerce de Tecnología

Enlaces

Características Implementadas

E-commerce Core

Autenticación y Usuarios

Panel Administrativo

Internacionalización (i18n)

Sistema de Emails

Validaciones y Seguridad

UI/UX

Tecnologías Utilizadas

Frontend

Backend

Servicios Externos

Validación y Utilidades

Testing

Instalación y Configuración

Prerrequisitos

Pasos para clonar y ejecutar

Estructura del Proyecto

Credenciales de Prueba

Usuario Admin

Usuario Customer

Funcionalidades por Rol

Customer (Cliente)

Admin (Administrador)

Internacionalización

Sistema de Emails

Validaciones

Frontend

Backend

Paginación y Filtrado del Servidor

Características

API Endpoint

Implementación

Testing

Pruebas Unitarias (Jest)

Pruebas E2E (Cypress)

Registro de Usuario (register.cy.ts - 9 tests)

Flujo Completo de Usuario (user-flow.cy.ts - 3 tests)

Configuración de Testing

Estructura de Testing

Scripts Disponibles

Despliegue

Autor

Licencia

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Registro de Usuario (`register.cy.ts` - 9 tests)

Flujo Completo de Usuario (`user-flow.cy.ts` - 3 tests)