done

package.json

@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
+    "classnames": "^2.2.6",
+    "react": "^16.9.0",
+    "react-bootstrap": "^1.0.0-beta.12",
+    "react-dom": "^16.9.0",
+    "react-router-dom": "^5.1.0",
+    "react-scripts": "3.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -18,10 +19,7 @@
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "extends": "react-app"
   },
   "browserslist": {
     "production": [
@@ -35,4 +33,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/App.css

@@ -1,15 +1,100 @@
 .App {
   text-align: center;
 }
+@media only screen and (max-width: 768px) {
 
 .App-logo {
   height: 40vmin;
   pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
+  .App {
+    text-align: center;
+  }
+
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
+    height: 40vmin;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+      animation: App-logo-spin infinite 20s linear;
+    }
+  }
+
+  .App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+  }
+
+  .App-link {
+    color: #125467;
+  }
+
+  @keyframes App-logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .nav-container {
+    background-color: #205a69;
+    height: 60px; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .Link {
+    text-align: center;
+    max-width: 100%;
+    height: auto;
+    text-decoration: none;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  h1 {
+    font-size: 1.2rem;
+    color: #282c34;
+    text-align: left;
+    margin: 10px 0 0 15px;
+    padding: 0;
+  }
+
+  .paragraph {
+    text-align: left;
+    margin: 15px 5px 15px 15px;
+    padding: 0;
+    color: gray;
+  }
+
+  .fa-home {
+    color: aliceblue;
+    text-decoration: none;
+    border: none;
+    background-color: transparent;
+    padding: 0;
+    margin: 0;
+    font-size: 25px;
+    font-family: inherit;
+    cursor: pointer;
   }
 }
 
@@ -23,16 +108,76 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
+  .beer-container {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .beer-box-photo {
+    align-items: start;
+    margin: 15px 25px;
+  }
 
 .App-link {
   color: #61dafb;
 }
+  .beer-box-text {
+    display: flex;
+    flex-direction: column;
+    text-align: left;  
+  }
 
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
+  .form-box {
+    display: flex;
+    flex-direction: column;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  .form-box > div {
+    margin-bottom: 20px;
+  }
+
+  .form-box label {
+    font-weight: bold;
+    display: block;
+    margin-bottom: 5px;
   }
   to {
     transform: rotate(360deg);
+
+  .form-box input,
+  .form-box textarea {
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+  }
+
+  .form-box button {
+    margin: 0 auto;
+    background-color: #89c53b;
+    width: 300px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: none;
+    cursor: pointer;
+
+  }
+
+  .form-box button a {
+    color: rgb(220, 214, 214);
+    text-decoration: none;
   }
 }
+
+  /* .form-box button:hover {
+    background-color: #e67e22;
+  } */
+
+}
+}
+}

src/App.js

@@ -1,25 +1,21 @@
+import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h1 className="App-title">Welcome to React</h1>
+        </header>
+        <p className="App-intro">
+          To get started, edit <code>src/App.js</code> and save to reload.
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+      </div>
+    );
+  }
 }
 
 export default App;

src/App.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+import HomeView from "./views/Home";
+import RandomBeer from "./components/RandomBeer";
+import Beers from "./components/Beers";
+import NewBeer from "./components/NewBeer";
+
+import BeerDetail from "./components/BeerDetail";
+import "./App.css";
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <BrowserRouter>
+          <Switch>
+            <Route path="/" exact component={HomeView} />
+            <Route path="/beers" component={Beers} />
+            <Route path="/beer/:id" component={BeerDetail} />
+            <Route path="/randombeer" component={RandomBeer} />
+            <Route path="/newbeer" component={NewBeer} />
+          </Switch>
+        </BrowserRouter>
+      </div>
+    );
+  }
+}
+
+export default App;

src/components/BeerCard.jsx

@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+import { load } from "../services/beers-api";
+import Card from "react-bootstrap/Card";
+import Container from "react-bootstrap/Container";
+
+export default class BeerDetail extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      beer: []
+    };
+  }
+
+  componentDidMount() {
+    const id = this.props.match.params.id;
+    load(id)
+      .then(beer => {
+        this.setState({
+          beer
+        });
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
+
+  render() {
+    console.log(this.state.beer);
+    return (
+      <div>
+        <Container>
+          <Card style={{ width: "18rem" }}>
+            <Card.Img
+              className="px-5"
+              variant="top"
+              src={this.state.beer.image_url}
+            />
+            <Card.Body>
+              <Card.Title>{this.state.beer.name}</Card.Title>
+              <Card.Text>{this.state.beer.tagline}</Card.Text>
+              <Card.Text>{this.state.beer.first_brewed}</Card.Text>
+              <Card.Text>{this.state.beer.description}</Card.Text>
+              <Card.Text>{this.state.beer.contributed_by}</Card.Text>
+            </Card.Body>
+          </Card>
+        </Container>
+      </div>
+    );
+  }
+}