Mitter - Your Tech Mate
Mitter - Your Tech Mate
  • 79
  • 51 359
How to change image format using JavaScript | Node JS | PNG TO JPG
Guys, In this video, I have explained how to change image format from PNG to jpg or PNG to WEBP using JavaScript and Node JS
Feel free to leave your queries in the comments.
🔗 Related Videos:
1. Resize Images Using Sharp | JavaScript | Node Js
czcams.com/video/GCkQRMMbLn8/video.html
2. How to Resize Images in Canva 2024
czcams.com/video/NB1rlfO5A-Y/video.html
3. How to read Excel File in Node Js | JavaScript
czcams.com/video/KaAqvNXICxo/video.html
If you are looking to learn web development with JavaScript, React JS and Node JS , Feel free to reach out to me.
www.fiverr.com/shankeyraheja
Reach out to me for a Project
shankeyraheja.com/
zhlédnutí: 13

Video

Best Image Format for Your Website
zhlédnutí 11Před 12 hodinami
Guys, In this video, I have explained which image format is best to use on a website to optimize for both performance and quality. Feel free to leave your queries in the comments. If you are looking to learn web development with JavaScript, React JS and Node JS , Feel free to reach out to me. www.fiverr.com/shankeyraheja Reach out to me for a Project shankeyraheja.com/
How to create tabs in React JS using Material UI Tabs Component
zhlédnutí 48Před 19 hodinami
In this video, I have explained how to create tabs in React JS using Material UI Tabs Component. Feel free to leave your queries in the comments. 🔗 Related Videos: 1. How to create sidebar in React JS using Material UI (Part 1) czcams.com/video/VDEl1j1sJgk/video.html 2. How to use Material UI Snackbar Component in React Js czcams.com/video/O52L5w3NGJ0/video.html 3. Load More Button React Js Mat...
Framer motion scroll animation in React JS | useScroll Hook
zhlédnutí 63Před dnem
In this video, I have explained how to build simple framer motion scroll animation in React JS using useScroll Hook from Framer Motion. Feel free to leave your queries in the comments. 🔗 Related Videos: 1. How to build Framer Motion React useInview Animation czcams.com/video/jQaU9BQUXvk/video.html 2. Framer Motion React Js Animation for Hero Section czcams.com/video/5K6SIWqp5g0/video.html 3. Ho...
How to generate OpenAI API Key
zhlédnutí 44Před 14 dny
In this video, I have explained step by step, How to Generate OpenAI API Keys. Please leave your queries in the comments. 🔗 Related Videos: 1. OpenAI Text to Speech API | React Js | Node Js | Material UI Project czcams.com/video/fUBmj_VPGdo/video.html 2. AI Image Generator OpenAI API dall e 3 React Js Material UI Project czcams.com/video/4WzI2Pf7r-4/video.html 3. How to create sidebar in React ...
Address Autocomplete | google maps api reactjs
zhlédnutí 121Před 14 dny
In this video, I have covered How to use google maps api in reactjs application and build a textfield to autofill address. If you are looking to learn web development with JavaScript, React Js and Node JS , Feel free to reach out to me. www.fiverr.com/shankeyraheja 🔗 Related Playlist: czcams.com/play/PLvVoyBLoD6xUH_cMHq3ekCN1MJSM-8aXv.html Reach out to me: shankeyraheja.com/
How to use environment variables in Node JS | dotenv Node JS
zhlédnutí 36Před 21 dnem
In this tutorial, I'll walk you through how to use environment variables in Node.js. I'll show step by step how to set up a .env file to load environment variables, and access them in your Node.js code. I'll use 2 methods to access environment variables, one of them is dotenv package and other is making a change in package.json file directly. If you are looking to learn web development with Jav...
How to use google translate API in React JS
zhlédnutí 145Před 21 dnem
Hi Guys, In this video, I have explained step by step how to use google translate api in react JS. 0:00 - Project Demo 01:17 - How to generate google translate api key 05:25 - Integrating Google translate api in Node JS Backend 12:34 - Building Translator App in React JS using google translate API 21:08 - Final Testing If you are looking to learn web development with JavaScript, React Js and No...
How to get query params in React JS
zhlédnutí 73Před měsícem
In this video, I have explained how to get query params in React Js. We will be building a search filters using query parameters and understand about useLocation and useNavigate Hooks. Feel free to leave your queries in the comments.
Build AI Talking Bot using OpenAI Api | Chatgpt model | React JS | Node Js
zhlédnutí 548Před měsícem
In this video, we will be building AI Talking Bot using OpenAI API, Chatgpt model. It's a Full Stack project using React JS on the frontend and Node JS on the backend Feel Free to leave your queries in the comments. 🚀 Timestamps: 0:00 - Project Demo 01:30 - Installing Required NPM packages in React App 02:56 - Implementing React Router DOM 04:29 - Building Basic Layout for Search Bar and Studen...
How to use Props in React JS | Reusable Components
zhlédnutí 44Před měsícem
In this video, I have explained How to use Props in React JS and create reusable components using Props. Feel Free to leave your Queries in the comments. If you are looking to learn web development with JavaScript, React JS and Node JS , Feel free to reach out to me. www.fiverr.com/shankeyraheja To appreciate the work: www.buymeacoffee.com/mitter.your.tech.mate 🔗 Related Videos: 1. Navigation B...
Barchart in React Js using Material UI
zhlédnutí 93Před měsícem
In this video, I have explained How to create Bar charts in React JS using Material UI Chart Components. Feel Free to leave your Queries in the comments. 🚀 Timestamps: 0:00 - Introduction 01:08 - Creating React App & Installing required packages 02:45 - Building Basic Bar Chart from Material UI 05:06 - Customize default Material UI Bar Chart If you are looking to learn web development with Java...
Navigation Bar with Submenu in React Js
zhlédnutí 77Před měsícem
In this video, I have explained how to build a responsive navigation bar with Sub Menu in React Js, using HTML, CSS & JavaScript. Feel Free to leave your queries in the comments. 🚀 Timestamps: 0:00 - Introduction 00:56 - Building Navbar Layout 03:30 - Building Sub Menu for Navigation bar 13:35 - Making Navbar responsive on mobile view 15:26 - Adding Zoom effect to Navbar buttons If you are look...
Google Gemini AI API - JavaScript & Node JS Tutorial
zhlédnutí 602Před měsícem
In this video, I have covered step by step how to get access to Google Gemini AI API and integrate it using JavaScript & Node JS. 🔗 Related Videos: 1. How to read Excel File in Node Js | JavaScript czcams.com/video/KaAqvNXICxo/video.html 2. How to use OpenAI ChatGPT API in JavaScript and Node Js czcams.com/video/GtgqPSRQO3c/video.html 3. Resize Images Using Sharp | JavaScript | Node Js czcams.c...
How to use Middleware in node JS
zhlédnutí 25Před měsícem
In this video, I have covered step by step how to create middleware in node Js express server applications. 🚀 Timestamps: 0:00 - What is middleware function in Node Js 04:03- Setting up basic node Js Express App 06:13 - Creating Middleware function 🔗 Related Videos: 1. How to read Excel File in Node Js | JavaScript czcams.com/video/KaAqvNXICxo/video.html 2. How to use OpenAI ChatGPT API in Java...
Framer Motion React Js Animation for Hero Section
zhlédnutí 128Před měsícem
Framer Motion React Js Animation for Hero Section
How to Print React Component on Click | React Js | Save as PDF
zhlédnutí 344Před měsícem
How to Print React Component on Click | React Js | Save as PDF
How to use Material UI Snackbar Component in React Js
zhlédnutí 434Před 2 měsíci
How to use Material UI Snackbar Component in React Js
How to use Material UI Icons in React Js
zhlédnutí 123Před 2 měsíci
How to use Material UI Icons in React Js
OpenAI Text to Speech API | React Js | Node Js | Material UI Project
zhlédnutí 676Před 2 měsíci
OpenAI Text to Speech API | React Js | Node Js | Material UI Project
How to build Framer Motion React useInview Animation
zhlédnutí 329Před 2 měsíci
How to build Framer Motion React useInview Animation
Load More Button React Js Material UI Project
zhlédnutí 162Před 2 měsíci
Load More Button React Js Material UI Project
How to use setInterval and setTimeout in javascript
zhlédnutí 55Před 2 měsíci
How to use setInterval and setTimeout in javascript
AI Image Generator OpenAI API dall e 3 React Js Material UI Project
zhlédnutí 301Před 2 měsíci
AI Image Generator OpenAI API dall e 3 React Js Material UI Project
How to use Circular Progress Material UI React Js
zhlédnutí 112Před 2 měsíci
How to use Circular Progress Material UI React Js
How to Deploy React App to Vercel
zhlédnutí 1,1KPřed 2 měsíci
How to Deploy React App to Vercel
How to read Excel File in Node Js | JavaScript
zhlédnutí 662Před 3 měsíci
How to read Excel File in Node Js | JavaScript
How to use ngrok to run your localhost React Js app on https
zhlédnutí 964Před 3 měsíci
How to use ngrok to run your localhost React Js app on https
Devin AI Software Engineer | Future of Coding Jobs
zhlédnutí 42Před 3 měsíci
Devin AI Software Engineer | Future of Coding Jobs
How to Use Material UI Date Picker in React Js
zhlédnutí 932Před 3 měsíci
How to Use Material UI Date Picker in React Js

