SitePoint
  • Blog
  • Discord
  • Forum
  • Library
  • Login
Join Premium

Build a Weather App from Scratch with Next.js

Close
  1. Preface
    • Build a Weather App from Scratch with Next.js
    • Notice of Rights
    • Notice of Liability
    • Trademark Notice
    • About SitePoint
  2. 1Build a Weather App from Scratch with Next.js
    • Planning the Features
    • Wireframing the App
    • Designing the App
    • Setting Up the Project
    • Configuring OpenWeatherMap API
    • Downloading Icons
    • Creating the Base
    • Identifying the States
    • Fetching the Data
    • Creating Data Converters
    • Adding Helper Functions
    • Creating Components
    • Implementing the Logic
    • Adding Responsiveness
    • Deploying the App
    • Conclusion

You don't have any bookmarks for this book yet.

Build a Weather App from Scratch with Next.js

Planning the Features

The most basic weather apps usually provide just the general information like location and temperature, while others are more complex—including weather forecasts, detailed data graphs, and options to filter the information.

We’ll make a blend between the two scopes by providing the current weather conditions for any city in the world and also allowing user interaction to change the location and display the data in their preferred unit system.

The full list of features we’ll implement include:

  • the ability to search cities
  • current local time and date
  • temperatures in both metric and imperial units
  • humidity, wind speed and direction
  • sunrise and sunset times
  • error handling and loading info

Wireframing the App

First, let’s create a wirefame, to help us plan out our user interface so that we can accommodate our desired features.

On the top level, we’ll use a two-column layout.

Since the main weather conditions need to be highlighted, we’ll create a separate MainCard component and dedicate a whole left column to it. It will hold information about the location, weather status, description, and temperatures.

End of PreviewSign Up to unlock the rest of this title.

Community Questions