Random User App

Aplicación web construida con Next.js (App Router) que obtiene y muestra un usuario aleatorio desde https://randomuser.me/api/. Incluye un hook personalizado, componentes de UI, manejo de carga y errores, notificaciones y estilos con Tailwind CSS.

¿Qué se implementó?

• Hook useRandomUser para gestionar estado de usuario, carga y errores, y refresco.
• Servicio userService que consume la API pública randomuser.me con manejo básico de errores.
• Componentes de presentación: UserCard, UserAvatar, UserInfo, ErrorMessage, Button, LoadingSpinner, Toast.
• Notificaciones con react-toastify para éxito y error.
• Estilos con Tailwind CSS v4 y layout básico en src/app/page.tsx.

Requisitos

• Node.js 18+ (recomendado 20+)
• npm (o yarn/pnpm/bun)

Instalación

npm install
# o
yarn
# o
pnpm install
# o
bun install

Ejecutar en desarrollo

npm run dev

Luego abre http://localhost:3000 en tu navegador.

Construir para producción

npm run build
npm start

Linting

npm run lint

Scripts disponibles

• dev: inicia el servidor de desarrollo de Next.js.
• build: genera el build de producción.
• start: arranca el servidor en modo producción (requiere haber hecho build).
• lint: ejecuta ESLint.

Estructura relevante

• src/app/page.tsx: página principal que consume el hook y muestra UserCard.
• src/hooks/useRandomUser.js: lógica de obtención y refresco del usuario.
• src/services/userService.js: llamada a la API randomuser.me.
• src/components/*: componentes de interfaz (tarjeta, avatar, info, errores, botón y spinner).
• src/app/globals.css: estilos globales con Tailwind.

Tecnologías

• Next.js 15, React 19, Tailwind CSS 4.
• react-toastify para notificaciones.

Despliegue

Puedes desplegar fácilmente en Vercel. Consulta la guía oficial: https://nextjs.org/docs/app/building-your-application/deploying.