Komentáře

  • @IamAgrocerybag
    @IamAgrocerybag Před 2 dny

    Your video helped me simply because I hadn't put the motion.div wrapper on the container. Thanks!

  • @mansoor5413
    @mansoor5413 Před 8 dny

    very cool video....much needed!..... i have a question please..... if mt front end is Nextjs, i dont need to change anything to the backend.. is that correct?

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 8 dny

      Hi, Thanks for reaching out, yes no changes will be required on backend, you can use same backend for Next JS 👍

  • @AlokYadav-ly4ps
    @AlokYadav-ly4ps Před 9 dny

    man!! thanks, a great help

  • @chetankumar9463
    @chetankumar9463 Před 14 dny

    Is this a fully paid api or have some free quota?

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 14 dny

      Hi, Thanks for reaching out. This API is paid. It charges around 2.8$ for 1000 requests, but if you create a new account on google cloud console, it usually gives 300$ credit on free trial to try google services, So you can try this API for free initially.

  • @AriellaDiskorsiaPrasasti

    but what if it's not just one file but 2 files that needs .env? what should i add in the script?

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 15 dny

      Hello, you will be able to use env variables in any of your .js files, after making changes to package.json. No additional changes needed to access it in multiple files. Thanks

  • @silvaneto_
    @silvaneto_ Před 17 dny

    Very great

  • @yokiyokesh8617
    @yokiyokesh8617 Před 20 dny

    Deployment failed. Error?

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 19 dny

      Hi, Thanks for reaching out. There are two ways you can check build errors in deployment. One is in vercel deployment logs. Another way is, before you deploy project to vercel, you can try to build it on local "npm run build". If build is running successful locally, then there should not be any problems in deployment on vercel.

  • @arinawake779
    @arinawake779 Před 21 dnem

    ths

  • @adarshsocialgroup8097
    @adarshsocialgroup8097 Před 21 dnem

    Same audio file not opening in front end

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 20 dny

      Hello, Thanks for reaching out Try to pull the code from this repo, to compare if you have made any error on the frontend. github.com/MitterYourTechMate/texttoaudioreact you can also check other video where I created better version of this project, which might also help. czcams.com/video/djqi9PTuIGQ/video.html

  • @zdmdirect358
    @zdmdirect358 Před 29 dny

    Bros coming to my country 🤙❤️❤️❤️❤️

  • @Aditya-lc5uk
    @Aditya-lc5uk Před měsícem

    Bro the pdf that it downloaded is not selectable for me

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před měsícem

      Hi bro, Can you please share screenshot or explain more, what it means "not selectable". One thing you can try is right click on file that's downloaded, and open with, some PDF reader that is installed on your PC.

  • @samarthchouksey4460
    @samarthchouksey4460 Před měsícem

    Thanks for posting this! I was exactly looking for this - a simple and to the point usage tutorial of OpenAi Api. Please Keep Posting. Subscribed!

  • @syedhannaan2974
    @syedhannaan2974 Před měsícem

    how does the payment work how much is the limit a i need more details on the subscription part

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před měsícem

      Hi, I am using 2 API's in this video, One is Text to Speech which will charge you $15.00 / 1Million characters. Another is gpt-3.5-turbo model, which will charge you based on number of tokens used. 2$/ 1M Tokens. When you make an API call, in response it tells you how many tokens have been used for this call. Overall, It's not very costly to use it. You can also check more details here: openai.com/api/pricing/

    • @syedhannaan2974
      @syedhannaan2974 Před 29 dny

      @@mitter-yourtechmate4376thank you so much

  • @AsihanKhang
    @AsihanKhang Před měsícem

    that's great tutorial! would it be nice if generated audio playback directly from the browser. Could that be possible? thx

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před měsícem

      Hello, Thanks for reaching out. Yes It is possible. I have made some minor changes on Frontend code to play the audio in the browser when audio is generated. Check this out on GitHub. github.com/MitterYourTechMate/texttoaudioreact Hope this will help !

  • @King-ge6fg
    @King-ge6fg Před měsícem

    thanks bro

  • @jar386
    @jar386 Před měsícem

    is it posible to read a PDF or image located in a cell?

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před měsícem

      Hello, Thanks for reaching out. If you are looking to read pdf file in node Js, "pdfreader" is useful. www.npmjs.com/package/pdfreader For reading and manipulating images, "sharp" is helpful www.npmjs.com/package/sharp I'll try to cover this in upcoming videos.

  • @user-uz9me3nb6n
    @user-uz9me3nb6n Před měsícem

    How can i make the load more button disappear when there is no more items or no more data to show?

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před měsícem

      Hello, Thanks for reaching out. I have made some changes in the code, on GitHub, to hide load more button when all images are loaded. Please check the code on this link: github.com/MitterYourTechMate/infinite_scroll_live/ Hope this will help.

  • @haiderjaafer8164
    @haiderjaafer8164 Před měsícem

    Great... How to show and print from local server url a pdf

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před měsícem

      Thanks for liking the video. I'll cover in another video, on how to work with PDF files in react 👍

  • @TayyabBhai-uk7mw
    @TayyabBhai-uk7mw Před měsícem

    very good way for understanding thanks a lot for this guidance

  • @vighneshhegde4580
    @vighneshhegde4580 Před 2 měsíci

    Hello, I am working on a project where I am trying to integrate this OpenAI API into my application. I followed this and got an error that 'OpenAIError: The OPENAI_API_KEY environment variable is missing or empty; either provide it, or instantiate the OpenAI client with an apiKey option, like new OpenAI({ apiKey: 'My API Key' }).'. I have created my API key from their website. I am still getting this error. Below is my code for this. Please help me with this. (This is my controller's folder) export const speechToText= catchAsyncError(async (req,res,next)=>{ const {text}=req.body; const buffer=await convert(text); res.json({buffer}); }) (This is my utils folder) import fs from "fs"; import path from "path"; import OpenAI from "openai"; import dotenv from 'dotenv'; dotenv.config(); const openai = new OpenAI({apikey:process.env.OPENAI_API_KEY}); const speechFile = path.resolve("./speech.mp3"); export const convert=async (text)=>{ const mp3 = await openai.audio.speech.create({ model: "tts-1", voice: "alloy", input: text, }); // console.log(speechFile); const buffer = Buffer.from(await mp3.arrayBuffer()); await fs.promises.writeFile(speechFile, buffer); return buffer; }

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 2 měsíci

      Hello, Thanks for reaching out. Most probable error in your code is that, you are passing API key as "apikey", try passing it with K in caps, "apiKey". I hope this helps. Also, please make sure env variables are reading properly, you can check it by console.log(process.env.OPENAI_API_KEY)

    • @vighneshhegde4580
      @vighneshhegde4580 Před 2 měsíci

      @@mitter-yourtechmate4376 Yes, I figured that out. Thanks! Also, it would be helpful if you could make a video on how to stream the audio to the frontend.

  • @girishpandey9976
    @girishpandey9976 Před 2 měsíci

    Nice explaination

  • @girishpandey9976
    @girishpandey9976 Před 2 měsíci

    It is very useful cotents

  • @md.nayemkhan7936
    @md.nayemkhan7936 Před 2 měsíci

    Thank you❤

  • @manojchandthaquree7821
    @manojchandthaquree7821 Před 2 měsíci

    But now it's throwing version conflict in react of material ui 😢

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 2 měsíci

      Hello, Are you using older version of react or npm by any chance. Have a look at this documentation for versions of react & node js that material ui supports. mui.com/material-ui/getting-started/supported-platforms/

    • @paramkaushik4888
      @paramkaushik4888 Před 2 měsíci

      Same Issue

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 2 měsíci

      @@paramkaushik4888 Hello, Can you please share react version, npm & node js version you are using. Also, Please make sure you are installing material ui v5 using this command npm install @mui/material @emotion/react @emotion/styled

  • @smtabatabaie
    @smtabatabaie Před 2 měsíci

    Thanks, is there any way to stream the audio to the front-end so it will be more real-time?

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 2 měsíci

      Hello, yes, It's definitely possible, try returning buffer in JSON format from backend res.json(buffer) and on the front end, you can try to stream it using audio tag. I'll try to cover it in another video.

  • @eleonore564
    @eleonore564 Před 2 měsíci

    Thanks for sharing your knowledge 👍

  • @MrCuteguylol
    @MrCuteguylol Před 2 měsíci

    Why dont i see the same UI? I cant find these settings in "2 step verification"

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 2 měsíci

      Hello, No worries, If you don't see option there, go directly to myaccount.google.com/apppasswords Make sure you are logged in with your google account in your browser and then directly open this link. Also, make sure 2 step verification is on, for your google account, for this to work.

  • @MrSIVA-uy4bx
    @MrSIVA-uy4bx Před 2 měsíci

    how can i get api key free or buy fee available api key in that site

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 2 měsíci

      Hello, Open AI API is currently paid, free version is not available, but you can put small amount in your wallet on OPENAI settings page, to test API. Charges are based on usage. openai.com/api/pricing You can generate around 25 images for 1$.

    • @MrSIVA-uy4bx
      @MrSIVA-uy4bx Před 2 měsíci

      @@mitter-yourtechmate4376 ok thank you for update

  • @jefersongabri
    @jefersongabri Před 2 měsíci

    Nice

  • @nanoskarviraj4317
    @nanoskarviraj4317 Před 2 měsíci

    Hello sir, At 4:15 my errors are different & I'm not able to figure it out. Can you suggest me alternate solution?

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 2 měsíci

      Hello, Thanks for reaching out. Try and Checkout this GitHub repo to compare your code. github.com/MitterYourTechMate/signin Hope this will help you fix errors.

  • @amanshaikh3666
    @amanshaikh3666 Před 2 měsíci

    Thank you so much bro , now I can send email using nodemailer.😁 btw would you like to share me your LinkedIn account?

  • @AswathiSasikumar-
    @AswathiSasikumar- Před 2 měsíci

    very helpful video

  • @jeyapragashj4500
    @jeyapragashj4500 Před 3 měsíci

    can i do it in normal js file

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 3 měsíci

      Hello, I am using a file with .mjs extension. If you wish to use same code in .js file, you can add "type":"module" in package.json

    • @jeyapragashj4500
      @jeyapragashj4500 Před 3 měsíci

      Thank you

  • @r.bustamante1117
    @r.bustamante1117 Před 3 měsíci

    great! helped so much!

  • @vincentchance5729
    @vincentchance5729 Před 3 měsíci

    Toggle drawer is not a option

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 3 měsíci

      Hello, Thanks for reaching out. Checkout this GitHub repo, to pull the code and compare. github.com/MitterYourTechMate/sidebar Hope this might help !

  • @staromofficial
    @staromofficial Před 3 měsíci

    thanks

  • @user-hm5fi5po7s
    @user-hm5fi5po7s Před 3 měsíci

    Content is good! but I suggest go for some more complex things then this.. I can gpt this my own.. doing a more complex things likee how to generate utterances using open ai? or may be intent matching using open ai.. Otherwise good going!! keep it up man!!

  • @antonyexpedite5671
    @antonyexpedite5671 Před 4 měsíci

    Thanks Bro, its very useful for me, god bless you

  • @locotv8270
    @locotv8270 Před 4 měsíci

    thanks you man!

  • @SHIVAMKUMAR-dc7kw
    @SHIVAMKUMAR-dc7kw Před 4 měsíci

    works perfect and very helpful

  • @yogesh_1929
    @yogesh_1929 Před 5 měsíci

    Broo the github link u have provided has only the code for create react app. plz update the repo it'll be heplful

  • @haiderjaafer8164
    @haiderjaafer8164 Před 5 měsíci

    Great work... Can you make series on mui in react... So when applied background color it's like hover color changed in theme

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 5 měsíci

      Hi Haider, yes I will make a series at some point. I will update the repo with additional code for hover color change soon

  • @haiderjaafer8164
    @haiderjaafer8164 Před 6 měsíci

    Great work... Are you going to make series of tutorials on Mui with react

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před 6 měsíci

      Glad you liked it. Yes I will. I have some more interesting videos on material UI, which you can check out, in the meantime.

  • @mushfiqurrahmankhan7074
    @mushfiqurrahmankhan7074 Před 7 měsíci

    Thanks ❤

  • @BizzaroBrainBoi
    @BizzaroBrainBoi Před 10 měsíci

    Hey man I loved your video. THAT WAS AWESOME!

  • @ezeonyemaechi1304
    @ezeonyemaechi1304 Před 10 měsíci

    Thank you sir

  • @alysonnaagas3477
    @alysonnaagas3477 Před 10 měsíci

    Thanks a bunch! More tutorials please.

  • @saichaitanya7277
    @saichaitanya7277 Před rokem

    Code from ChatGPT

  • @machineoftheabsurd
    @machineoftheabsurd Před rokem

    This was very nicely explained and simple example! Thanks!

  • @jassisangha8592
    @jassisangha8592 Před rokem

    Thank you for sharing your knowledge. Can you please upload the video with forms having labels, textfield, grid etc.

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376 Před rokem

      Hi Jassi, Glad you liked the video. I'll definitely upload a video on this soon. Meanwhile, I think you might also be interested in this video, which is on similar topic. czcams.com/video/KF33cHaa3bg/video.html

    • @jassisangha8592
      @jassisangha8592 Před rokem

      @@mitter-yourtechmate4376 Thank you very much. The URL you shared is very helpful. Please show me how to connect to the Oracle database. When can i expect to see this video as i can't find any useful information on this topic online. i need to connect my oracle database asap so will be eagerly waiting. Once again Thanks!!!