Clon de Google Translate | React, TypeScript, ChatGPT + ViteTest 🌐

Create your own Google Translate clone in this tutorial! Learn step by step how to build a modern and fluid interface with React and TypeScript. Discover how to integrate ChatGPT to add intelligent translation functionality.

React course repository: https://github.com/midudev/aprendiendo-react

🌐 Threads: https://www.threads.net/@midu.dev
🌟 Community Discord: https://discord.com/invite/midudev
🎥 Follow me on Twitch for more livestreams: https://www.twitch.tv/midudev
🎞 Instagram: https://www.instagram.com/midu.dev/
🐦 Twitter: https://twitter.com/midudev
🔴 Tiktok: https://www.tiktok.com/@midudev

Video timestamps:
0:00 Explaining the project: technologies and more...
1:12 Let's get started
1:55 Set up Eslint
5:34 Install React Bootstrap
6:35 npm run dev
9:12 What is a Reducer
11:38 Applying Reducer Steps
17:26 Typing data with TypeScript
26:01 Creating a Custom Hook
29:19 Fixing the PayLoad
34:44 What is keyof in TypeScript
35:29 What is Dispatch
36:22 Using React Bootstrap
43:54 3 Ways to Type Props & FC
47:11 HandleChange and TypeScript Events
54:18 TypeScript Enums
57:17 Creating TextAreas with styles
01:10:32 Integrating ChatGPT
01:11:33 NOTICE
01:12:56 Alternatives to OpenAI API
01:14:31 Configuration
01:22:21 Usage of == in TypeScript
01:24:17 Testing our Google Translate
01:29:30 Custom Debounce Hook
01:30:35 What is Debounce
01:38:10 Displaying our Google Translate
01:39:41 Fixing the Switch
01:42:49 Adding the Copy Text button
01:45:26 Text to Speech
01:50:19 Fixing "my name is midu..."
01:51:08 Changing the Speaker's speed
01:52:49 Testing
01:53:00 Configuring Vite.config.ts
01:59:49 Showing the Test
02:00:04 Project on Github

#chatgpt #google