Esta es una aplicación web desarrollada con Next.js que te brinda una experiencia de aprendizaje interactiva para los alfabetos japoneses Hiragana y Katakana.
- 🔤 Elige entre practicar Hiragana, Katakana o próximamente, Kanji.
- 📚 Visualiza tarjetas con los caracteres, su pronunciación en Romaji y su contraparte.
- 🎲 Selecciona entre modo de aprendizaje aleatorio o secuencial.
- 📊 Sigue tu progreso y estadísticas de respuestas correctas.
- 💯 Disfruta de animaciones que indican si tu respuesta es correcta o incorrecta.
- ⭐ Favoritos: Puedes guardar tus caracteres favoritos y enfocarte en aprender esos primero.
- 🔄 Aprendizaje combinado: Practica Hiragana y Katakana simultáneamente para un aprendizaje más integral.
- 🖼️ Modal de detalles: Haz clic en una tarjeta para abrir un modal que muestra diferentes variantes tipográficas del carácter.
🪄Generación de Ejemplos: En los modales de cada carácter, un botón te permite generar palabras que usen ese carácter, con formato: "Palabra en japonés (Pronunciación) - Traducción".
🔊Pistas de Pronunciación: Durante una prueba, puedes generar una pista para ayudarte a recordar la pronunciación correcta.
🗨️Chat Interactivo: ¡Ahora puedes abrir un chat y preguntar cualquier duda sobre el idioma japonés!
🌐 Activación de la Inteligencia Artificial:
Para activar la IA en la aplicación, sigue estos sencillos pasos:
-
Accede a la Sección de AI en el Aside: Encuentra la sección dedicada a la IA en el menú lateral.
-
Selecciona el Proveedor de AI: Escoge entre OpenAI GPT-4 o Meta Llama-3-8b-instruct-groq.
-
Introduce tu Token: Introduce tu token correspondiente al proveedor elegido.
-
Activación: Con el token introducido, se habilitarán dos botones:
-
Desactivar: Para desactivar la IA.
-
Abrir Chat: Para iniciar un chat interactivo.
- React.js
- Next.js
- Tailwind CSS
- TypeScript
- Zustand
- Componenste UI de shadcn/ui
- Vercel SDK AI
- Puedes acceder a la aplicación en línea en esta URL: https://aprender-japones-flashcards.vercel.app/
- O bien, clona este repositorio en tu máquina local:
- Ejecuta
npm install
para instalar las dependencias. - Ejecuta
npm run dev
para iniciar la aplicación en modo de desarrollo. - Abre tu navegador y visita
localhost
en el puerto donde se levantó la aplicación.
- ¡Y disfruta aprendiendo los alfabetos japoneses!