geminiSharma-Internship

package.json

@@ -6,8 +6,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.7",
     "react": "^18.2.0",
+    "react-devtools": "^5.0.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -1,38 +1,110 @@
-.App {
+/* src/styles.css */
+
+/* Header */
+header {
+  background-color: #333;
+  color: #fff;
+  padding: 10px 0;
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+header nav a {
+  color: #fff;
+  text-decoration: none;
+  margin: 0 10px;
+}
+
+/* Home Page */
+.home-page {
+  text-align: center;
+}
+
+.home-page h1 {
+  margin-top: 50px;
+}
+
+.home-page a {
+  display: block;
+  margin: 20px auto;
+  width: 200px;
+  padding: 10px;
+  background-color: #333;
+  color: #fff;
+  text-decoration: none;
+}
+
+/* Beer List */
+.beer-list {
+  margin-top: 20px;
+}
+
+.beer-list input[type="text"] {
+  margin-bottom: 20px;
+  padding: 8px;
+  width: 100%;
+}
+
+.beer-list ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.beer-list li {
+  margin-bottom: 20px;
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+
+.beer-list img {
+  width: 50px;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+
+/* Beer Detail */
+.beer-detail {
+  margin-top: 20px;
+}
+
+.beer-detail img {
+  margin-bottom: 10px;
+  display: block;
+  margin: 0 auto;
+}
+
+/* Random Beer */
+.random-beer {
+  margin-top: 20px;
+}
+
+.random-beer img {
+  margin-bottom: 10px;
+  display: block;
+  margin: 0 auto;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+/* New Beer Form */
+.new-beer-form {
+  margin-top: 20px;
 }
 
-.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;
+.new-beer-form input[type="text"],
+.new-beer-form input[type="number"],
+.new-beer-form textarea,
+.new-beer-form button {
+  margin-bottom: 10px;
+  padding: 8px;
+  width: 100%;
 }
 
-.App-link {
-  color: #61dafb;
+.new-beer-form button {
+  background-color: #333;
+  color: #fff;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.new-beer-form button:hover {
+  background-color: #555;
 }

src/App.js

@@ -1,24 +1,27 @@
-import logo from './logo.svg';
 import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import HomePage from './components/HomePage';
+import Header from './components/Header';
+import BeerList from './components/BeerList';
+import BeerDetail from './components/BeerDetail';
+import RandomBeer from './components/RandomBeer';
+import NewBeerForm from './components/NewBeerForm';
 
 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.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+      <Router>
+        <div>
+          <Header />
+          <Routes>
+            <Route path="/" exact Component={HomePage} />
+            <Route path="/beers" exact Component={BeerList} />
+            <Route path="/beers/:id" Component={BeerDetail} />
+            <Route path="/random-beer" Component={RandomBeer} />
+            <Route path="/new-beer" Component={NewBeerForm} />
+          </Routes>
+        </div>
+      </Router>
   );
 }
 

src/components/BeerDetail.css

@@ -0,0 +1,36 @@
+.beer-detail-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.beer-detail {
+    text-align: center;
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 5px;
+}
+
+.beer-detail img {
+    display: block;
+    margin: 0 auto;
+    width: 150px;
+    max-width: 300px;
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+.beer-detail h2 {
+    margin-top: 20px;
+    font-size: 24px;
+}
+
+.beer-detail p {
+    margin: 10px 0;
+    line-height: 1.5;
+}
+
+.beer-detail p strong {
+    font-weight: bold;
+}
+

src/components/BeerDetail.js

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
+import "./BeerDetail.css";
+
+const BeerDetail = () => {
+  const [beer, setBeer] = useState(null);
+  const { id } = useParams();
+
+  useEffect(() => {
+    const fetchBeer = async () => {
+      try {
+        const response = await axios.get(`https://ih-beers-api2.herokuapp.com/beers/${id}`);
+        setBeer(response.data);
+      } catch (error) {
+        console.error('Error fetching beer:', error);
+      }
+    };
+
+    fetchBeer();
+  }, [id]);
+
+  return (
+    <div className="beer-detail-container">
+      {beer && (
+        <div className="beer-detail">
+          <img src={beer.image_url} alt={beer.name} style={{ width: '150px' }} />
+          <h2>{beer.name}</h2>
+          <p>{beer.tagline}</p>
+          <p><strong>First Brewed:</strong> {beer.first_brewed}</p>
+          <p><strong>Attenuation Level:</strong> {beer.attenuation_level}</p>
+          <p><strong>Description:</strong> {beer.description}</p>
+          <p><strong>Contributed by:</strong> {beer.contributed_by}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default BeerDetail;

src/components/BeerList.css

@@ -0,0 +1,59 @@
+.beer-list-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+li {
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    overflow: hidden;
+}
+
+li a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: #333;
+}
+
+li a:hover {
+    background-color: #f9f9f9;
+}
+
+li img {
+    width: 50px;
+    margin: 20px 20px 20px 20px;
+}
+
+li div {
+    flex-grow: 1;
+}
+
+li h3 {
+    margin: 0;
+}
+
+li p {
+    margin: 5px 0;
+    color: #666;
+}

src/components/BeerList.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+import './BeerList.css'; 
+
+const BeerList = () => {
+  const [beers, setBeers] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    const fetchBeers = async () => {
+      try {
+        const response = await axios.get(`https://ih-beers-api2.herokuapp.com/beers${searchQuery ? `/search?q=${searchQuery}` : ''}`);
+        setBeers(response.data);
+      } catch (error) {
+        console.error('Error fetching beers:', error);
+      }
+    };
+
+    fetchBeers();
+  }, [searchQuery]);
+
+  const handleSearch = (e) => {
+    setSearchQuery(e.target.value);
+  };
+
+  return (
+    <div className="beer-list-container">
+      <h2>All Beers</h2>
+      <input type="text" value={searchQuery} onChange={handleSearch} placeholder="Search beers..." />
+      <ul>
+        {beers.map(beer => (
+          <li key={beer._id}>
+            <Link to={`/beers/${beer._id}`}>
+              <img src={beer.image_url} alt={beer.name} />
+              <div>
+                <h3>{beer.name}</h3>
+                <p>{beer.tagline}</p>
+                <p>Contributed by: {beer.contributed_by}</p>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default BeerList;

src/components/Header.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Header = () => {
+  return (
+    <header>
+      <nav>
+        <Link to="/">Home</Link>
+      </nav>
+    </header>
+  );
+}
+
+export default Header;