Readme

The Readme will at least have to include the following:

About

Small section saying what the Toronto Beach App is about

Contributing

What steps can someone take to contribute to this repo? This includes instructions on forking and cloning, referencing to issue labels, how to write commits, etc.

Versions

What minimum versions of npm, Node.js, etc are required?

...?

Create an overview/sketch of what the website will roughly look like, and what React components will be necessary for it.

Some useful tools:

• Wireframe
• Sketch (30 day trial)
• React's design principles?

Is your feature request related to a problem? Please describe.
While data from the Open Data Toronto API loads, we should display a piece of UI that represents a loading state

Describe the solution you'd like
All of the beach cards are present while the data loads, and the Ecoli number is a loading spinner instead of its numbers

Describe alternatives you've considered
A simple loader at the top level of the application so the beach list wouldn't render initial, but this results in a lower page speed score and suboptimal user experience.

Is your feature request related to a problem? Please describe.
Ability to click into a beach card that would redirect you to a specific beach page ie: torontobeach.app/beaches/mariecurtis
or
torontobeach.app/beaches/1

Depending on complexity and benefits between the two different approaches.

A user could explore historical data, find out the amenities, and a place for a future map integration

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

A first step can be to simply get the beach data to show up on the home page.

1. Fork & clone repo
2. Do an npm install
3. Make a call to the TorontoBeach api in pages/index.js
4. Get the data to show up :)

Is your feature request related to a problem? Please describe.
They sort of look clunky and the information isn't in a super logical order

Describe the solution you'd like
A refined beach card that renders the available, relevant information that's accessible and pleasurable to you.

Describe alternatives you've considered
Keeping it the same. Maybe you love it? Comment below.

Is your feature request related to a problem? Please describe.
When the City of Toronto reopens the 6 beaches on June 22nd, we need a way to 'flag' the closed beaches and display a string like 'this beach isn't open yet'.

ie:

beachStatus.js

export const beachStatus = [
  { beachID: 1, status: open }, 
  { beachID: 2, status: closed }, 
  ...etc
]

Describe the solution you'd like
An additional constant file that is easily maintained and modified once more beaches open up that can be imported to compare against when the API returns all of the beach results.