Lingutla Prem Kumar Internship

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.16"
   }
 }

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  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: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,24 +1,24 @@
-import logo from './logo.svg';
 import './App.css';
+import Header from './components/Header'
+import HomePage from './pages/HomePage'
+import ListBeersPage from './pages/ListBeersPage';
+import BeerDetailsPage from './pages/BeerDetailsPage';
+import RandomBeerPage from './pages/RandomBeerPage';
+import NewBeerPage from './pages/NewBeerPage';
+import {Routes, Route } from 'react-router-dom';
 
-function App() {
+const 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>
+    <>
+      <Header />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/beers" element={<ListBeersPage />} />
+        <Route path="/beers/:beerId" element={<BeerDetailsPage />} />
+        <Route path="/random-beer" element={<RandomBeerPage />} />
+        <Route path="/new-beer" element={<NewBeerPage />} />
+      </Routes>
+    </>
   );
 }
 

src/components/BeerCard.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+
+const BeerCard = ({beer}) => {
+  return (
+    <div className="bg-white rounded shadow p-4 flex items-center">
+      <img
+        src={beer.image_url}
+        alt={beer.name}
+        className="w-16 h-16 object-contain mr-4"
+      />
+      <div>
+        <h2 className="text-lg font-bold">{beer.name}</h2>
+        <p className="text-sm text-gray-500">{beer.tagline}</p>
+        <p className="text-xs text-gray-400">Contributed by: {beer.contributed_by}</p>
+        <Link
+          to={`/beers/${beer._id}`}
+          className="text-blue-500 hover:underline text-sm"
+        >
+          View Details
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default BeerCard

src/components/Header.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+
+
+const Header = () => {
+  return (
+    <div className="bg-blue-500 text-white p-4">
+      <div className="container mx-auto flex justify-center">
+        <Link to="/" className="text-2xl font-bold">
+          🍻Beer
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default Header

src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/index.js

@@ -3,12 +3,13 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>
+  </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/BeerDetailsPage.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+const BeerDetailsPage = () => {
+  const { beerId } = useParams();
+  const [beer, setBeer] = useState(null);
+
+  useEffect(() => {
+    fetch(`https://ih-beers-api2.herokuapp.com/beers/${beerId}`)
+      .then(res => res.json())
+      .then(data => setBeer(data));
+  }, [beerId]);
+
+  if (!beer) return <p>Loading...</p>;
+
+  return (
+    <div className="p-4 bg-gray-100 min-h-screen">
+      <div className="max-w-lg mx-auto bg-white shadow rounded p-4">
+        <img
+          src={beer.image_url}
+          alt={beer.name}
+          className="w-32 h-32 object-contain mx-auto mb-4"
+        />
+        <h1 className="text-2xl font-bold">{beer.name}</h1>
+        <p className="text-sm text-gray-500">{beer.tagline}</p>
+        <p className="mt-4">First Brewed: {beer.first_brewed}</p>
+        <p>Attenuation Level: {beer.attenuation_level}</p>
+        <p className="mt-2">{beer.description}</p>
+        <p className="mt-4 text-gray-500">Contributed by: {beer.contributed_by}</p>
+      </div>
+    </div>
+  );
+}
+
+export default BeerDetailsPage

src/pages/HomePage.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import beersImage from '../assets/beers.png';
+import randomBeerImage from '../assets/random-beer.png';
+import newBeerImage from '../assets/new-beer.png';
+
+const HomePage = () => {
+  return (
+    <div className="bg-gray-100 min-h-screen">
+      <h1 className="text-4xl font-bold text-center py-8">Welcome to Beer Showcase</h1>
+      <div className="space-y-8">
+        <div className="bg-white shadow-md rounded-lg overflow-hidden">
+          <Link to="/beers">
+            <img src={beersImage} alt="All Beers" className="w-full h-64 object-cover" />
+            <div className="p-4">
+              <h2 className="text-2xl font-semibold">All Beers</h2>
+              <p className="text-gray-600 text-sm">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra
+                egestas lectus, sit amet eleifend ex tincidunt in.
+              </p>
+            </div>
+          </Link>
+        </div>
+
+        <div className="bg-white shadow-md rounded-lg overflow-hidden">
+          <Link to="/random-beer">
+            <img src={randomBeerImage} alt="Random Beer" className="w-full h-64 object-cover" />
+            <div className="p-4">
+              <h2 className="text-2xl font-semibold">Random Beer</h2>
+              <p className="text-gray-600 text-sm">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra
+                egestas lectus, sit amet eleifend ex tincidunt in.
+              </p>
+            </div>
+          </Link>
+        </div>
+
+        <div className="bg-white shadow-md rounded-lg overflow-hidden">
+          <Link to="/new-beer">
+            <img src={newBeerImage} alt="New Beer" className="w-full h-64 object-cover" />
+            <div className="p-4">
+              <h2 className="text-2xl font-semibold">New Beer</h2>
+              <p className="text-gray-600 text-sm">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra
+                egestas lectus, sit amet eleifend ex tincidunt in.
+              </p>
+            </div>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default HomePage

src/pages/ListBeersPage.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import BeerCard from '../components/BeerCard';
+
+
+const ListBeersPage = () => {
+  const [beers, setBeers] = useState([]);
+
+  useEffect(() => {
+    fetch('https://ih-beers-api2.herokuapp.com/beers')
+      .then(res => res.json())
+      .then(data => setBeers(data));
+  }, []);
+
+  return (
+    <div className="p-4 bg-gray-100 min-h-screen">
+      <h1 className="text-2xl font-bold mb-4">All Beers</h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {beers.map(beer => (
+          <BeerCard key={beer._id} beer={beer} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ListBeersPage

src/pages/NewBeerPage.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import { useState } from 'react';
+
+
+const NewBeerPage = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    tagline: '',
+    description: '',
+    first_brewed: '',
+    brewers_tips: '',
+    attenuation_level: 0,
+    contributed_by: '',
+  });
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    fetch('https://ih-beers-api2.herokuapp.com/beers/new', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(formData),
+    }).then(() => alert('Beer added successfully!'));
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="max-w-lg mx-auto bg-white shadow p-4 rounded mt-8"
+    >
+      {Object.keys(formData).map(field => (
+        <div className="mb-4" key={field}>
+          <label className="block text-sm font-bold mb-1">
+            {field.replace('_', ' ')}
+          </label>
+          <input
+            type={field === 'attenuation_level' ? 'number' : 'text'}
+            className="w-full border rounded-full p-2"
+            value={formData[field]}
+            onChange={e =>
+              setFormData({ ...formData, [field]: e.target.value })
+            }
+          />
+        </div>
+      ))}
+      <button
+        type="submit"
+        className="w-full bg-blue-500 text-white py-2 rounded-full hover:bg-blue-600"
+      >
+        Add Beer
+      </button>
+    </form>
+  );
+}
+
+export default NewBeerPage

src/pages/RandomBeerPage.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+const RandomBeerPage = () => {
+  const [beer, setBeer] = useState(null);
+
+  useEffect(() => {
+    fetch('https://ih-beers-api2.herokuapp.com/beers/random')
+      .then(res => res.json())
+      .then(data => setBeer(data));
+  }, []);
+
+  if (!beer) return <p className="p-4">Loading...</p>;
+
+  return (
+    <div className="p-4 bg-gray-100 min-h-screen">
+      <div className="max-w-lg mx-auto bg-white shadow rounded p-4">
+        <img
+          src={beer.image_url}
+          alt={beer.name}
+          className="w-32 h-32 object-contain mx-auto mb-4"
+        />
+        <h1 className="text-2xl font-bold">{beer.name}</h1>
+        <p className="text-sm text-gray-500">{beer.tagline}</p>
+        <p className="mt-4">First Brewed: {beer.first_brewed}</p>
+        <p>Attenuation Level: {beer.attenuation_level}</p>
+        <p className="mt-2">{beer.description}</p>
+        <p className="mt-4 text-gray-500">Contributed by: {beer.contributed_by}</p>
+      </div>
+    </div>
+  );
+}
+
+export default RandomBeerPage;

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}