diff --git a/src/data/projects/stories-feature.md b/src/data/projects/stories-feature.md index 1de3a01de8ce..83b5c90e4560 100644 --- a/src/data/projects/stories-feature.md +++ b/src/data/projects/stories-feature.md @@ -2,7 +2,7 @@ title: '24hr Story Feature' description: 'Create a client-side instagram stories feature clone.' isNew: false -sort: 30 +sort: 32 difficulty: 'advanced' nature: 'Frameworks' skills: diff --git a/src/data/projects/weather-app.md b/src/data/projects/weather-app.md new file mode 100644 index 000000000000..6b6a7ab49b3f --- /dev/null +++ b/src/data/projects/weather-app.md @@ -0,0 +1,38 @@ +--- +title: 'Weather Web App' +description: 'Build a weather app that fetches and displays weather for a given location.' +isNew: false +sort: 31 +difficulty: 'intermediate' +nature: 'API' +skills: + - 'Programming Language' + - '3rd Party APIs' + - 'JavaScript' + - 'HMTL' + - 'CSS' +seo: + title: 'Weather App Project Idea' + description: 'Build a web-based weather app that fetches and displays weather data.' + keywords: + - 'weather api' + - 'frontend project idea' +roadmapIds: + - 'frontend' +--- + +In this project you are required to build a weather app that displays the current weather details based on the location entered by the user. We will be leveraging a common weather API to achieve this. + +You can use the [Visual Crossing Weather API](https://www.visualcrossing.com/weather-api) to fetch the weather data. + +## Requirements + +- The User should be able to enter a location into an input field +- The User will be presented with temperature, wind speed, likelihood of rain, and general weather i.e. Sunny, Raining, Cloudy etc. +- The User will be shown the previous and future 24 hour periods. +- The weather outlook can be refreshed by the user. + +## Stretch Goals + +- Animation libraries such as framer can used to make the loading of weather more visually appealing +- The default weather view is the Users current location.