weather app
Budget: $30 – $250 USD
OVERVIEW
Stack – react, redux, bootstrap, AccuWeather API, TOAST/modal for testing - MUST
write a simple, responsive, web app in react that shows the weather of some city. The user should be able to search for a city and save it to favorites (locally, a server is not required).
We expect to see 2 pages in this app. (weather page and favorites page).
API
The API that you’ll use for this app is AccuWeather API. Please sign up and create a new app to get an API key.
You will use 3 endpoints: location autocomplete for the search field, get current weather and 5-day daily forecast. Please read those API docs.
NOTE: this API is limited to 50 requests per day. our recommendation is to save the responses and use them locally during development.
- For design - use bootstrap or materialUI only.
SPECS
1. Create a header with navigation icons/links/buttons for main and favorites screen.
2. The main screen (weather details) will be composed of a search field to search a location’s weather by city name. And below it, the current weather and a 5-day forecast of the searched location. A location should have an indication if it’s already saved in favorites, and a button to add/remove from favorites (it can be the same button).
3. Display Tel Aviv weather by default.
4. Favorites screen will be composed of a list of favorite locations. Each location should have an ID, name, and current weather. Clicking on a favorite will navigate to the main screen showing the details of that location.
5. Searching should be done in English letters only
6. State management is a must - using REDUX!
7. Responsive design is a must! (flexbox/grid will give you extra points ?).
8. Error handling is a must! (Can be done with toast, modal).
9. Set the default location by using the Geolocation API. you will need another API endpoint for this: get location key by lat/lon.
10. Add dark/light theme support (add toggle button in the header).
11. Add Celsius/Fahrenheit toggle button.
12. Add animations (with good taste).
13. Deploy the app using Github Pages / netlify! – MUST
14. design must be closed to the example attached here.
Example – attached!
Stack – react, redux, bootstrap, AccuWeather API, TOAST/modal for testing - MUST
write a simple, responsive, web app in react that shows the weather of some city. The user should be able to search for a city and save it to favorites (locally, a server is not required).
We expect to see 2 pages in this app. (weather page and favorites page).
API
The API that you’ll use for this app is AccuWeather API. Please sign up and create a new app to get an API key.
You will use 3 endpoints: location autocomplete for the search field, get current weather and 5-day daily forecast. Please read those API docs.
NOTE: this API is limited to 50 requests per day. our recommendation is to save the responses and use them locally during development.
- For design - use bootstrap or materialUI only.
SPECS
1. Create a header with navigation icons/links/buttons for main and favorites screen.
2. The main screen (weather details) will be composed of a search field to search a location’s weather by city name. And below it, the current weather and a 5-day forecast of the searched location. A location should have an indication if it’s already saved in favorites, and a button to add/remove from favorites (it can be the same button).
3. Display Tel Aviv weather by default.
4. Favorites screen will be composed of a list of favorite locations. Each location should have an ID, name, and current weather. Clicking on a favorite will navigate to the main screen showing the details of that location.
5. Searching should be done in English letters only
6. State management is a must - using REDUX!
7. Responsive design is a must! (flexbox/grid will give you extra points ?).
8. Error handling is a must! (Can be done with toast, modal).
9. Set the default location by using the Geolocation API. you will need another API endpoint for this: get location key by lat/lon.
10. Add dark/light theme support (add toggle button in the header).
11. Add Celsius/Fahrenheit toggle button.
12. Add animations (with good taste).
13. Deploy the app using Github Pages / netlify! – MUST
14. design must be closed to the example attached here.
Example – attached!