diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000000..71d72c140e
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,17 @@
+module.exports = {
+ env: { browser: true, es2020: true, node: true },
+ extends: [
+ "eslint:recommended",
+ "plugin:react/recommended",
+ "plugin:react/jsx-runtime",
+ "plugin:react-hooks/recommended",
+ ],
+ parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+ settings: { react: { version: "18.2" } },
+ plugins: ["react-refresh"],
+ rules: {
+ "react-refresh/only-export-components": "warn",
+ "react/prop-types": 0,
+ "no-unused-vars": ["error", { varsIgnorePattern: "^set" }],
+ },
+};
diff --git a/.gitignore b/.gitignore
index 4d29575de8..da9d19bcd8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
-# testing
-/coverage
+node_modules
-# production
-/build
+dist-ssr
+*.local
-# misc
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
index 7a3385ee2e..2ea98f381d 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,42 @@
-# LAB | React IronBeers
+# LAB | React Iron Brewers
-Since beer is one of the most consumed drinks between Ironhackers 🍻 , our mission here is to create an app to showcase some of the best-handcrafted beers, but not just that - to save some as well so the rest of Ironhack community is informed 😌. Our end goal is creating something like this:
+
+
+
Learning Goals
+
+
+This exercise is designed to help you practice and apply the concepts and techniques taught in class.
+
+
+
+After completing this exercise, you will be able to:
+
+- Set up side effects in React components with the `useEffect` hook.
+- Make `POST` and `GET` HTTP requests from React components using `axios`.
+- Integrate your front-end React app with an API or the backend of your application.
+
+
+
+
+
+
+
+
+
+In this lab, we will be working on an app that caters to brewers, beer enthusiasts, and all those interested in handcrafted beers - the Iron Brewers app. Our mission here is to create an app to showcase some of the best handcrafted beers, but not just that - also make it so that users can contribute by saving their handcrafted beers to the database and sharing them with fellow brewers and the community.
+
+Our final result of the app should resemble something similar to this:
+
+
+
+
+
+
+
+
-
-
-
## Setup
@@ -14,9 +44,9 @@ Since beer is one of the most consumed drinks between Ironhackers 🍻 , our mis
- Clone this repo
```shell
-cd lab-react-ironbeers
+cd lab-react-iron-brewers
npm install
-npm start
+npm run dev
```
## Submission
@@ -29,164 +59,382 @@ npm start
git push origin master
```
-- Create Pull Request so that your TAs can check up your work.
+- Create a Pull Request and submit your assignment.
+
+
+
+## Test Your Code
+
+This lab is equipped with unit tests to provide automated feedback on your progress and help you understand whether your code is working as expected. If you want to check the tests, they are located in the `src/test` folder.
+
+
+
+
+### Iterations and Test Results
+
+During an iteration, if your code seems to work as expected but some tests don't pass, feel free to move on to the next iteration. Once you've completed all the mandatory iterations, you can go back and resolve any remaining failed test
+
+
+
+### Run the Tests
+
+1. To execute the tests, run the following command in the terminal:
+
+ ```shell
+ npm run test
+ ```
+
+2. The above command will execute the tests and open the `@vitest/ui` Test Reporter in the browser.
+
+3. To see the test results, **open** [http://127.0.0.1:51204/\_\_vitest\_\_](http://127.0.0.1:51204/__vitest__) in your browser.
+
+
+
+
## Introduction
-We will be building a React app so the API (server) needs to be built somewhere for us, right? You are completely right, it's deployed on _heroku_ and the root fo the API is:
-**`https://ih-beers-api2.herokuapp.com/beers`**.
+### Beers API (backend)
+
+We will be building a React app, so the API (backend) needs to be built somewhere for us, right? You are completely right, we will be using a public API called Beers API. The base URL of the API is:
+
+**`https://ih-beers-api2.herokuapp.com/beers`**
+
+
+
+The API provides the following endpoints:
+
+| Method | Endpoint | Response (200) | Action |
+| ------ | ------------------- | ------------------------------------------------------ | ------------------------------------------------------------ |
+| `GET` | `/` | [beers] | Get all the beers from the DB |
+| `GET` | `/:id` | { beer } | Get a single/specific beer |
+| `GET` | `/random` | { beer } | Get a random beer from the DB |
+| `POST` | `/new` | { message: "New beer successfully saved to database!"} | Create a new beer (see iteration 7 for fields) |
+| `GET` | `/search?q={query}` | [beers] | Search beers by name containing the specified term. Example: `/search?q=lager` query will return all beers with the word lager in their name. |
+
+
+
+
+
+You can refer to this section any time during the exercise for information about the API endpoints and their usage.
+
+
+
+**Note:** The first time you make a request to the API, it might take a bit longer to respond.
+
+
+
+
+
+
-The available endpoints are the following:
+## Instructions
-| Method | Endpoint | Response (200) | Action |
-| ------ | ------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
-| GET | / | [beers] | Get all the beers from the DB |
-| GET | /:id | { beer } | Get the a single/specific beer |
-| GET | /random | { beer } | Get a random beer from the DB |
-| POST | /new | { message: "New beer successfully saved to database!"} | Create a new beer (the fields are specified in the instructions) |
-| GET | /search?q=`{query}` | [beers] | Get beers from the DB whose name contains the search term. For example `/search?q=lager` searches for all beers with lager in the name. |
+To help you get started quickly, we have provided you with the starter code and all the required page components. This means there's no need for you to create any new components. Instead, your task is to set up effects in the components to make HTTP requests to the API using `axios` to retrieve and send data.
-On each iteration, we will explain which endpoint you should use!
+
-The **IronBeers** project will include the following features:
+The app already includes the following pages:
-- A **Home** page with three different options:
+- A **Home** page with links to 3 different pages:
- _All Beers_
- _Random Beer_
- _New Beer_
-- A **List Beers** page where you should display all the beers
-- A **Single Beer** page to display the details of the beer the user clicked on
-- A **Random Beer** page to display a Random Beer
-- A **New Beer** page to show a form where a user can create new beers
+
+- An **All Beers** page where you should display all the beers
+
+- A **Single Beer** page where you should display the details of the beer the user clicked on
+
+- A **New Beer** page showing a form where you should implement the functionality to create new beer (make a POST request to the API)
+
+- A **Random Beer** page where you should display a random handcrafted beer
-## Instructions
+Take a moment to explore the starter code and familiarize yourself with the components and the structure of the app. To run the app, use the command `npm run dev` in the terminal.
+
+
+
+
+
+
+### Iteration 1 | List all the beers
+
+In this iteration, you will work on the `AllBeersPage` component in the `src/pages/AllBeersPage.jsx`, which is rendered on the `/beers` route.
+
+
+The `AllBeersPage` component already displays a list of beers coming from a static JSON data that is stored in a state variable `beers`. However, the component should display a list of all the beers from the Beers API. Your task is to replace the static data with the data coming from the Beers API.
+
+
+
+
+Your task is to make a `GET` request to the Beers API endpoint `https://ih-beers-api2.herokuapp.com/beers` using `axios`. This API endpoint returns an **array of beers**. Once you get a response from the Beers API, save it in the state variable `beers`.
+
+
+
+
+
+
+
+
+
+
+ See Expected Result
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+----
+
+### Iteration 2 | Display a single beer
+
+In this iteration, you will work on the `BeerDetailsPage` component in the `src/pages/BeerDetailsPage.jsx`.
+
+
+
+When a user clicks on one of the beers in the list on the `AllBeersPage`, they will be redirected to the *Beer Details page*. When the user is redirected, the URL displayed in the browser's address bar will change to `/beers/:beerId`. Here, `:beerId` represents the unique id of the beer that the user selected.
+
+
+
+Your task is to display the details of the selected beer by fetching the data from the Beers API.
+
+
+
+
+
+#### 2.1 | Access URL Parameter
+
+To get the details of a specific beer, you will need the beer id, which you can get from the URL.
+
+The beer id is passed as a URL parameter `:beerId` in the URL. To access the URL parameter, you need to use the `useParams` hook from the `react-router-dom` package.
-:exclamation: At the very beginning we will offer you to shoot for the stars: as a **bonus** focus on **mobile first** design! As we said this is bonus, so it's up to you. :+1:
+Check [this example](https://reactrouter.com/en/6.10.0/hooks/use-params) if you need a reminder of how to set up the useParams hook and access the URL parameters.
+
+
+
+
+
+#### 2.2 | Make a request to the API
+
+To get the details of a specific beer, you need to make a `GET` request to the Beers API endpoint `https://ih-beers-api2.herokuapp.com/beers/:id`, where `:id` should be replaced with the id of the selected beer.
+
+**Example:** [https://ih-beers-api2.herokuapp.com/beers/**5fb6a86265b9c209606e10e2**](https://ih-beers-api2.herokuapp.com/beers/5fb6a86265b9c209606e10e2)
+
+
+
+
+
+#### 2.3 | Save the response in the state
+
+The `BeerDetailsPage` component already has a state variable `beer` and is set up to display the beer details. Once you make the `GET` request to the API, save the response data in the `beer` state variable so that it displays in the component.
+
+
+
+
+
+
+
+
+
+ See Expected Result
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+----
+
+
+### Iteration 3 | Create a new beer
+
+In this iteration, you will work on the `AddBeerPage` component in the `src/pages/AddBeerPage.jsx`, which is rendered on the `/new-beer` route.
+
+
+
+
+
+The `AddBeerPage` component, which is rendered on the `/new-beer` route, already includes a `form` for creating a new beer, together with state variables and handler functions for the form inputs. You will use them as a starting point for implementing the functionality to create a new beer.
+
+
-
+
+Your task is to create a submit handler function that will be called when the user *submits* the form. The handler function should make a `POST` request to the API endpoint `https://ih-beers-api2.herokuapp.com/beers/new` to create a new beer.
-### Iteration 1 | Home Page
+When you send the `POST` request, the **the request `body` fields MUST have the following names**:
+
-Create a **Home Page**. This view should include three links to separate pages:
+| Property Name | Data Type |
+| ------------------------- | ------------ |
+| **`name`** | String |
+| **`tagline`** | String |
+| **`description`** | String |
+| **`image_url`** | String |
+| **`first_brewed`** | String |
+| **`brewers_tips`** | String |
+| ***`attenuation_level`*** | ***Number*** |
+| **`contributed_by`** | String |
-- `/beers`
-- `/random-beer`
-- `/new-beer`
+
-Feel free to design it however you wish, but in case you want to do it the way we did it, you can find the following images in `src/assets` folder:
+:exclamation: **Important**: Take a moment to double-check that the fields in the request `body` match the names shown above. If the names don't match, the API will reject the request.
-
-
-
-### Iteration 2 | Header
+If everything goes well, you will receive a **200** response from the server. :beer:
-On every view (except for the `home`), we should add a **header** with a `link` to the root of the `app`.
+The `attenuation_level` value must be set to the correct data type of `number`. If a `string` is sent instead, the API will respond with a **500** error status code.
-
-
-
-### Iteration 3 | List all the beers
-On the `/beers` route, we should display all the beers from the database. So, in this case, you need to "hit" the API's route `https://ih-beers-api2.herokuapp.com/beers` and the API will return an **array of beers**.
-_Hint_: The array of beers is array of objects. We strongly advise you to **console log the response** from the API so you can see the structure of it.
+
+
+
+ See Expected Result
+
+
+
+
+
+
+
+
+
+
-You should display the following from each of the beers:
-- `image`
-- `name`
-- `tagline`
-- `contributed_by`
-- **Also, add the link to check the details of each beer. The link should navigate to `/beers/:beerId`.**
-
-
-
-The first time you call the API, it might take a bit to respond. It's hosted on Heroku, and it goes to sleep after 30 minutes, you know! :wink:
+
+
+
+
-### Iteration 4 | Display a single beer
+----
+
+### Bonus: Iteration 4 | A random beer
+
+In this iteration, you will work on the `RandomBeerPage` component in the `src/pages/RandomBeerPage.jsx`.
+
+
-When a user click on one of the beers, you should display a detailed view of it, including the following fields:
-- `image`
-- `name`
-- `tagline`
-- `first_brewed`
-- `attenuation_level`
-- `description`
-- `contributed_by`
-Again, we **strongly recommend to console log the response from the API**.
+The `RandomBeerPage` component, which is rendered on the `/random-beer` route, should display a random beer retrieved from the Beers API.
+
+Your task is to make a `GET` request to the endpoint `https://ih-beers-api2.herokuapp.com/beers/random` to get the data of a random beer to display on the page.
-
-
-
-### Iteration 5 | A random beer
-On the `/random-beer` route, we will render a single beer that will be retrieved from the database. The endpoint will do all the job for us, all we need to do is to call `https://ih-beers-api2.herokuapp.com/beers/random`. We should receive an object including all the info about a beer.
-The same way we did with the **Single Beer** view, we should render the following fields:
-- `image`
-- `name`
-- `tagline`
-- `first_brewed`
-- `attenuation_level`
-- `description`
-- `contributed_by`
+The `RandomBeerPage` component already has a state variable `randomBeer` and is set up to display the beer details. Once you make the `GET` request to the API, save the response data in the `randomBeer` state variable so that it displays in the component.
+
+
-
-
-
-### Iteration 6 | Create a new beer
-Finally, on the `/new-beer` route (remember, this is you react route, you're displaying the form on this route), we should render a form where user can create new beers. The `form` should include the following fields:
-- **name** - must be type _text_
-- **tagline** - must be type _text_
-- **description** - must be type _text_
-- **first_brewed** - must be type _text_
-- **brewers_tips** - must be type _text_
-- **attenuation_level** - must be type _number_ **!!!**
-- **contributed_by** - must be type _text_
+
+
+
+ See Expected Result
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+----
+
+### Bonus: Iteration 5 | Filter the beers
-Why we pointed out the type? Well, since we already console log response from the API, we could notice that all the fields are strings but _attenuation_level_, which is number. Using our knowledge from module II, we can make conclusion that in the _beer model_ all the properties are type _String_ except _attenuation_level_, which is type _Number_.
-When you have built the form, you should do a `POST` request to `https://ih-beers-api2.herokuapp.com/beers/new`, passing all the data on the `body` object. If everything went ok, you would receive a **200** response from the server.
+As the final feature, your task is to implement a search functionality where users can filter beers based on keywords.
-Notice that the fields on the `body` should have those specific **names** so the API can create a new beer.
+Your task is to implement the functionality to filter the beers by name. In the `AllBeersPage` component, you will find a `SearchBar` component that is rendered above the list of beers. You should use it as a starting point for implementing the search functionality.
-_What could go wrong?_: You inputted string instead of number in the _attenuation_level_ field and the server sent you **500** error.
-Since we didn't cover how to upload images yet, don't worry about it now - the API will assign a random image to the new beer. :beer:
+Every time the user types a new letter in the search bar, you should make a request to `https://ih-beers-api2.herokuapp.com/beers/search?q={query}`, passing the input value as the `q` param.
-
-
-
-### Iteration 7 | Bonus | Filter the beers
-Yes! One endpoint left! On the `/beers` route, add an `input` where users can search for beers. Every time a new letter is typed, you should call to `https://ih-beers-api2.herokuapp.com/beers/search?q={query}` passing the value of the input in the `q` param.
-**We are done!** :trophy:
+
+
+
+
+ See Expected Result
+
+
+
+
+
+
+
-
-
+
-
-
-
+
-
+