Mueve Gallery es un sitio construido con Next.js 15 (en modo App Router) que presenta la colección de la galería con una experiencia inmersiva. Todas las rutas comparten un RootLayout que fija el encabezado y el pie de página, aplica la tipografía Work Sans y sincroniza la temática visual mediante el componente RouteTheme. El contenido editorial proviene de Sanity CMS y se consulta en tiempo de renderizado, lo que permite que la página de inicio, las fichas de artistas y el visor de obras muestren datos actualizados sin pasos manuales adicionales.
src/app– Árbol de rutas. Incluye la página de inicio,/about, el índice y detalle de artistas (/artists,/artists/[slug],/artists/[slug]/work/[artId]), además del Sanity Studio embebido en/studio.src/components– Componentes cliente como la navegación, los carruseles de portada y artistas, y el visor modal de obras.src/sanity– Configuración del CMS (clientes reutilizables, utilidades de Live Content, generador de URLs de imágenes y esquemas de documentos para slides, artistas, obras, exposiciones y la página About).public– Activos estáticos, incluida la imaginería por defecto y recursos compartidos.- Archivos de configuración –
next.config.mjs,sanity.config.js,eslint.config.mjs,package.jsony otros archivos que controlan el build, linting e integración con Sanity.
- Página de inicio (
src/app/page.js): Consulta los slides principales en Sanity, respeta la duración por slide y renderizaHeroCarouselcon capas de fondo en fade. - Índice de artistas (
src/app/artists/page.js): Obtiene slugs y nombres, alinea la lista con la cuadrícula global y deshabilita la revalidación para ver cambios en desarrollo. - Detalle de artista (
src/app/artists/[slug]/page.js): Une el registro del artista con sus obras relacionadas, normaliza metadatos paraArtistCarousely muestra biografía y un grid de tarjetas de obra. - Detalle de obra (
src/app/artists/[slug]/work/[artId]/page.js): Reutiliza la consulta de artista, calcula el índice inicial de la obra y montaArtworkViewer, que sincroniza la URL, fija la columna de metadatos y expone navegación manual. - Página About (
src/app/about/page.js): Ofrece contenido bilingüe con tipografía personalizada que simula una columna editorial. - Sanity Studio (
src/app/studio/[[...tool]]/page.js): Monta la interfaz de edición directamente dentro del proyecto Next.js.
- Las variables globales en
src/app/globals.cssdefinen espaciados, anchos de columna y tokens de color;RouteThemealterna clases en el<body>comois-homepara recolorear la navegación por ruta. layout.module.cssmantiene el encabezado y el pie fijos y aplica el espaciado base. Los módulos CSS específicos (transiciones del hero, carruseles a pantalla completa, grillas con metadatos fijos) refinan cada experiencia.
sanity.config.jsconfigura el Studio, agrega Structure Builder y habilita Vision.- Los esquemas en
src/sanity/schemaTypesdescriben slides, artistas, obras, exposiciones y el contenido de About. src/sanity/env.jscentralizaNEXT_PUBLIC_SANITY_PROJECT_ID,NEXT_PUBLIC_SANITY_DATASETyNEXT_PUBLIC_SANITY_API_VERSION, con valores por defecto para comenzar rápido.
- Scripts npm (
package.json):npm run dev– Inicia el servidor de desarrollo con Turbopack.npm run build– Genera el build de producción.npm run start– Levanta el servidor de producción.npm run lint– Ejecuta ESLint sobre.js,.jsxy módulos CSS.npm run format– Aplica Prettier a todo el repositorio.
- Calidad de código – Husky y lint-staged formatean y lintéan archivos automáticamente antes de cada commit.
Puedes correr el comando desde cualquier terminal posicionada en la raíz del proyecto (web_mueve). Dos opciones habituales:
- Terminal integrada de VS Code: abre la carpeta del proyecto en VS Code, presiona Ctrl/Cmd +
</kbd> para abrir la terminal integrada y asegúrate de que el prompt muestre la ruta del proyecto. Luego escribenpm run lint` y presiona Enter. - Terminal del sistema (macOS Terminal, Windows PowerShell, etc.): navega hasta la carpeta del repositorio con
cd /ruta/a/web_muevey ejecutanpm run lint.
El script lanzará ESLint con la configuración del repositorio y reportará cualquier error o advertencia de estilo. Si se detectan problemas, corrige los archivos indicados y vuelve a ejecutar el comando hasta que finalice sin errores.
- Asegúrate de haber instalado las dependencias al menos una vez con
npm instally de encontrarte en la raíz del proyecto (web_mueve). - Si ves un error como
'isHome' is assigned a value but never used, significa que tu copia local aún tiene una variable declarada que ya no se utiliza en el componenteHeader. Puedes solucionarlo actualizando tu rama (git pull) o eliminando la constante sobrante ensrc/components/Header.js. - Cualquier otro mensaje seguirá la estructura
<archivo>:<línea>:<columna> <nivel> <descripción>; abre el archivo indicado, revisa la línea reportada y aplica la corrección sugerida por ESLint.
- Node.js 20 o superior y npm 10 (o pnpm/yarn/bun si lo prefieres).
- Acceso al proyecto de Sanity con credenciales válidas.
- Variables de entorno opcionales si necesitas sobreescribir los valores por defecto:
NEXT_PUBLIC_SANITY_PROJECT_ID="<tu-project-id>" NEXT_PUBLIC_SANITY_DATASET="production" NEXT_PUBLIC_SANITY_API_VERSION="2025-01-01"
- Clonar el repositorio:
git clone git@github.com:<tu-usuario>/<tu-repo>.git cd <tu-repo>
- Instalar dependencias:
npm install
- Configurar variables de entorno (opcional si usas los valores por defecto). Crea
.env.localy define las variables anteriores si necesitas personalizarlas. - Iniciar el servidor de desarrollo:
El sitio quedará disponible en http://localhost:3000.
npm run dev
- Ejecutar checks antes de abrir un PR o entregar trabajo:
npm run lint
- Build de producción (para validar antes de desplegar):
npm run build npm run start
- Sincroniza la rama principal:
git checkout main && git pull origin main. - Crea una rama descriptiva para tu trabajo:
git checkout -b feature/<nombre>. - Construye funcionalidades siguiendo los patrones existentes (componentes reutilizables, módulos CSS, consultas a Sanity).
- Ejecuta
npm run linty resuelve los issues. - Haz commits frecuentes con mensajes claros (p. ej.
git commit -m "feat: agregar carrusel de ferias"). - Actualiza la documentación (incluido este README) cada vez que agregues rutas, esquemas o scripts nuevos.
- Sube tu rama (
git push origin feature/<nombre>) y abre un Pull Request. - Solicita revisiones y atiende el feedback antes de fusionar.
- Implementar las rutas pendientes (
/ferias,/exposiciones,/publicaciones) y sus esquemas en Sanity. - Integrar
sanityFetch/SanityLivepara obtener previsualizaciones en vivo. - Afinar la experiencia responsive de los carruseles y el visor de obras en dispositivos móviles.