We will build a JavaScript web app that takes in some text and does TTS as well as the option to select a language to translate to. We will use the Vercel CLI and a serverless function fot the translation and API KEY security. Tailwind CSS for styling.

Final Code:
https://github.com/bradtraversy/tts-translate

For more Vanilla JS projects, check out these courses:

20 Vanilla JS Projects:
https://www.traversymedia.com/20-Vanilla-JavaScript-Projects

Modern JS From the Beginning:
https://www.traversymedia.com/modern-javascript-2-0

50 Projects In 50 Days:
https://www.traversymedia.com/50-Projects-In-50-Days

Timestamps:
0:00 – Intro
2:22 – Project Structure
4:38 – HTML & Tailwind Classes
8:32 – Web Speech API & TTS
11:10 – Get Voices
16:20 – Language Selection
20:06 – Google Translate API Key Setup
21:29 – Vercel CLI Setup
23:57 – Creating a Serverless Function
26:57 – dotenv Setup
29:22 – Google Translate API Request
32:58 – Test Function With Postman
34:18 – Make Request To Serverless Function Endpoint
38:39 – Translate Text & Play TTS
43:21 – Deploy To Vercel

source