How To Make Weather App Using React JS 2024 | Weather API React Project Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ต.ค. 2024

ความคิดเห็น • 156

  • @kowshikjoy1590
    @kowshikjoy1590 3 หลายเดือนก่อน +9

    Thanks a lot, I've completed my university project with this tutorial. it saved me. Happy coding.

  • @danialnawawi9110
    @danialnawawi9110 3 หลายเดือนก่อน +6

    I really like the way you teach us one by one so that we can understand. Thanks and can't wait for more project.

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน +2

      Glad you liked it. Thanks for your comment. 😊 Will surely do more projects like this.

  • @sanketpathak6621
    @sanketpathak6621 3 หลายเดือนก่อน +9

    Thank you. This is by far the most easy to understand tutorial. Plase bring more tutorials for reactJS.

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน +2

      Glad you liked it Sanket. Thanks for your comment. 😊 Keep Coding.

    • @runningmanslowly9072
      @runningmanslowly9072 หลายเดือนก่อน

      bro can u pls send me source code

    • @sanketpathak6621
      @sanketpathak6621 หลายเดือนก่อน

      @@runningmanslowly9072 yeah I'll

  • @razeenmeeran9889
    @razeenmeeran9889 4 หลายเดือนก่อน +11

    Recognizing this from the old js, css and html video ❤❤

    • @Sneakingmentor
      @Sneakingmentor 4 หลายเดือนก่อน +1

      Ya bro
      😅

    • @Nonymouz
      @Nonymouz 4 หลายเดือนก่อน +1

      why do i always feel like html css and js are easy when compared to react lol

    • @JameishLestray
      @JameishLestray 4 หลายเดือนก่อน +1

      @@Nonymouz because it is ;)

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน +2

      Yes, and this one was built using React Js.. Thanks for your comment. 😊

  • @ajiteshmishra0005
    @ajiteshmishra0005 3 หลายเดือนก่อน +1

    Your explanation is very good.
    Please create one video on Redux as well as Redux Toolkit on any React Project from scratch with small and large data so that every concept can be cleared.
    We can answer every interview questions smoothly.

  • @noufalriyasm9344
    @noufalriyasm9344 4 หลายเดือนก่อน +3

    Could you please make a video on how to deploy vite-react-app in git pages?
    It will be very helpful for beginners

  • @pavankumar-of4ew
    @pavankumar-of4ew 2 หลายเดือนก่อน +5

    problem with API key , it is getting unauthorized while calling city

  • @thabangreymondsehlako5741
    @thabangreymondsehlako5741 4 หลายเดือนก่อน +1

    You are a good teacher.Your tutorials are easy to follow. I so wish you can give us more react tutorials ❤

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Thank you, I will

  • @fitnessfreak984
    @fitnessfreak984 4 หลายเดือนก่อน +4

    Please bring tailwind css in it and you keep bringing more projects ❤❤ love it

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน +1

      Sure, Will do it. Thanks for your comment. 😊

  • @DanyalMoazzamJann
    @DanyalMoazzamJann 3 หลายเดือนก่อน +1

    btw you can also run command "npm create vite . --template react" for initializing the project.

  • @rayblinks2me
    @rayblinks2me 2 หลายเดือนก่อน

    Thank you very much for your efforts! Project is great for beginners and it shows so much information. From React hooks, to jsx, creating react app using Vite, Fetch, API requests, Google dev tools, async code, try catch code blocks with alerts, ternary's and so much more. Great project!

  • @NoHandles2654
    @NoHandles2654 4 หลายเดือนก่อน +4

    Can You please Create a transportation Website that shows that trucks could carry goods from one place to another by using Api that tells the area location and a responsive pages using react and Backend.🙌🙌

  • @TimeTravelTT
    @TimeTravelTT 4 หลายเดือนก่อน +3

    The way of your teaching is amazing.

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Glad to hear that. Thanks for your comment. 😊

  • @Rose-gb1ku
    @Rose-gb1ku 18 วันที่ผ่านมา +1

    Easy to implement thank you !

    • @GreatStackDev
      @GreatStackDev  17 วันที่ผ่านมา +1

      Glad it was helpful! Thank you. 😊

  • @Applecitylightkiwi
    @Applecitylightkiwi 4 หลายเดือนก่อน +1

    Congrats i remember the first one you made, i learnt that one well

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Glad to hear that! Thanks for your comment. 😊

  • @aadhi4821
    @aadhi4821 3 หลายเดือนก่อน +1

    Sir can you put a video for react js full course really like your teaching method.😊

  • @mayankvaidh
    @mayankvaidh 4 หลายเดือนก่อน +1

    The project is very awesome. Sir, please make one video for deploying food app on vercel.

  • @RRBLP
    @RRBLP 3 หลายเดือนก่อน +1

    Hi there, when you add a space after the city name, it causes the app to malfunction and show the empty fragments. only to then show the actual city. How do we fix this issue? otherwise great video :D

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน +1

      add trim() method on input data

  • @melvinbruce975
    @melvinbruce975 3 หลายเดือนก่อน

    Thank you bro just finished this tutorial really great video

  • @_gazer_730
    @_gazer_730 2 หลายเดือนก่อน +1

    How do I deploy this project into my GitHub

  • @SarathkumarKilli
    @SarathkumarKilli 2 หลายเดือนก่อน

    Best explanation. But whenever I use Axios instead of the fetch method, the state variable is not updating and also the data is not rendering on the browser. Why?

  • @cranticumar9888
    @cranticumar9888 2 หลายเดือนก่อน +1

    sir in react js project, how to access that .env variable. like this not work sir, const wAPI = process.env.whetherApi . in my .env ---> (whetherApi = ''adndndddmddmd')
    wAPI I assigned in which you assign 'VITE_WHETHER_API'

  • @preranaattarde8297
    @preranaattarde8297 หลายเดือนก่อน

    Excellent Project and API is very fast Working👍👍

    • @StephenJoshi-p9e
      @StephenJoshi-p9e หลายเดือนก่อน

      does the new 3.0 also have city place for API, could you please share the link I cant find it

  • @YouTubeMastery101
    @YouTubeMastery101 21 วันที่ผ่านมา

    thanks sir i complete this time

  • @ManieshSanwal
    @ManieshSanwal หลายเดือนก่อน

    please let us know your vs code colour theme. I genuinely like this 🤗🤗

  • @JameishLestray
    @JameishLestray 4 หลายเดือนก่อน

    Could you please make an HTML, CSS and JS Video for a crossword website :( I'd understand better from you GreatStack!

  • @hunterhalvorson6223
    @hunterhalvorson6223 2 หลายเดือนก่อน +3

    PSA, if you have never used openweatherapp, your api may take a couple hours to load

  • @sanketpathak6621
    @sanketpathak6621 3 หลายเดือนก่อน +2

    Awesome video sir❤

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน +1

      Glad you liked it. Thanks for your comment. 😊 Keep Learning.

  • @minseokkim-y9f
    @minseokkim-y9f 2 หลายเดือนก่อน

    Everything was perfect, but I didn't get images folder on my desktop after set up. How can I get thoes image files? or other way ?

  • @vikassoni7882
    @vikassoni7882 4 หลายเดือนก่อน +1

    Everything else.hi very good, but I don't like using plain CSS for every component makin unnecessary files
    Bring tailwind instead and improve folder structure.

  • @gokulrajpalanisamy235
    @gokulrajpalanisamy235 3 หลายเดือนก่อน

    Sir, Great content❤❤
    Plz create LMS website using MERN STACK (using react) with all admin functionalities ❤

  • @ezeprince9974
    @ezeprince9974 หลายเดือนก่อน

    Nice one. Any idea of building a contour coordinates in python?

  • @paintingitsalifestyle307
    @paintingitsalifestyle307 26 วันที่ผ่านมา

    thank you ❤❤

  • @Bscwala1
    @Bscwala1 หลายเดือนก่อน +1

    caret blink animation how do u do that

  • @itsmjns23
    @itsmjns23 2 หลายเดือนก่อน

    hi can you create an project like mern but the database is Google Sheets 😅 and an affiliate website where to promote affiliate products with links and a backend Hope to be noticed

  • @saranrajmeee60
    @saranrajmeee60 3 หลายเดือนก่อน

    Can you show output in side screen it will very clear for us

  • @pileydes
    @pileydes 2 หลายเดือนก่อน

    Thanks a lot.

  • @soumodeepdey8081
    @soumodeepdey8081 2 หลายเดือนก่อน

    Sir can you tell me how to run this project in the terminal of VS Code?

  • @hafismohammad495
    @hafismohammad495 3 หลายเดือนก่อน

    thank you so much

  • @LeonardMuriuki-jh5hc
    @LeonardMuriuki-jh5hc 4 หลายเดือนก่อน +1

    design a tutorial on how to make a clone for uber if you wont mind

  • @drteddyweb
    @drteddyweb 3 หลายเดือนก่อน

    How can I use also the enter key in when I type a city and not only the search icon?

  • @Zina-ox2dm
    @Zina-ox2dm 3 หลายเดือนก่อน +1

    dont forget to npm i openweather-apis

  • @PraveenKumar-tw4pu
    @PraveenKumar-tw4pu 3 หลายเดือนก่อน

    Please do it with tailwind css, so that it's responsive

  • @H.CWebDeveloper
    @H.CWebDeveloper 4 หลายเดือนก่อน +3

    Sir please make next js project

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน +1

      Sure, Will do it soon. Thanks for your comment. 😊

  • @godneo2190
    @godneo2190 10 วันที่ผ่านมา

    im getting error of undefined reading 0 how to resolve it can anyone help me

  • @saikrishnagoud1919
    @saikrishnagoud1919 2 หลายเดือนก่อน

    Getting useffect dependency ⚠️ warning, can u please help!!

  • @kaustubhbhatt7830
    @kaustubhbhatt7830 3 หลายเดือนก่อน

    @GreatStack it is not showing data on webpage but showing on console what should i do

  • @TaibaSajid-e1m
    @TaibaSajid-e1m 2 วันที่ผ่านมา

    how to do it if m not using vite?

  • @Peter-i7i
    @Peter-i7i 3 หลายเดือนก่อน +3

    My API key didn’t work

    • @TBMREBEL
      @TBMREBEL 2 หลายเดือนก่อน

      Bhai aap. env ko kisi folder ke ander toh nhi rakhe ho

  • @farispepic
    @farispepic 3 หลายเดือนก่อน

    Do you can this to write on second way?

  • @saivutukuri-o3d
    @saivutukuri-o3d 3 หลายเดือนก่อน +1

    Please make more videos on react

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      Sure.. Will do more.. Thank you.

  • @akhilmanissery3666
    @akhilmanissery3666 3 หลายเดือนก่อน +1

    I am facing issue on fetching the weather details did anyone face that kind of issue?

    • @CricGamerz12
      @CricGamerz12 3 หลายเดือนก่อน

      I am getting problem at console
      Error 401 is showing

    • @aminashahid2818
      @aminashahid2818 3 หลายเดือนก่อน +1

      Same error.. have you resolve this issue?

    • @just_peace5669
      @just_peace5669 2 หลายเดือนก่อน +1

      facing the same issue..
      how to fix this?

    • @kaushikupadhyay4112
      @kaushikupadhyay4112 หลายเดือนก่อน

      ​@@aminashahid2818what about now? what was the problem?

  • @kunalsin
    @kunalsin 4 หลายเดือนก่อน +1

    We need more small and this type projects

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Sure, Will do more like this. Thanks for your comment. 😊

  • @ebrahimakanda7391
    @ebrahimakanda7391 4 หลายเดือนก่อน

    Please! Make a video for currency converter.

  • @itsmjns23
    @itsmjns23 4 หลายเดือนก่อน

    Can you tutorial for creating a checkout page for e-commerce stores

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Already created checkout and online payment for food order full stack project tutorial

    • @itsmjns23
      @itsmjns23 4 หลายเดือนก่อน

      @@GreatStackDev uhm link??

  • @lullimongal
    @lullimongal 4 หลายเดือนก่อน +2

    Build a full frontend website

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน +1

      Will do it. Thanks for your comment. 😊

  • @imemperor6658
    @imemperor6658 หลายเดือนก่อน +1

    sir here the api key is not working, i properly copy the key which given by wesbite but still saying invalid, please helpout

  • @RRBLP
    @RRBLP 3 หลายเดือนก่อน

    I am running into error "Failed to load resource: the server responded with a status of 429 (Too Many Requests)" after completing the video. Do you know how to fix this?

  • @namanhayaran6833
    @namanhayaran6833 3 หลายเดือนก่อน

    bro data.message ka data kese aaya if city name is not right
    can you explain

  • @kaustubhbhatt7830
    @kaustubhbhatt7830 3 หลายเดือนก่อน

    it's not showing data on webpage what should i do

  • @coder40208
    @coder40208 4 หลายเดือนก่อน +2

    Sir design hamesa same hi rahta he

  • @Adityatagwale19
    @Adityatagwale19 4 หลายเดือนก่อน

    sir, please can you make a project or website by using HTML, CSS, Javascript, Php, and MySQL. frontend and backend with explanation.

  • @techlyticalwithaswini8379
    @techlyticalwithaswini8379 4 หลายเดือนก่อน

    Sir front end developer related interview questions with answers video need

  • @anzarkhan599
    @anzarkhan599 2 หลายเดือนก่อน

    how to i get current date and time

  • @vaishnavikalkekar3329
    @vaishnavikalkekar3329 หลายเดือนก่อน

    Sir mere me na console ka object nahi dikh raha hai please sir how to solve it

  • @razak-attar
    @razak-attar 4 หลายเดือนก่อน +3

    it will not work in production right sir? I have deployed it on versal not working..!! @GreatStackDev
    Edit: it will work. Thanks..!!

    • @kavindudeshappriya9201
      @kavindudeshappriya9201 3 หลายเดือนก่อน

      How long it took to fix that ?

    • @RRBLP
      @RRBLP 3 หลายเดือนก่อน

      did you fix this issue?

    • @nerathevannuavan4974
      @nerathevannuavan4974 3 หลายเดือนก่อน

      Yo Bro Reply Here

    • @razak-attar
      @razak-attar 3 หลายเดือนก่อน

      Yes guys?

  • @Efizzy_brendan
    @Efizzy_brendan 4 หลายเดือนก่อน +1

    Thanks boss

  • @raghavendrasangam
    @raghavendrasangam 4 หลายเดือนก่อน

    3:30 - Should we just ignore npm WARN deprecated message or is there any solution ? . I am getting same thing while creating app

    • @sparshrlohana2288
      @sparshrlohana2288 4 หลายเดือนก่อน +1

      There's no need to worry, chill

  • @ravii4888
    @ravii4888 3 หลายเดือนก่อน

    What would have more impact on a resume: this weather app (React) or the previous one made with HTML, CSS, and JS?....please reply

    • @idevkr
      @idevkr 3 หลายเดือนก่อน

      React

  • @ravishbisht502
    @ravishbisht502 4 หลายเดือนก่อน

    Which theme do you use sir ?

  • @Techtto
    @Techtto 3 หลายเดือนก่อน

    wow very nice

  • @lsvlog0007
    @lsvlog0007 3 หลายเดือนก่อน

    Could you please share git link?

  • @AzeemButt.x
    @AzeemButt.x หลายเดือนก่อน

    can you please send the source code there is a isuue of my api linking

  • @biswajitadhikary_0807
    @biswajitadhikary_0807 3 หลายเดือนก่อน

    Hi, can you please provide me the link of the source code?

  • @amaztech-tb5rg
    @amaztech-tb5rg 2 หลายเดือนก่อน

    i have installed react app with out vite how should i create env with name

    • @just_peace5669
      @just_peace5669 2 หลายเดือนก่อน

      same here
      were you able to make it work?

  • @pallavipradhan156
    @pallavipradhan156 4 หลายเดือนก่อน

    in my vscode terminal i wote the command but it shows that npm is not recognized so please tell me how to correct it

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      First install node js from below link
      nodejs.org/en/download/prebuilt-installer

    • @pallavipradhan156
      @pallavipradhan156 4 หลายเดือนก่อน

      @@GreatStackDev Thank you so much
      I will do it further if any doubt I will ask you

  • @Kiran23456
    @Kiran23456 4 หลายเดือนก่อน +1

    Tq

  • @martinnjeri6997
    @martinnjeri6997 4 หลายเดือนก่อน

    great turtorial, i honestly love watching and following a long, and each time im getting better.... i have a work related proyect, anyone who would like to colaborate?

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Great to hear!

    • @sparshrlohana2288
      @sparshrlohana2288 4 หลายเดือนก่อน +1

      I would like to colab

    • @martinnjeri6997
      @martinnjeri6997 3 หลายเดือนก่อน

      @@sparshrlohana2288 how do i reach you to share the details of the project?

  • @CLaahiCalimaxamed
    @CLaahiCalimaxamed 4 หลายเดือนก่อน +1

    Hey teacher ❤

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Thanks for your comment. 😊

  • @kumarc4989
    @kumarc4989 24 วันที่ผ่านมา

    unable to link api...its shows eroor 401

    • @Brago475
      @Brago475 21 วันที่ผ่านมา

      import the api direclty weather no need for vite

  • @SatyanshSingh-k7m
    @SatyanshSingh-k7m 4 หลายเดือนก่อน

    make some tutorial in react native

  • @NarasimhaCharithartha
    @NarasimhaCharithartha 3 หลายเดือนก่อน

    sir is this responsive also

  • @kushalbrahmbhatt4890
    @kushalbrahmbhatt4890 3 หลายเดือนก่อน

    bhai code bhi de hi deta , aadha project ho kr data load nahi kar raha aur error bhi pata nahi chal rhi

  • @surajlaxburathoki2648
    @surajlaxburathoki2648 4 หลายเดือนก่อน +1

    🎉🎉🎉

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Thanks for your comment. 😊

  • @adityaranjan8473
    @adityaranjan8473 2 หลายเดือนก่อน

    Sir, my API calling is not working

    • @idevkr
      @idevkr 2 หลายเดือนก่อน

      Verify your api key

    • @prabhavishukla870
      @prabhavishukla870 2 หลายเดือนก่อน

      Did it work now?

    • @adityaranjan8473
      @adityaranjan8473 2 หลายเดือนก่อน

      No

  • @coding_priyan_ca
    @coding_priyan_ca 3 หลายเดือนก่อน

    Hey I am facing this issue
    Status: 401 Unauthorized

  • @IbrahimAbdi_
    @IbrahimAbdi_ 4 หลายเดือนก่อน +1

    Gang are here

  • @runningmanslowly9072
    @runningmanslowly9072 หลายเดือนก่อน

    source code anyone
    pls

  • @callmegx
    @callmegx 4 หลายเดือนก่อน

    Source Please 🥺

  • @harshavardhandandibhotla
    @harshavardhandandibhotla 2 หลายเดือนก่อน

    Why my weather API key isn't working? Even after the activation done

    • @prabhavishukla870
      @prabhavishukla870 2 หลายเดือนก่อน +1

      Same.Did you get the solution?

    • @harshavardhandandibhotla
      @harshavardhandandibhotla 2 หลายเดือนก่อน

      @@prabhavishukla870 Yes Worked ma'am after a day

    • @harshavardhandandibhotla
      @harshavardhandandibhotla 2 หลายเดือนก่อน

      @@prabhavishukla870 Yes ma'am after a day it had worked for me

    • @ravikantsrivas
      @ravikantsrivas หลายเดือนก่อน

      @@prabhavishukla870 did you get the way to resolve?

    • @Everyday_.Islam.
      @Everyday_.Islam. หลายเดือนก่อน

      How can i activate the API key?

  • @bhishek_
    @bhishek_ 4 หลายเดือนก่อน

    1:09 Delhi 41°C 💀

  • @partyhard1787
    @partyhard1787 2 หลายเดือนก่อน

    my timecode
    26:24

  • @ayushsolankiexe
    @ayushsolankiexe 4 หลายเดือนก่อน +1

    I'm first??

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน +1

      Thanks for your comment. 😊

  • @ZeeshanKhan-x6h7j
    @ZeeshanKhan-x6h7j หลายเดือนก่อน

    how to convert thisproject to antD?