Skip to content

Fix README.md typos #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cristianocclemente wants to merge 1 commit into
base: workshop
Choose a base branch
from
Open

Fix README.md typos #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* [Setup](#setup) - General instructions to install Node v15;
* [Bootstrapping](#bootstrapping) - Instructions to get the application running;
* [A few goodies](#a-few-goodies) - Brief list of useful packages;
* [Building a Weather app](#building-a-weather-app) - Detailed description of the desired functionallities;
* [Building a Weather app](#building-a-weather-app) - Detailed description of the desired functionalities;
* [Next steps](#next-steps) - Suggestions of further challenges to enhance our Weather app.

# Setup
Expand Down Expand Up @@ -55,7 +55,7 @@ Before we launch our application, ensure that you have React v16 installed. By d
npm install react@^16.14.0 react-dom@16.14.0
```

### Lunching our react application
### Launching our react application
We can now run the application on development mode.
```bash
npm start
Expand Down Expand Up @@ -136,7 +136,7 @@ export default function SimpleCard() {
};
```

Material-UI brings along dozens of components that cover a fairly amount of scenarios and the following root components will be quite useful during our development:
Material-UI brings along dozens of components that cover a fairly large amount of scenarios and the following root components will be quite useful during our development:

* [Autocomplete](https://material-ui.com/components/autocomplete) - Input with suggestions;
* [Card](https://material-ui.com/components/cards/) - Material-UI's root Card component;
Expand All @@ -163,25 +163,25 @@ They can be imported and used in the application:
import searchSample from "./sample/search.json";
```

The next sections we will further detail the behavior and role of each element of our interface and supply tips in how to proceed.
The next sections we will further detail the behavior and role of each element of our interface and supply tips on how to proceed.
These tips are only tips and nothing more, feel free to explore Material-UI's components to shape the interface to suit your taste.


## Setting up a layout
Before jumping into more concrete blocks of our application we have to setup a general layout, it will work as the foundations of the interface and split it into sections where we will place the other elements.
Before jumping into more concrete blocks of our application we have to set up a general layout, it will work as the foundations of the interface and split it into sections where we will place the other elements.

[Grid](https://material-ui.com/components/grid/) from Material-UI is quite handy to achieve such behavior. It creates a wrapper container with 12 columns, allowing a quick establishment of sections with a fixed set of columns for a specified resolution. Grid will adjust its sub-components to fit the current resolution following the provided props.


## Searching for a location
This element consist of an input to type a location.

It will guide our user, displaying suggestions of locations that suit the provide input.
It will guide our user, displaying suggestions of locations that suit the provided input.

[Material-UI's Autocomplete](https://material-ui.com/components/autocomplete) component suits this task. It is capable of providing suggestions from a existing source and filtering them to match the input. Also provides a mechanism to establish the behavior for click actions.

## Displaying the forecast for the next few days
Upon selecting a location trough the search, this section should render a set o elements to display the forecast for the next 5 days.
Upon selecting a location through the search, this section should render a set o elements to display the forecast for the next 5 days.

This should display a summary, with the following information:

Expand All @@ -202,7 +202,7 @@ This section should display the details of today's forecast, with all the inform
## Fetch data directly from the API
Until now, our forecast comes only from the sample files, but ideally, we should be fetching the data directly from [MetaWeather](https://www.metaweather.com/), but this is where it gets complicated.

MetaWeather API doesn't have [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) enabled, so our browser will refuse to fetch data from it. As a work around, we can use [`local-cors-proxy`](https://github.com/garmeeh/local-cors-proxy#readme) to proxy the request and trick our browser.
MetaWeather API doesn't have [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) enabled, so our browser will refuse to fetch data from it. As a workaround, we can use [`local-cors-proxy`](https://github.com/garmeeh/local-cors-proxy#readme) to proxy the request and trick our browser.
```bash
npm install -g local-cors-proxy
lcp --origin http://localhost:3000 --proxyUrl https://www.metaweather.com
Expand Down