enkilabs

Posts

Nov 27, 2025
Desarrollando Jombo: Aplicando Vibe Coding al Desarrollo de Software
Actualmente estoy trabajando en Jombo, un proyecto emocionante que estoy desarrollando aplicando los principios del vibe coding. Esta metodología de desarrollo se centra en mantener el flujo, la creatividad y la intuición como motores principales del proceso de construcción de software.

🤔 ¿Qué es Vibe Coding?

Vibe coding es una aproximación al desarrollo de software que prioriza:
- Flujo continuo: Mantener el momentum y evitar interrupciones innecesarias
- Desarrollo intuitivo: Confiar en la experiencia y la intuición del desarrollador
- Iteración rápida: Construir, probar y ajustar de forma ágil
- Creatividad sin límites: Explorar soluciones innovadoras sin restricciones excesivas
🚀 El Proyecto Jombo

Jombo es una aplicación web moderna construida con tecnologías de vanguardia que combina un frontend dinámico con una API robusta.

Arquitectura del Proyecto

El proyecto está dividido en dos repositorios principales:

Frontend con Next.js

El frontend de Jombo está desarrollado con Next.js, aprovechando sus capacidades de renderizado del lado del servidor, rutas optimizadas y una experiencia de desarrollo excepcional. Ofrece una interfaz de usuario fluida, moderna e intuitiva.

🔗 Repositorio Frontend: github.com/aiw3ndil/jombo-frontend

API Backend con Ruby on Rails

La API está construida con Ruby on Rails, un framework robusto y elegante que facilita el desarrollo rápido sin sacrificar calidad. Proporciona la lógica de negocio, gestión de datos y está diseñada para ser escalable y eficiente.

🔗 Repositorio API: github.com/aiw3ndil/jombo-api

💡 Aplicando Vibe Coding en Jombo

Durante el desarrollo de Jombo, he aplicado los principios del vibe coding de las siguientes formas:
- Desarrollo en sprints creativos: Sesiones intensivas de programación donde el código fluye naturalmente
- Prototipado rápido: Implementación de features experimentales para validar ideas rápidamente
- Refactoring orgánico: Mejora continua del código siguiendo la intuición y las mejores prácticas
- Experimentación constante: Probar nuevas librerías y patrones sin miedo al cambio
🔮 Próximos Pasos

El proyecto continúa evolucionando, y seguiré aplicando vibe coding mientras añado nuevas funcionalidades y optimizo la experiencia del usuario. Mantente atento para más actualizaciones sobre el progreso de Jombo.

¿Te interesa el vibe coding o quieres saber más sobre Jombo? ¡Visita los repositorios en GitHub y no dudes en contribuir o compartir tus comentarios!
Nov 26, 2025
Como crear una pagina multiidioma con react
🌍 Cómo Crear una Página Web Multiidioma con Next.js: Guía Completa

Next.js es el mejor framework para crear aplicaciones web modernas en React, y una de sus mayores ventajas es la facilidad para implementar internacionalización (i18n). Ya sea para una web personal, un SaaS o una tienda online, ofrecer varios idiomas te permite llegar a más usuarios y mejorar la experiencia de navegación.

En esta guía aprenderás a crear una web multiidioma con Next.js usando next-intl, la librería más recomendada en 2025 por su sencillez, SSR amigable y compatibilidad total con App Router.

🧠 ¿Por qué usar Next.js para una web multilingüe?

Next.js facilita todo lo relacionado con idiomas:

Rutas automáticas por idioma (/en, /es, /fi)

Excelente SEO gracias a hreflang

Carga de traducciones optimizada

Componentes renderizados en servidor con el idioma correcto

Tipado fuerte si usas TypeScript

🛠️ Librería recomendada: next-intl

Existen varias opciones, pero hoy la mejor para el App Router es next-intl, que:

✔️ Funciona con Server Components ✔️ Tiene soporte para layouts multiidioma ✔️ No genera bundle innecesario ✔️ Es sencilla de mantener

🚀 Implementación paso a paso en Next.js
1. Instalar dependencias npm install next-intl
2. Crear la estructura de traducciones
En un proyecto con App Router:
```
/app
  /[locale]
    page.js
    layout.js
/locales
  /en
    common.json
  /es
    common.json
```
Ejemplo de locales/es/common.json:
```
{
  "welcome": "Bienvenido a mi web en Next.js",
  "description": "Esta página es multiidioma usando next-intl."
}
```
Ejemplo de locales/en/common.json:
```
{
  "welcome": "Welcome to my Next.js website",
  "description": "This page is multilingual using next-intl."
}
```
1. Configurar el middleware para detectar idioma
Crea middleware.js:
```
import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'es'],
  defaultLocale: 'en'
});

export const config = {
  matcher: ['/((?!_next|.*\\..*).*)']
};
```
Esto hace que / redirija a /en por defecto o al idioma del navegador.
1. Crear el layout multiidioma
```
Archivo: app/[locale]/layout.js
import { NextIntlClientProvider } from 'next-intl';
import { notFound } from 'next/navigation';
import React from 'react';
 
export default async function RootLayout({ children, params }) {
  let messages;
  try {
    messages = (await import(`../../locales/${params.locale}/common.json`)).default;
  } catch (error) {
    notFound();
  }
 
  return (
    <html lang={params.locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
```
1. Usar traducciones en un componente
Archivo: app/[locale]/page.js
```
import { useTranslations } from 'next-intl';

export default function Home() {
  const t = useTranslations();

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("description")}</p>
    </div>
  );
}
```
1. Crear un selector de idioma
Archivo: app/components/lang-switcher.js
```
"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export default function LangSwitcher() {
  const pathname = usePathname();

  const createPath = (locale) => {
    const parts = pathname.split('/');
    parts[1] = locale;
    return parts.join('/');
  };

  return (
    <div style=>
      <Link href={createPath("es")}>🇪🇸 Español</Link>
      <Link href={createPath("en")}>🇬🇧 English</Link>
    </div>
  );
}
```
📦 Resultado final

Al terminar tendrás:

✔️ Una web Next.js con rutas multiidioma (/es, /en) ✔️ Detección automática del idioma del usuario ✔️ Traducciones cargadas en servidor ✔️ SEO completamente optimizado ✔️ Un selector de idioma funcional

🧩 Conclusión

Next.js hace que crear una web multiidioma sea rápido y elegante. Con next-intl consigues:

Código limpio

SSR correcto

Rutas perfectas para SEO

Rendimiento óptimo

Es la solución ideal para proyectos serios en producción.

Posts

Desarrollando Jombo: Aplicando Vibe Coding al Desarrollo de Software

🤔 ¿Qué es Vibe Coding?

🚀 El Proyecto Jombo

Arquitectura del Proyecto

Frontend con Next.js

API Backend con Ruby on Rails

💡 Aplicando Vibe Coding en Jombo

🔮 Próximos Pasos

Como crear una pagina multiidioma con react