DEV Community

Derlys
Derlys

Posted on

CanguDev: ¿Cómo construí mi propio mentor de inglés técnico con Next.js y Gemini AI?

#nextjs #ai #tutorial #spanish

CanguDev: Cómo construí mi propio mentor de inglés técnico con Next.js y Gemini AI

¡Hola, comunidad! Hoy quiero compartir con ustedes el proceso de creación de CanguDev, una aplicación que nació de una necesidad personal: mejorar mi inglés técnico para alcanzar un nivel C1, enfocado específicamente en el mundo del desarrollo de software.

En este tutorial, te guiaré paso a paso por el proceso de construcción, desde la idea inicial hasta el despliegue como una PWA (Progressive Web App).

1. El Concepto: ¿Por qué CanguDev?

Como desarrolladores, el inglés es nuestra "lengua materna" técnica. Sin embargo, pasar del nivel intermedio al avanzado requiere práctica constante con terminología real. CanguDev actúa como un mentor que analiza textos técnicos y te proporciona feedback instantáneo, correcciones y explicaciones gramaticales contextualizadas.

El Stack Tecnológico

  • Framework: Next.js (App Router)
  • Lenguaje: TypeScript
  • Estilos: Tailwind CSS
  • IA: Google Generative AI (Gemini 1.5 Flash)
  • Despliegue: Vercel

2. Inicialización del Proyecto

Primero, creamos nuestro proyecto base de Next.js. En la terminal, ejecutamos:

npx create-next-app@latest cangudev --typescript --tailwind --eslint
Enter fullscreen mode Exit fullscreen mode

Durante la configuración, asegúrate de seleccionar el uso de App Router y src/ directory si así lo prefieres.

3. Integrando el "Cerebro": Gemini AI

Para que CanguDev pueda analizar inglés, necesitamos conectarlo con el modelo de Google.

Paso A: Obtener la API Key

  1. Ve a Google AI Studio.
  2. Crea un nuevo proyecto y genera tu API Key.
  3. En la raíz de tu proyecto, crea un archivo .env.local y guarda tu llave: 
GOOGLE_GENERATIVE_AI_API_KEY=Tu_API_Key_Aqui
Enter fullscreen mode Exit fullscreen mode

Paso B: Instalación de la SDK

Instalamos la librería oficial de Google:

pnpm add @google/generative-ai
Enter fullscreen mode Exit fullscreen mode

4. Creando el Analizador (Route Handler)

En Next.js, creamos un endpoint en app/api/analyze/route.ts que se encargará de procesar las peticiones. Aquí es donde ocurre la magia del Prompt Engineering.

import { GoogleGenerativeAI } from "@google/generative-ai";
import { NextResponse } from 'next/server';

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GENERATIVE_AI_API_KEY!);

export async function POST(request: Request) {
  try {
    const { text } = await request.json();
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

    const prompt = `
      Actúa como un mentor de inglés técnico nivel C1 para desarrolladores.
      Analiza el siguiente texto y devuelve un JSON con:
      1. Correcciones gramaticales.
      2. Sugerencias de vocabulario técnico más avanzado.
      3. Una breve explicación del "por qué" de los cambios.

      Texto a analizar: "${text}"
    `;

    const result = await model.generateContent(prompt);
    const response = await result.response;
    return NextResponse.json({ analysis: response.text() });
  } catch (error) {
    console.error("Error en la IA:", error);
    return NextResponse.json({ error: "Error procesando la IA" }, { status: 500 });
  }
}
Enter fullscreen mode Exit fullscreen mode

5. La Experiencia de Usuario: PWA e Interfaz

Queremos que CanguDev se sienta como una app nativa en nuestro móvil. Para ello, configuramos las capacidades de PWA.

Configuración del Manifest

Creamos un archivo public/manifest.json:

{
  "name": "CanguDev Mentor",
  "short_name": "CanguDev",
  "description": "Analizador de inglés técnico C1 para devs",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f8fafc",
  "theme_color": "#2563eb",
  "icons": [
    {
      "src": "/logo.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Configuración del Layout

En app/layout.tsx, añadimos los metadatos necesarios:

export const metadata: Metadata = {
  title: "CanguDev",
  description: "AI Technical English Mentor",
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "CanguDev",
  },
};
Enter fullscreen mode Exit fullscreen mode

6. Desafíos y Aprendizajes

Durante el desarrollo, me encontré con algunos obstáculos interesantes:

  1. Conflictos de Node: Aprendí que mezclar npm y pnpm puede causar errores de "lock file". La solución fue limpiar node_modules y elegir un solo gestor.
  2. Depuración de la IA: Inicialmente, el modelo me devolvía errores de formato. Ajustar el System Prompt y verificar que la API Key estuviera correctamente cargada en Vercel fue clave.
  3. Instalación en iOS: A diferencia de Android, en iOS los usuarios deben usar la opción "Añadir a pantalla de inicio" desde Safari para instalar la PWA.

7. Despliegue

Finalmente, subí el código a GitHub y lo conecté con Vercel. ¡En menos de 2 minutos la app estaba en producción!

Conclusión

Construir CanguDev no solo me ayudó a mejorar mi inglés, sino que me permitió entender mejor cómo integrar IA en aplicaciones modernas de forma gratuita (usando el tier gratuito de Gemini).

¿Qué sigue? Planeo añadir reconocimiento de voz para practicar la pronunciación y un historial de errores comunes.

Mira el repositorio 👉🏽 aquí

¡Espero que este tutorial te inspire a crear tu propia herramienta personalizada! Si tienes dudas, déjalas en los comentarios. 🚀

Top comments (0)