🔴 Let’s build Google Translate Clone with NEXT.JS 14! (MS Azure, Clerk, MongoDB, Mongoose, OpenAI)
❗️ Get the Code for FREE here (Form must be submitted, not skipped!): https://Aka.ms/sonnyopenAI
❗️ Get started with Clerk here: https://go.clerk.com/vkukrY2
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: https://www.universityofcode.com
🔴 Looking for the code for my other builds? 🛠️
https://links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycoding...
Join me as I show you how to build a Google Translate 2.0 clone from scratch with the latest Next.js 14. You'll learn the following in this build:
👉 Create a Beautiful UI & UX for our Google Translate 2.0 clone!
👉 How to use the Azure OpenAI Whisper Speech Recognition Service to convert speech to text!
👉 How to implement MongoDB in combination with Azure Cosmos DB to provide a scalable storage/database solution!
👉 How to use the MongoDB VS Code Extension to navigate the database collection & documents when developing
👉 How to use Mongoose, a third-party library for MongoDB, to help structure and access your data with ease.
👉 How to use the Clerk to add Google user authentication with ease! (Including Authentication Middleware for Next.js & The new Clerk Core 2.0 update)
👉 How to utilise the power of Server Actions & caching in Next.js to create an optimal & efficient user experience!
👉 How to create and leverage the power of Azure AI Translator to translate text in over 100 languages (Even supports auto language detection)
👉 How to use the MediaRecorder interface of the MediaStream Recording API to capture user audio!
👉 Create a Beautiful UI & UX for our Frontend using the highly Popular Shadcn & Tailwind CSS!
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel!
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter
🕐 TIMESTAMPS:
00:00 Introduction
01:12 Build Demo
07:24 Build Tech
11:01 Microsoft Azure Services
17:07 Initialising the Build
20:42 Setting Up Shadcn/ui
22:12 Explaining & Implementing Next.js Routing
25:44 Implementing Clerk 1.0 for Authentication
31:22 Upgrading Clerk 1.0 to Clerk Core 2 Beta
35:49 Building the Translate Page (1/2)
40:03 Building the Header Component
46:52 Build Plan
48:23 Creating the Translation Form Component
52:32 Setting Up Type Definitions for Languages
53:10 Building the Translation Form Component (1/3)
55:16 Implementing Shadcn/ui
58:14 Building the Translation Form Component (2/3)
1:05:45 Implementing Next.js Server Actions
1:11:00 Setting Up Microsoft Azure AI Translator
1:17:44 Setting Up the Whisper API Model
1:24:09 Implementing Text Translation with the Azure Translator API
1:39:08 Building the Translation Form Component (3/3)
1:49:11 Setting Up Microsoft Azure Cosmos DB for MongoDB
1:56:25 Setting Up Mongoose for MongoDB
1:58:37 Implementing Mongoose for MongoDB
2:11:07 Implementing Translation History Functionality
2:20:37 Building the Translation History Component
2:24:38 Implementing Timestamps for Old Translations
2:27:36 Implementing Delete Functionality for Old Translations
2:37:24 Building the Submit Button & Functionality
2:40:58 Implementing Speak Text Functionality using the Web Speech API
2:45:24 Implementing Audio Transcribing Functionality using the MediaStream Recording API
2:56:58 Implementing Azure OpenAI Services for Audio Transcribing Functionality using the Whisper Model
3:07:26 Building the Home Page
3:12:01 Deploying to Vercel with Live Debugging
3:48:10 Final Build Demo
3:51:13 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Google, Alphabet and/or any of its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.
#nextjs #nextjs14 #react #google #translation #typescript #reactjs #openai #coding #javascript #tailwindcss #shadcn #nosql #reactjstutorial #coding #tutorial #beginner #programming #ai #apple #voicerecognition #machinelearning #mongodb #mern #mernstack
Watch video 🔴 Let’s build Google Translate Clone with NEXT.JS 14! (MS Azure, Clerk, MongoDB, Mongoose, OpenAI) online without registration, duration hours minute second in high quality. This video was added by user Sonny Sangha 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 42,943 once and liked it 653 people.