jwpf100 / react-weather-app

Weather app created in react, styled with bootstrap and consuming weatherbit.io API.

Hi, I'm Joe Fletcher 👋

After spending 8 years working in leadership roles within E-Commerce I decided that I actually wanted to make things. That was March 2020, fast forward to now and after intensive study and hands-on experience creating custom apps and websites, I am using my unique skillset to help businesses achieve their goals as a Full Stack Developer.

A bit more about me...

• Experienced in React, Javascript, Typescript and AWS
• Looking to contribute to some interesting open source projects
• Live in South London

If you want to know anything else, please get in touch!

react-weather-app's Issues

Bug: React errors with no initial data in localstorage

See image:

Redesign Name section

See design:

Initially just copy the name section. Leave '+' and burger menu for later extra functionality.

bug: issue with showweather button behaviour

Check api function - fetchcurrentweatherdata

Amendments to responsive design

Push save button to top right corner, above 7 day forecast.

Margin between saved search and main center section disappears on desktop (when display switches to flex).

Display - Current Forecast

Acceptance Criteria

Add basic components that display:
City Name
Country
Lat and Lon
Current Weather
Image of Weather
Description of Weather
Sunrise
Sunset
Temperature
Wind Speed/Direction
Precipitation

Style app

Improve visual appearance of app

Redesign main home screen section

Home screen layout to look similar to this:

Add hourly weather section

Similar design to the below:

Combined with:

Each hour shows:

% chance of rain
Logo
Temp
Hour

Set Up Dev Environment

• repository
• create-react-app
• commitizen
• eslint/prettier
• bootstrap & scss
• basic folder structure

Add Details Section

Include:

Display - 7 Day Forecast

Acceptance Criteria

Add component that shows forecast for next seven days, including the following info:

• Weather Image and description
• High/Low Temp
• Precip
• Wind

LocalStorage Interface

User Acceptance

Functionality that allows user to save current search, and list of all saved searches. Aim is to provide the following:

User can save searched locations
Saved locations are listed for the user
Saved locations can be removed

Create the routes to save

Change API to use Met Office Data

https://www.metoffice.gov.uk/services/data/datapoint/getting-started

List of searches

User can click on a button to save the search. Adds it to a list. Display the list of saved searches on page.

Bug: failed prop type

Improve search confirmation

Wait to search, or ability to use enter

Error catching when no response from API

Search/API Interface

User Acceptance

User must be able to:
Search by location, post code or lat / lng

Put request into API using search criteria provided from Search Interface

Validation for API search

Ensure that what is being entered is valid e.g. lat/lon is a number, city is a string, postcode is alphanumeric

Following update, SCSS not working as expected

SCSS not compiling correctly. Bg-clear isn't working but btn-clear is.

Bug: Search Error if all fields are blank

If all fields are blank then fatal error occurs.

bug: lat/long supplied as undefined when postcode selected

Works ok for city option, lat/lon must be required to search for postcode. Ensure that postcode supplied as something that the api can recognise.

Search Interface

User Acceptance

User must be able to:
Search by location, post code or lat / lng

Add search section which allows user to select how they want to search. Include search button to commence search. - Search functionality in separate issue.

Ensure no duplicates in saved searches