Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rodriiandino/aprender-japones-flashcards
Aprende Japones con esta Web
https://github.com/rodriiandino/aprender-japones-flashcards
next14 nextjs reactjs tailwind typescript zustand
Last synced: 7 days ago
JSON representation
Aprende Japones con esta Web
- Host: GitHub
- URL: https://github.com/rodriiandino/aprender-japones-flashcards
- Owner: Rodriiandino
- Created: 2024-03-21T18:27:44.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-08-04T20:00:11.000Z (6 months ago)
- Last Synced: 2024-08-04T21:49:20.542Z (6 months ago)
- Topics: next14, nextjs, reactjs, tailwind, typescript, zustand
- Language: TypeScript
- Homepage: https://aprender-japones-flashcards.vercel.app
- Size: 545 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Aprende Japones con esta Web
## Puedes aprender Hiragana y Katakana
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.
### Funcionalidades
- 🔤 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.
#### ✨Inteligencia Artificial Integrada:
🪄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:
1. Accede a la Sección de AI en el Aside: Encuentra la sección dedicada a la IA en el menú lateral.
2. Selecciona el Proveedor de AI: Escoge entre OpenAI GPT-4 o Meta Llama-3-8b-instruct-groq.
3. Introduce tu Token: Introduce tu token correspondiente al proveedor elegido.
4. Activación: Con el token introducido, se habilitarán dos botones:
- Desactivar: Para desactivar la IA.
- Abrir Chat: Para iniciar un chat interactivo.
### Tecnologías
- React.js
- Next.js
- Tailwind CSS
- TypeScript
- Zustand
- Componenste UI de shadcn/ui
- Vercel SDK AI
### Cómo Utilizar
1. Puedes acceder a la aplicación en línea en esta URL: https://aprender-japones-flashcards.vercel.app/
2. 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.
3. ¡Y disfruta aprendiendo los alfabetos japoneses!
