An app that allows you to search for weather around the globe! Using a weather API, a user can search for a city and have that city's weather instantly appear! The user may also navigate to additional information which can display a twelve-hour forecast, or a seven-day forecast.
This application is created with Next.js and React.js and powered by Open Weather Map and Open Cage Data. A user can search for a city in the search bar, and the city's latitude and longitude will be retrieved using Open Cage Data. React.js renders pages created in Next.js to retrieve data from Open Weather Map. A user can navigate to two separate pages to retrieve additional information - a twelve-hour forecast or a seven-day forecast. Information is, once again, retrieved with Open Weather Map using Next.js's Server Side Props function.
- Node - version 12.3.1
- Node-fetch - version 2.6.0
- React - version 16.13.1
- Moment - version 2.26.0
- React-Moment - version 0.9.7
- Next - version 9.4.2
- Sass - version 1.26.5
- Clone the repo
git clone https://github.com/drregg6/nextjs-weather.git- Install NPM packages
npm install- Retrieve API keys from openweathermap and opencagedata
List of features ready and TODOs for future development
- Retrieve city latitude and longitude with Open Cage Data
- Retrieve weather data from Open Weather Map
- Allows user to swap between units - Kelvin, Celsius, and Fahrenheit. It will even change the wind speed between metric and empirical
- Allows users to show more information on separate pages
To-do list:
- Gather repeated functions into helper utility files
- Separate repeated Components
- Update styles for easier viewing on mobile
Project is: in progress due to many adjustments that need to be made, especially for mobile. However, the project has been launched and can be viewed here
The project is a prompt on freeCodeCamp
Distributed under the MIT License. See LICENSE for more information.
Dave Regg - @daveregg - [email protected]
Project Link: https://github.com/drregg6/nextjs-weather