Build A FullStack Weather Application - React, Next.js, Tailwind CSS (2024)

Опубликовано: 21 Март 2026
на канале: The Code Dealer

22,636

802

In this video we will be building a fullstack weather application using some of the coolest tech out there: Next.js, React, Tailwind CSS, and OpenWeatherMap API.

Feel free to support the channel: https://buymeacoffee.com/thecodedealer
Book 1-to-1 Zoom Call: 📅💻 https://buymeacoffee.com/thecodedeale...

I got the inspiration here: https://github.com/DariusLukasukas/ne...

Join the newsletter for free and get the latest updates: https://thecodedealer.com/newsletter

Website: https://www.thecodedealer.io

New Socials
Instagram:   / thecodedealer_
Facebook   / thecodedealer
Discord:   / discord

Source Code: https://github.com/Maclinz/weather-app

More videos here....

Portfolio Website Tutorial HTML, CSS, JavaScript:    • Portfolio Website Tutorial HTML, CSS, Java...

React and Next JS Project Full Application:    • React and Next JS Project Full Application...

Full Stack Development with React and Node js - Expense Tracker Application.
   • Full Stack Development with React and Node...

Build a Code To Image Application: React and Next.js:    • Build a Code To Image Application: React a...

Timestamps
00:00 - Inroduction
00:04:24 - Wireframing
00:18:41 - Initial Setup and Header
01:08:29 - Current Tempreture and Time Component
01:50:13 - Air Pollution, Sunset and Compass Components
02:41:55 - Hourly Forecast Component
03:07:29 - UV Index and Population Components
03:50:41 - Mapbox, Vsibility, Humidity, Feels Like Five Day Forecast
05:10:13 - Search Functionality and Cleanups
05:58:32 - A bit of Mobile Styles

#thecodedealer #webdevelopment #nextjs

Download the extenstions below for VS Code, they might come in handy for future videos that are coming soon.
VS CODE EXTENSTIONS: 1) Atom One Dark Theme
2) Indent Rainbow
3) JS JSX Snippets
4) Live Sass Compiler
5) Mithril Emmet
6) Styled-Components-Snippets
7) VsCode Icons
8) Live Server
9) JavaScript (ES6) Code Snippets
10) ES7 React/Redux/GraphQL/React-Native Snippets
11) SASS
12) Vs-Code-Styled-Componets
13) HTML CSS Support
14) Javascript and Typescript Nightly
15) IntelliSense for CSS class names in HTML
16) Python
17) Console Ninja