🔴 Let’s build Google Translate 2.0 with NEXT.JS 14! (MS Azure, Clerk, MongoDB, Mongoose, OpenAI)
視聴回数 21,031 回
0
0
❗️ 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/dailycodingchallenges
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
❗️ 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/dailycodingchallenges
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
