Developed using Next.js 14 with create-next-app, TypeScript, and Shadcn UI, this real-time weather app offers a seamless user experience. It presents all essential weather information in a beautifully designed, easy-to-navigate interface.
The live website can be found here
- Location and Date:
- Displays the current city and the day of the week.
- Shows the exact time.
- Temperature:
- Large, central temperature display.
- Weather Condition:
- Describes the current weather condition.
- Additional details include the day's low and high temperatures Low | High and humidity.
- Air Quality Gauge:
- Visual representation of air quality on a color-coded scale (with a pointer at the green/yellow range).
- Text indicator below the gauge: "Air quality is".
- Indicates the time of sunset and sunrise.
- Wind Compass:
- Displays wind direction using a compass with labels (
N,S,E,W). - Shows the wind speed and the direction.
- Displays wind direction using a compass with labels (
- Hourly Breakdown:
- A visual representation of the forecast at different times (
12:00,15:00,18:00,21:00). - Temperature predictions for each hour.
- A visual representation of the forecast at different times (
- A color-coded gauge showing the current UV index value.
- Suggests precautionary measures.
- Provides a brief forecast for the next five days.
- Each day displays a range for the expected low and high temperatures.
- Temperature Perception:
- Shows how the temperature feels like.
- Text indicating it feels about the same as the actual temperature.
- Humidity Indicator:
- Displays the current humidity level.
- Notes that the humidity range.
- Displays the visibility distance.
- Provides the visibility characteristis.
- Displays the current pressure.
- Provides the pressure description.
- Shows the latest UN population data for current location.
- Displays an interactive map of the location, with zoom and pan capabilities.
- Displays a list of top large cities, presumably for quick access to their weather data:
Munich,New York,Sydney,London,Madrid.
- Search bar:
- A search bar to find specific locations for weather data. This enhances accessibility by keeping search functionality readily available
- Theme Dropdown:
- Provides users with the option to switch between different themes, enabling them to customize the appearance of the application according to their preferences.
- GitHub:
- A button with the GitHub icon that navigates the user to the GitHub page when clicked.
- My Location:
- A button that triggers the handleLocationRequest function to fetch the user's location. The button displays different icons based on whether the location request is loading or completed.
- Alert Message Display:
- the Navbar will display an alert box at the top center of the screen. This alert includes a title and description based on the alertType and alertMessage values from the global context, providing important feedback to the user.
A separate document for testing can be viewed here: MANUAL-TESTING.md
| Bug | Error | Issue | Solution |
|---|---|---|---|
| Command/Combobox TypeError and Unclickable/Disabled items | TypeError | When utilizing a Command component, Items are unclickable and disabled | Pin cmdk version to 0.2.1 in package.json GitHub Issue and leverage ul and li to list. |
| ReferenceError: window is not defined | ReferenceError | Error encountered during build for React Leaflet | Refer to StackOverflow Solution |
| Errors during the build process in Next.js | Build Error | API routes relying on dynamic data fail during static rendering. Examples: Error fetching forecast data and Error in getting pollution data |
Use export const dynamic = 'force-dynamic' in API route files, it solves the build error |
More issues stories ressolved are also documented here
- React
- Next.js
- Typescript
- Tailwind
- next-themes: comes with two default themes lightand dark
- shadcn/ui: a collection of re-usable components that supports React
- Open Weather API: utilized to retrieve and display forecasted weather data
- Lucide React: icon library for react applications
- Moment: to manipulate date and time
- Axios: request and fetch data
- lodash: Geo search delay input changes
Several components have been implemented within this project that have been reused throughout the project:
- GlobalContext.js: manages and shares global state across various components in the application.
- It defines several asynchronous functions (fetchForecast, fetchAirQuality, fetchFiveDaysForecast, fetchUvIndex) that use axios to fetch weather, air quality, five-day forecast, and UV index data based on geographic coordinates.
- The handleInput function updates the search bar's input value and triggers the fetching of geocode data. This function also uses a debounced effect to optimize the API requests, avoiding unnecessary calls when the user is typing.
- Contains useEffect hooks to fetch data whenever the active city coordinates (activeCityCoords) change, ensuring the app always displays the latest weather and environmental data.
- ThemeProvider: is a custom provider that wraps the application with two essential context providers:
- The
NextThemesProvideris imported from the next-themes library, which manages theme switching (e.g., light and dark modes) in a Next.js application. By wrapping the application in NextThemesProvider, this component allows users to toggle between different themes and preserves the selected theme across sessions. - Inside the
NextThemesProvider, theGlobalContextProvider(imported from GlobalContext.js) is used. This provides the global state and functions (like fetching weather data, handling input, etc.) to the entire application.
- The
- defaultStates.tsx: defines and exports an array of objects named defaultStates. This array serves as a default list of predefined locations with specific geographic information.
- Icons.tsx: is a utility file that imports a collection of icons from the lucide-react library and exports them as React components with predefined sizes. This file makes it easier to manage and use icons consistently across the application.
- misc.tsx: contains a set of utility functions and data structures that are used throughout the application to perform common tasks related to temperature conversion, air quality description, date and time formatting, and number formatting.
- fivedays
- geocode
- pollution
- uv
- weather
npx create-next-app@latest weather-app
npm run dev
Open http://localhost:3000 with your browser to see the result.
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
I follow The Code Dealer FullStack Weather Application Tutorial to learn more and build my first app using Next.js
Patricia Höge