Beginner Web Dev Project Tutorial – Weather App with Next.js, Tailwind CSS, and TypeScript



Learn to build a Weather App using Next.js, Tailwind CSS, and TypeScript in this hands-on tutorial! Create a responsive, dynamic app from scratch with React components.

✏️ Course from @reactwithutkarsh

Live Demo: https://weather-app-nextjs-seven-rho.vercel.app/
Code Repo: https://github.com/whoisseth/weather-app-nextjs

⭐️ Chapters ⭐️
⌨️ (0:00:13) Introduction
⌨️ (0:03:45) Navbar Component
⌨️ (0:27:41) API and Data Types Configurations
⌨️ (0:38:59) Current Day Section Components
⌨️ (1:12:45) Additional Details Component
⌨️ (1:30:53) 7 Days Forecast Data Section
⌨️ (1:41:53) Search and Current Location Logic

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

source

This Post Has 27 Comments

  1. @jopadjr

    1.2k+…Thanks. Just in time !!! May I suggest to create a YouTube clone next if you have the time. You are a great teacher.

  2. @josygeorge3115

    before publishing please check the content for spelling and good communication..

  3. @brentusc1

    Do you have a course that explains server-side rendering vs. client-side rendering and which side is making API calls and where to look in Express/React/Next code to tell which is chosen?

  4. @DrZiggyzoo1

    What is the extension that is automatically populating the tailwind styles?

  5. @hotwings9382

    Ive done one in php, this year im learning react. Will be nice to refactor all my projects to react

  6. @paca3107

    next 🤮I was loving it until I had issues with caching.

  7. @just_A_doctor

    Congratulations for the 9 million free code camp 🎉🎉🎉🎉🎉🎉🎉🎉

  8. @Vishal_0841

    guys he deserves more subscribers plz go and check his youtube channel still he's teaching in live and working on react project

  9. @xade8381

    please bring tutorial on elixir's ASH framework

  10. @lonleybeer

    I was just thinking of revising next.js, talk about good timing

Leave a Reply