React JS Project Tutorial ( Weather App ) - Tanstack Query, Shadcn, Recharts, Tailwind, Typescript

Published: 10 November 2024
on channel: RoadsideCoder

9,478

470

Link to Buy affordable Hosting from Hostinger: https://www.hostg.xyz/SHF5k
Use coupon code "ROADSIDECODER" and get an additional 10% discount.
➡️ My Frontend Interview Course - https://roadsidecoder.com/course-details (50% Discount)

Build a Weather App in React JS with Tailwind CSS, Tanstack Query, Tyoescript, Recharts, Openweather API and Shadcn UI Tutorial. This is an amazing project for your resume which will impress recruiters a lot and showcase your skillset.

🔗 React JS Interview Series -
   • Frontend Machine Coding Interview Que...

➡️ Source Code - https://github.com/piyush-eon/tanstac...
➡️ Book a mentorship call with me - https://topmate.io/roadsidecoder
➡️ Learn to code with Scrimba - https://v2.scrimba.com/?via=roadsidec...

👤 Join the RoadsideCoder Community Discord -
  / discord

🔗 React Query Tutorial -
   • React Query - Full Tutorial 2024 🔥🔥

🔗 Full Stack React Projects -
   • Full Stack React Projects

🔗 MERN Stack Chat App Tutorial -
   • MERN Stack Chat App with Socket.IO Tu...

🔗 Complete Data Structures and Algorithms with JS Course -
   • Data Structures and Algorithms in Jav...

🔗 JS Interview Series -
   • Javascript Interview Questions ( Var,...

🔗 Cars24 Interview Experience -
   • Frontend Interview Experience (Cars24...

🔗 Unacademy Interview Experience -
   • Frontend Interview Experience (Unacad...

🔗 Tazorpay Interview Experience -
   • Frontend Interview Experience (TazorP...

🔗 React Beginner's Project Tutorials -
   • React JS Project Tutorials 🔥🔥

#reactjstutorial #frontend #ReactJS
-------------------------------------------------------------------------

00:00:00 Intro
00:00:47 Setup React + Shadcn UI
00:06:42 App Routes and Layout
00:14:49 Hostinger Account Setup
00:17:46 Header Component
00:20:47 Dark / Light Mode Toggle
00:23:38 Setup React Query
00:26:30 API Configuration
00:30:40 API Endpoints
00:42:35 Fetching Current Location
00:56:10 Creating Queries for weather API
01:08:14 Current Weather
01:19:36 Houly Temprature Chart
01:30:16 Weather Details
01:36:43 5 Day Forecast
01:45:52 Search City Popup
01:57:43 Search History
02:12:40 City Page
02:16:55 Add to Favorite
02:28:17 Render Favorites on Dashboard
02:37:47 Deployment

-------------------------------------------------------------------------

⭐ Support the channel -
   / @roadsidecoder

Special Thanks to our members -