Clon de Google Translate | React, TypeScript, ChatGPT + ViteTest 🌐
824¡Crea tu propio clon de Google Translate en este tutorial! Aprende paso a paso a construir una interfaz moderna y fluida con React y TypeScript. Descubre cómo integrar ChatGPT para agregar una funcionalidad de traducción inteligente
📚 Repositorio del curso ReactJS: https://github.com/midudev/aprendiendo-react
▶ Sígueme en Twitch para más directos: https://www.twitch.tv/midudev
▶ Discord de la comunidad: https://discord.com/invite/midudev
▶ Instagram: https://www.instagram.com/midu.dev/
▶ Twitter: https://twitter.com/midudev
Marcadores del video:
0:00 Explicando el proyecto: tecnologías y más…
1:12 A MOVER LAS MANITAS
1:55 Configurar Eslint
5:34 Instalar React Bootstrap
6:35 npm run dev
9:12 Qué es un Reducer
11:38 Aplicando los Pasos del Reducer
17:26 tipar datos con TypeScript
26:01 Creando un Custom Hook
29:19 Arreglando el PayLoad
34:44 Qué es keyof en TypeScript
35:29 Qué es el Dispatch
36:22 Usar React Bootstrap
43:54 3 Formas de Tipar las Props & FC
47:11 HandleChange y Eventos de TypeScript
54:18 Enums de TypeScript
57:17 Creando los TextArea con estilos
01:10:32 Integrando ChatGPT
01:11:33 AVISO
01:12:56 Alternativas a OpenIA API
01:14:31 Configuración
01:22:21 Uso de == en TypeScript
01:24:17 Probando nuestro Google Translate
01:29:30 Custom Hook Debounce
01:30:35 Qué es un Debounce
01:38:10 Muestra de nuestro Google Translate
01:39:41 Arreglando el Switch
01:42:49 Agregar el botón de Copear el texto
01:45:26 de Texto a Voz
01:50:19 Arreglando el “my name is midu…”
01:51:08 Cambiando la velocidad del Speaker
01:52:49 Haciendo Testing
01:53:00 Configurando el Vite.config.ts
01:59:49 Mostrando el Test
02:00:04 Proyecto en Github
#chatgpt #google