🔴 Let’s build Google Translate 2.0 with NEXT.JS 14! (MS Azure, Clerk, MongoDB, Mongoose, OpenAI)
❗️ Get the Code for FREE here (Form must be submitted, not skipped!): Aka.ms/sonnyopenAI
❗️ Get started with Clerk here: go.clerk.com/vkukrY2
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
🔴 Looking for the code for my other builds? 🛠️
links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? 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 👉 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
Пікірлер: 27
Love your video mehn, starting my savings for ur course
clerk for authentification😍😍😍👏👏❤
Yes, I definitely would use the SASS product. 👍
nice build 👍
Sonny sir never disappoint ❤❤❤
Great stuff. Is it possible to go completely with Azure for your build? For example, you could use Azure Entra ID and Azure Static Web App for the Next Ap. I think some people might be interested in a complete Azure stack - myself included
it is so cool,bro
Well done. From Yemen
Good job
Thanks! Thank you for your application for Azure OpenAI Service. Most applications are processed within 24 hours. Some applications may require additional processing time and take up to 10 business days
Nice build! A possible improvement would be to add the output language to the speech synthesizer. Without this a foreign language will be pronounced in English. Your German examples sound like an English speaking person mimicking German. const wordsToSay = new SpeechSynthesisUtterance(output); //add the following line, where langCode is the code of the outputLanguage ('de', 'es' etc.) wordsToSay.lang = langCode synth.speak(wordsToSay); With this change the foreign language sounds native
Wow 😳 Next build open source GPT 2 on oracle cloud
Hey Sonny, It would really help if you could do some system design diagrams before diving into the code. I feel like it would lead more productive learning experience rather than blindly copying code. Thank you!, Love all cool projects you create.
Kenya 🇰🇪 ✨🥳
Let's push for 1,000, 000 likes😊
Bangladesh
Request Access to Azure OpenAI Service Thanks! Thank you for your application for Azure OpenAI Service. Most applications are processed within 24 hours. Some applications may require additional processing time and take up to 10 business days
situs aman terpercaya menang berapa pun kami bayar.harap isi data bank yank valid thanks
hayy