BUILD A TYPESCRIPT REACT API PROJECT USING A WEATHER API. ReactJS, TypeScript, TailwindCSS, Fetch

The TypeScript React Weather API Challenge ✨ project is the most longed for and it is finally here! We will learn how to use react with typescript (very typescript beginner friendly!) and will learn how to fetch data from an api in the context of react typescript. We will dive intro ReactJS, TypeScript, Fetch and TailwindCSS.

In this project we will work with a search field that listens to the user's input and makes an API call to get a suggestion of top 5 locations the user might be looking for. Once the user submits the search we will make another api call and get the user the weather data ✨

If you're new here - The Ultimate API Challenge is a place where I want to "break the ice" between us and APIs, show you how you can work with different tech stack, documentation, APIs, learn to code, create cool and interesting api projects which, by the end of the video, will be ready to be included in your web development portfolio!

So if you were searching for things to build, api projects ideas for beginners or just to hang out coding, - hop on this video and stay tuned for more! Subscribe and hit the notification's bell so you won't miss any episode!

Links:
The Ultimate API Challenge's playlist:

how to fetch data from api in react typescript, how to use react with typescript, how to use typescript in react, api call react typescript, react app using typescript, typescript react api, reactjs using typescript, typescript in react, typescript in reactjs, typescript in react tutorial, use typescript in react

CHAPTERS:
00:00 intro
03:50 getting started
13:11 build the search UI
23:15 get to know the OpenWeather API
28:18 TypeScript intro and adding first types
34:07 first API call (geolocation) using fetch
48:14 second API call to get weather forecast
56:37 split the code components and hooks in typescript
01:06:47 API data, build the forecast UI, add typescript types
01:48:30 finished result of the weather app in react js and typescript using OpenWeather API

Check out my other social accounts:

[ElegantCoder]

Congratulations on your new job! This is a great project, thanks for your effort. Please upload more projects in React Js, Tailwind, and Vue Js.

[smashing_data]

I'm using this video to help me work on my existing weather app using TypeScript and ReactJS. I'm a TypeScript newbie but I come from a Java background. The big difference in my app is I have a NodeJS server that the app talks to with an initial request. The server performs the request to the weather service then responds to the initial request completely hiding my API key. I think I saw a video where you did something similar if I'm not mistaken that got me started with the NodeJS server.

[yesolkwon]

Thank you so much for your tutorial. This is exactly what I've been looking for practicing React and TS!! BEST OF THE BEST

[riddhabose]

You are the most underrated web dev youtuber i've come across. Your tutorials are super helpful! <33

[smartPils]

Just sat here for 2 hours, reinstalling tailwind and checking the tailwind config as i can't see the gradient background when initially running the react app. Turns out i had my google chrome darkreader extension enabled x_x I can now start the weather app tutorial :D

[HistoryUnveiled.]

This content is top notch
I jus loved it ❤️❤️❤️
Keep going u are the best .

[billymartin]

Great job on the tutorial. What intellisense are you using? Seems to work amazingly well.

[rubenn]

Im trying to learn typescript and english, so this video is perfect for me ajai

[johnacsyen]

Awesome tutorial .There is a lot of network request to the api when you type every character in the text input, maybe can add a debounce function.

[mikko]

Thanks Dana for this tutorial, I liked your teaching style, could you make more videos about useContext and useReducer hooks and TS.

[ahmed.allawi]

Thank you very much for your beautiful, simple explanation. We look forward to more videos from you
How did you increase the font size at minute 12:41

[onestepwebdev]

Thanks, Dana, for your hard work and sharing your knowledge.

[murathudavendigaroncu]

it was a great video. Thanks to you Dana, I understand typescript much better :)

[viktorberczeli]

Amazing tutorial. Just went through React, React Advanced and TypeScript in the recent months and kinda confused still. Started the Weather app to my portfolio page as my first React+TS app on my own but got lost many times. Really enjoyed the video. Liked the teaching style, the explanation and that you didn't waste too much on the CSS(I always do but I'm gonna be simplifying the design and maybe even use some design material like MUI, Ant Design even though I love Tailwind). Love how you split the code and created all the types, I can really see what makes you a Senior.

If can ask for another project I say some project which includes a bit more authentication with Login(admin, member, guest), Registration form(since forms a bit more complicated in React would make a great project), local storage, useContect(useMemo)+ useReducer or Redux. Also would be great to add more Senior comments and best practices, that can also be an other video, I just love React and can't wait to be much better at it. I also love hearing and seeing best practices which can highly improve the coding experience.

[xzex]

this is a great job you have done. it will be more appreciated if you notch up your coding font size( like a lot ), believe me it is very important.

[andreiindries]

Awesome tutorial. Could you please tell me what VS Code color theme are you using? Thanks.

[xzex]

from react 17 on, (and in type script) we don't need to implicitly import React from 'nowhere'

[Anastasia_Zhuravleva]

Hi Dana! thank you so much for the tutorial! i really got used to code everything in js but ts is quite useful to know
Do you know any platform such project can be deployed on? tried vercel and netlify and getting errors about mixed content... thank you <3

[aidarousjibril]

A wonderful tutorial, i'm refactoring your project to another and figuring out how to filter a fetch nested data in SearchForm.tsx file and setting the filtered data to the main STATE. can you give me some hint please?

[wakeno.]

Damn, i didn't know that programming can be hot  🔥