├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── context
    │   └── UserContext.js
    ├── setupTests.js
    ├── App.test.js
    ├── reportWebVitals.js
    ├── components
    │   ├── Footer.js
    │   └── Nav.js
    ├── index.js
    ├── App.css
    ├── pages
    │   ├── MainPage.js
    │   ├── Recipes.js
    │   ├── About.js
    │   ├── RecipeDetails.js
    │   └── SignUser.js
    ├── App.js
    ├── logo.svg
    └── index.css
├── .gitignore
├── package.json
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/copilpatricia/capstone_project_frontend/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/copilpatricia/capstone_project_frontend/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/copilpatricia/capstone_project_frontend/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/context/UserContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | 
3 | export const UserContext = createContext(null);
4 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | function Footer() {
 2 |   return (
 3 |     <div className="footer_container">
 4 |       <div className="icons_container">
 5 |         <i className="fa-brands fa-square-instagram fa-2xl"></i>
 6 |         <i className="fa-brands fa-pinterest fa-2xl"></i>
 7 |         <i className="fa-brands fa-facebook fa-2xl"></i>
 8 |         <i className="fa-brands fa-twitter fa-2xl"></i>
 9 |       </div>
10 |       <div  className="footer_text">
11 |       <p>© 2024 Taste of joy. All Rights Reserved. A Raptive Partner Site.</p>
12 |       </div>
13 |     </div>
14 |   );
15 | }
16 | 
17 | export default Footer;
18 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App";
 5 | import reportWebVitals from "./reportWebVitals";
 6 | 
 7 | import { BrowserRouter } from "react-router-dom";
 8 | 
 9 | const root = ReactDOM.createRoot(document.getElementById("root"));
10 | root.render(
11 |   <React.StrictMode>
12 |     <BrowserRouter>
13 |       <App />
14 |     </BrowserRouter>
15 |   </React.StrictMode>
16 | );
17 | 
18 | // If you want to start measuring performance in your app, pass a function
19 | // to log results (for example: reportWebVitals(console.log))
20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
21 | reportWebVitals();
22 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/pages/MainPage.js:
--------------------------------------------------------------------------------
 1 | function MainPage({ quote }) {
 2 |   return (
 3 |     <>
 4 |     
 5 |     <div className="container_main">
 6 |       
 7 |      
 8 |       <section className="quote_section">
 9 |       <h2 id="title_MP">
10 |         SIMPLE RECIPES MADE FOR
11 |         <span id="word_MP">real. actual. everyday life.</span>
12 |       </h2>
13 |         <div className="quote_container">
14 |           <p id="p_MP">{quote.sentence}</p>
15 |         </div>
16 |       </section>
17 |     </div>
18 |  
19 |     </>
20 |   );
21 | }
22 | 
23 | export default MainPage;
24 | 
25 | // I didn't use the map method because I am accessing directly the sentence property from the quote object
26 | // I don't have an array of objects inside - only one object - random - only one quote generated
27 | 


--------------------------------------------------------------------------------
/src/pages/Recipes.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | function Recipes({recipes}) {
 4 |     return(
 5 |         <>
 6 |         
 7 |         <div className="container_recipes">
 8 |             {recipes.map((recipe) => {
 9 |                 return (
10 |                     <Link to={`/recipes/${recipe._id}`} key={recipe._id}  style={{ textDecoration: "none "}}>
11 |                     <div className="recipes_box">
12 |                     <img src={recipe.image} alt="recipe" className="img_recipes" />
13 |                     <h5 key={recipe._id} className="title_recipes">{recipe.title}</h5>  
14 |                     </div>
15 |                     
16 |                     </Link>
17 | 
18 |                 )
19 |             })}
20 |         </div>
21 |        
22 |         </>
23 |     )
24 | }
25 | 
26 | export default Recipes
27 | 
28 | 
29 | 
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.17.0",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "axios": "^1.6.7",
10 |     "react": "^18.2.0",
11 |     "react-dom": "^18.2.0",
12 |     "react-router-dom": "^6.22.0",
13 |     "react-scripts": "5.0.1",
14 |     "web-vitals": "^2.1.4"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start",
18 |     "build": "react-scripts build",
19 |     "test": "react-scripts test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": [
24 |       "react-app",
25 |       "react-app/jest"
26 |     ]
27 |   },
28 |   "browserslist": {
29 |     "production": [
30 |       ">0.2%",
31 |       "not dead",
32 |       "not op_mini all"
33 |     ],
34 |     "development": [
35 |       "last 1 chrome version",
36 |       "last 1 firefox version",
37 |       "last 1 safari version"
38 |     ]
39 |   },
40 |   "devDependencies": {
41 |     "@babel/plugin-proposal-private-property-in-object": "7.21.11"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/Nav.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | import { UserContext } from "../context/UserContext";
 4 | import { useContext } from "react";
 5 | 
 6 | function Nav() {
 7 |   const userCtx = useContext(UserContext);
 8 |   const handleSignOut = () => {
 9 |     localStorage.clear("blogUser");
10 |     userCtx.setUser(null);
11 |   };
12 | 
13 |   return (
14 |     <nav className="container-nav">
15 |       <Link to="/" style={{ textDecoration: "none", color: "black" }}>
16 |         <h1>taste the joy</h1>
17 |       </Link>
18 |       <ul className="container-ul">
19 |         <Link to="/" style={{ textDecoration: "none", color: "black" }}>
20 |           <li>Home</li>
21 |         </Link>
22 |         <Link to="/about" style={{ textDecoration: "none", color: "black" }}>
23 |           <li>About</li>
24 |         </Link>
25 |         <Link to="/recipes" style={{ textDecoration: "none", color: "black" }}>
26 |           <li>Recipes</li>
27 |         </Link>
28 |         <Link
29 |           to=""
30 |           style={{ textDecoration: "none", color: "black" }}
31 |           onClick={handleSignOut}
32 |         >
33 |           <li>Sign out</li>
34 |         </Link>
35 |       </ul>
36 |     </nav>
37 |   );
38 | }
39 | 
40 | export default Nav;
41 | 


--------------------------------------------------------------------------------
/src/pages/About.js:
--------------------------------------------------------------------------------
 1 | function About() {
 2 |   return (
 3 |     <main className="main_about">
 4 |       <div className="container-about">
 5 |         <h1 id="title_about">I LOVE FOOD!</h1>
 6 |         <p>
 7 |           Hello food enthusiasts and fellow gastronomes! I'm Patricia, the
 8 |           culinary maestro behind this delectable corner of the internet. With a
 9 |           passion for flavors that dance on the palate and a heart dedicated to
10 |           creating memorable dining experiences, I welcome you to embark on a
11 |           delicious journey with me.
12 |         </p>
13 |         <p>
14 |           My affair with food began in the bustling markets and aromatic
15 |           kitchens of my childhood, where I learned the art of crafting
16 |           soul-satisfying dishes from my culinary-inclined family. From those
17 |           early moments, my love for exploring diverse cuisines and
18 |           experimenting with unique ingredients has only intensified.
19 |         </p>
20 |         <p>
21 |           This blog is a testament to my gastronomic adventures, a canvas where
22 |           I paint with the vibrant hues of spices, herbs, and the freshest
23 |           produce. Whether you're a kitchen novice or a seasoned pro, I invite
24 |           you to join me on this flavorful expedition. Expect a medley of
25 |           recipes that celebrate the beauty of simple, wholesome ingredients,
26 |           along with anecdotes that share the stories behind each dish.
27 |         </p>
28 |         <p>
29 |           Beyond the recipes, I'm here to foster a community of food enthusiasts
30 |           who appreciate the joy of creating and savoring delicious meals. Let's
31 |           share tips, swap stories, and revel in the magic that happens when we
32 |           gather around the table.
33 |         </p>
34 |         <p>
35 |           Join me in celebrating the magic of food, one bite at a time. Here's
36 |           to culinary creativity, shared stories, and the joy that a well-cooked
37 |           meal brings to our lives!
38 |         </p>
39 |       </div>
40 |      
41 |     </main>
42 |   );
43 | }
44 | 
45 | export default About;
46 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import "./App.css";
 3 | import { Route, Routes } from "react-router-dom";
 4 | import Nav from "./components/Nav";
 5 | import Footer from "./components/Footer";
 6 | import MainPage from "./pages/MainPage";
 7 | import Recipes from "./pages/Recipes";
 8 | import About from "./pages/About";
 9 | import SignUser from "./pages/SignUser";
10 | //context
11 | import { UserContext } from "./context/UserContext";
12 | import RecipeDetails from "./pages/RecipeDetails";
13 | 
14 | function App() {
15 |   let localStorageUser = JSON.parse(localStorage.getItem("blogUser"));
16 | 
17 |   const [quote, setQuote] = useState([]);
18 |   const [recipes, setRecipes] = useState([]);
19 |   const [user, setUser] = useState(localStorageUser ? localStorageUser : null);
20 | 
21 |   // API for the quote
22 |   useEffect(() => {
23 |     const fetchData = async () => {
24 |       const res = await fetch("https://api.gameofthronesquotes.xyz/v1/random");
25 |       const data = await res.json();
26 | 
27 |       setQuote(data);
28 |     };
29 |     fetchData();
30 |   }, []);
31 | 
32 |   // API for the recipes
33 |   useEffect(() => {
34 |     const fetchData = async () => {
35 |       const res = await fetch(
36 |         "https://blog-app-backend-nrpv.onrender.com/api/recipes/"
37 |       );
38 |       const data = await res.json();
39 |       console.log(data);
40 |       setRecipes(data);
41 |     };
42 |     fetchData();
43 |   }, []);
44 | 
45 |   return (
46 |     <UserContext.Provider value={{ user, setUser }}>
47 |       <div>
48 |         <Nav />
49 |         {user ? (
50 |           <Routes>
51 |             <Route path="/" element={<MainPage quote={quote} />} />
52 |             <Route path="/recipes" element={<Recipes recipes={recipes} />} />
53 |             <Route path="/about" element={<About />} />
54 |             <Route path="/recipes/:id" element={<RecipeDetails />} />
55 |           </Routes>
56 |         ) : (
57 |           <SignUser />
58 |         )}
59 |         <Footer />
60 |       </div>
61 |     </UserContext.Provider>
62 |   );
63 | }
64 | 
65 | export default App;
66 | 
67 | // store the user object into the local storage
68 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
13 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14 |     <link
15 |       href="https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
16 |       rel="stylesheet"
17 |     />
18 | 
19 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
20 |     <!--
21 |       manifest.json provides metadata used when your web app is installed on a
22 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
23 |     -->
24 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
25 |     <!--
26 |       Notice the use of %PUBLIC_URL% in the tags above.
27 |       It will be replaced with the URL of the `public` folder during the build.
28 |       Only files inside the `public` folder can be referenced from the HTML.
29 | 
30 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
31 |       work correctly both with client-side routing and a non-root public URL.
32 |       Learn how to configure a non-root public URL by running `npm run build`.
33 |     -->
34 |     <script src="https://kit.fontawesome.com/7fa266f3fb.js" crossorigin="anonymous"></script>
35 |     <title>Taste of Joy</title>
36 |   </head>
37 |   <body>
38 |     <noscript>You need to enable JavaScript to run this app.</noscript>
39 |     <div id="root"></div>
40 |     <!--
41 |       This HTML file is a template.
42 |       If you open it directly in the browser, you will see an empty page.
43 | 
44 |       You can add webfonts, meta tags, or analytics to this file.
45 |       The build step will place the bundled scripts into the <body> tag.
46 | 
47 |       To begin the development, run `npm start` or `yarn start`.
48 |       To create a production bundle, use `npm run build` or `yarn build`.
49 |     -->
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/1f6c9c71-1f37-446e-ac68-386d03b610e6/deploy-status)](https://app.netlify.com/sites/coruscating-hamster-e9dfd0/overview)
 4 | 
 5 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 6 | 
 7 | ## Available Scripts
 8 | 
 9 | In the project directory, you can run:
10 | 
11 | ### `npm start`
12 | 
13 | Runs the app in the development mode.\
14 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
15 | 
16 | The page will reload when you make changes.\
17 | You may also see any lint errors in the console.
18 | 
19 | ### `npm test`
20 | 
21 | Launches the test runner in the interactive watch mode.\
22 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
23 | 
24 | ### `npm run build`
25 | 
26 | Builds the app for production to the `build` folder.\
27 | It correctly bundles React in production mode and optimizes the build for the best performance.
28 | 
29 | The build is minified and the filenames include the hashes.\
30 | Your app is ready to be deployed!
31 | 
32 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
33 | 
34 | ### `npm run eject`
35 | 
36 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
37 | 
38 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
39 | 
40 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
41 | 
42 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
43 | 
44 | ## Learn More
45 | 
46 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
47 | 
48 | To learn React, check out the [React documentation](https://reactjs.org/).
49 | 
50 | ### Code Splitting
51 | 
52 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
53 | 
54 | ### Analyzing the Bundle Size
55 | 
56 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
57 | 
58 | ### Making a Progressive Web App
59 | 
60 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
61 | 
62 | ### Advanced Configuration
63 | 
64 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
65 | 
66 | ### Deployment
67 | 
68 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
69 | 
70 | ### `npm run build` fails to minify
71 | 
72 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
73 | 


--------------------------------------------------------------------------------
/src/pages/RecipeDetails.js:
--------------------------------------------------------------------------------
  1 | import { useParams } from "react-router-dom";
  2 | import { useState, useEffect } from "react";
  3 | import axios from "axios";
  4 | 
  5 | import { UserContext } from "../context/UserContext";
  6 | import { useContext } from "react";
  7 | 
  8 | function RecipeDetails() {
  9 |   const params = useParams();
 10 |   const [recipe, setRecipe] = useState(null);
 11 |   const [reviews, setReviews] = useState(null);
 12 |   const [comment, setComment] = useState("");
 13 | 
 14 |   // import the user context to take the state of the user and id?
 15 |   const userCtx = useContext(UserContext);
 16 |   console.log(userCtx);
 17 |   //post a new review logic
 18 | 
 19 |   const handleReviewSubmit = async (e) => {
 20 |     e.preventDefault();
 21 | 
 22 |     try {
 23 |       const res = await axios.post("https://blog-app-backend-nrpv.onrender.com/api/reviews/", {
 24 |         user_id: userCtx.user._id,
 25 |         username: userCtx.user.username,
 26 |         review: comment,
 27 |       });
 28 | 
 29 |       console.log(res.data);
 30 |       setReviews([res.data, ...reviews]);
 31 |       setComment("");
 32 |     } catch (error) {
 33 |       console.log(error);
 34 |     }
 35 |   };
 36 | 
 37 |   // fetch the data from the backend to display the content of each recipe
 38 |   useEffect(() => {
 39 |     const fetchData = async () => {
 40 |       try {
 41 |         const res = await fetch(
 42 |           `https://blog-app-backend-nrpv.onrender.com/api/recipes/${params.id}`
 43 |         );
 44 |         const data = await res.json();
 45 |         console.log(data);
 46 |         setRecipe(data);
 47 |       } catch (error) {
 48 |         console.log(error);
 49 |       }
 50 |     };
 51 | 
 52 |     fetchData();
 53 |   }, [params.id]);
 54 | 
 55 |   // fetch the data from the backend to display the name and the review of each person
 56 |   useEffect(() => {
 57 |     const fetchData = async () => {
 58 |       try {
 59 |         const res = await fetch(
 60 |           "https://blog-app-backend-nrpv.onrender.com/api/reviews"
 61 |         );
 62 |         const data = await res.json();
 63 |         console.log(data);
 64 |         setReviews(data);
 65 |       } catch (error) {
 66 |         console.log(error);
 67 |       }
 68 |     };
 69 | 
 70 |     fetchData();
 71 |   }, []);
 72 | 
 73 |   return (
 74 |     <>
 75 |       <div className="supercontainer_recipe">
 76 |         {recipe && (
 77 |           <div className="container_recipe">
 78 |             <img
 79 |               src={recipe.image}
 80 |               alt="single recipe"
 81 |               className="image_recipe"
 82 |             />
 83 |             <h1 id="recipe_title">{recipe.title}</h1>
 84 |             <hr />
 85 |             <h3 className="recipe_subtitle">INGREDIENTS</h3>
 86 |             <ul>
 87 |               {recipe.ingredients.map((ingredient, index) => (
 88 |                 <li key={index}>{ingredient}</li>
 89 |               ))}
 90 |             </ul>
 91 |             <h3 className="recipe_subtitle">INSTRUCTIONS</h3>
 92 |             <ul>
 93 |               {recipe.instructions.map((instruction, index) => (
 94 |                 <li key={index}>{instruction}</li>
 95 |               ))}
 96 |             </ul>
 97 |           </div>
 98 |         )}
 99 |         <div className="review_container">
100 |           <h1 id="review_title">REVIEWS SECTION</h1>
101 |           <hr />
102 |           <form onSubmit={handleReviewSubmit}>
103 |             <input
104 |               id="input_review"
105 |               type="text"
106 |               value={comment}
107 |               placeholder="Give us a review for this recipe..."
108 |               onChange={(e) => setComment(e.target.value)}
109 |             />
110 |             <button id="review_btn">POST</button>
111 |           </form>
112 | 
113 |           <h2 id="other_reviews">Other reviews</h2>
114 |           {reviews &&
115 |             reviews.map((review) => {
116 |               return (
117 |                 <div className="other_reviews" key={review._id}>
118 |                   <p className="p_title">{review.username}</p>
119 |                   <p className="p_review">{review.review}</p>
120 |                 </div>
121 |               );
122 |             })}
123 |         </div>
124 |       </div>
125 |     </>
126 |   );
127 | }
128 | 
129 | export default RecipeDetails;
130 | 


--------------------------------------------------------------------------------
/src/pages/SignUser.js:
--------------------------------------------------------------------------------
  1 | import { useRef, useState, useContext } from "react";
  2 | import axios from "axios";
  3 | import { UserContext } from "../context/UserContext";
  4 | 
  5 | function SignUser() {
  6 |   const userCtx = useContext(UserContext);
  7 |   const { setUser } = userCtx;
  8 | 
  9 |   const emailInputRef = useRef(null);
 10 |   const usernameInputRef = useRef(null);
 11 |   const passwordInputRef = useRef(null);
 12 |   const [showSignUp, setShowSignUp] = useState(false);
 13 | 
 14 |   const handleSignIn = async (e) => {
 15 |     e.preventDefault();
 16 |     if (emailInputRef.current.value === "") {
 17 |       emailInputRef.current.focus();
 18 |       return;
 19 |     }
 20 |     if (passwordInputRef.current.value === "") {
 21 |       passwordInputRef.current.focus();
 22 |       return;
 23 |     }
 24 |     // POST request to the backend
 25 |     try {
 26 |       const res = await axios.post(
 27 |         "https://blog-app-backend-nrpv.onrender.com/api/users/signin",
 28 |         {
 29 |           email: emailInputRef.current.value,
 30 |           password: passwordInputRef.current.value,
 31 |         }
 32 |       );
 33 |       console.log(res.data);
 34 |       setUser(res.data);
 35 |       localStorage.setItem("blogUser", JSON.stringify(res.data));
 36 |     } catch (error) {
 37 |       console.log(error);
 38 |     }
 39 |   };
 40 | 
 41 |   const handleSignUp = async (e) => {
 42 |     e.preventDefault();
 43 | 
 44 |     if (emailInputRef.current.value === "") {
 45 |       emailInputRef.current.focus();
 46 |       return;
 47 |     }
 48 | 
 49 |     if (usernameInputRef.current.value === "") {
 50 |       usernameInputRef.current.focus();
 51 |       return;
 52 |     }
 53 |     if (passwordInputRef.current.value === "") {
 54 |       passwordInputRef.current.focus();
 55 |       return;
 56 |     }
 57 | 
 58 |     // POST request to the backend
 59 |     try {
 60 |       const res = await axios.post(
 61 |         "https://blog-app-backend-nrpv.onrender.com/api/users/signup",
 62 |         {
 63 |           email: emailInputRef.current.value,
 64 |           username: usernameInputRef.current.value,
 65 |           password: passwordInputRef.current.value,
 66 |         }
 67 |       );
 68 |       console.log(res.data);
 69 |       setUser(res.data);
 70 |       localStorage.setItem("blogUser", JSON.stringify(res.data));
 71 |     } catch (error) {
 72 |       console.log(error);
 73 |     }
 74 |   };
 75 |   return (
 76 |     <main className="main_container">
 77 |       {showSignUp ? (
 78 |         <div>
 79 |           <form className="form_container" onSubmit={handleSignIn}>
 80 |             <h3 className="title_form">Welcome!</h3>
 81 | 
 82 |             <input
 83 |               className="input_form"
 84 |               ref={emailInputRef}
 85 |               name="email"
 86 |               id="email"
 87 |               type="text"
 88 |               placeholder="Email"
 89 |             />
 90 | 
 91 |             <input
 92 |               className="input_form"
 93 |               ref={passwordInputRef}
 94 |               name="password"
 95 |               id="password"
 96 |               type="password"
 97 |               placeholder="Password"
 98 |             />
 99 |             <button type="submit" className="button_form">
100 |               Sign In
101 |             </button>
102 |             <span className="span_form">
103 |               Don't have an account?{" "}
104 |               <button
105 |                 onClick={() => setShowSignUp(!showSignUp)}
106 |                 className="span_button"
107 |               >
108 |                 Sign Up
109 |               </button>
110 |             </span>
111 |           </form>
112 |         </div>
113 |       ) : (
114 |         <div>
115 |           <form className="form_container" onSubmit={handleSignUp}>
116 |             <h3 className="title_form">Welcome!</h3>
117 |             <input
118 |               className="input_form"
119 |               ref={emailInputRef}
120 |               name="email"
121 |               id="email"
122 |               type="text"
123 |               placeholder="Email"
124 |             />
125 |             <input
126 |               className="input_form"
127 |               ref={usernameInputRef}
128 |               name="username"
129 |               id="username"
130 |               type="text"
131 |               placeholder="Username"
132 |             />
133 |             <input
134 |               className="input_form"
135 |               ref={passwordInputRef}
136 |               name="password"
137 |               id="password"
138 |               type="password"
139 |               placeholder="Password"
140 |             />
141 |             <button type="submit" className="button_form">
142 |               Sign Up
143 |             </button>
144 |             <span className="span_form">
145 |               Already have an account?{" "}
146 |               <button
147 |                 onClick={() => setShowSignUp(!showSignUp)}
148 |                 className="span_button"
149 |               >
150 |                 Sign In
151 |               </button>
152 |             </span>
153 |           </form>
154 |         </div>
155 |       )}
156 |     </main>
157 |   );
158 | }
159 | 
160 | export default SignUser;
161 | 
162 | // no control form = useRef - for this form doesn't need to react with what the user is going to type
163 | // control form = useState - when the user type React knows that something is going to change - starting to filter
164 | 
165 | 
166 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   background-color: #fefefe;
  4 | }
  5 | 
  6 | /* Nav bar styling */
  7 | .container-nav {
  8 |   display: flex;
  9 |   align-items: center;
 10 |   justify-content: space-around;
 11 |   background-color: #cfe1b9;
 12 |   font-family: "Lobster Two", sans-serif;
 13 |   font-size: 20px;
 14 | }
 15 | 
 16 | .container-ul {
 17 |   display: flex;
 18 |   list-style: none;
 19 |   gap: 55px;
 20 |   font-family: "Raleway", sans-serif;
 21 | }
 22 | 
 23 | /* Main Page syling */
 24 | 
 25 | .container_main {
 26 |   background-image: url(https://images.unsplash.com/photo-1516211697506-8360dbcfe9a4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
 27 |   background-size: cover;
 28 |   background-repeat: no-repeat;
 29 | }
 30 | 
 31 | #title_MP {
 32 |   text-align: center;
 33 |   color: #718355;
 34 |   margin-top: 0px;
 35 |   margin-bottom: 0px;
 36 |   padding: 32px;
 37 |   height: 30px;
 38 |   font-family: "Raleway", sans-serif;
 39 | }
 40 | 
 41 | #word_MP {
 42 |   margin-left: 25px;
 43 |   font-style: italic;
 44 |   font-weight: normal;
 45 | }
 46 | 
 47 | .quote_section {
 48 |   margin-top: 0px;
 49 |   display: flex;
 50 |   flex-direction: column;
 51 |   justify-content: center;
 52 |   align-items: center;
 53 |   height: 100vh;
 54 | }
 55 | 
 56 | .quote_container {
 57 |   width: 50%;
 58 |   min-height: 100px;
 59 |   background-color: #718355;
 60 | }
 61 | 
 62 | #p_MP {
 63 |   font-size: 25px;
 64 |   font-family: "Raleway";
 65 |   font-style: italic;
 66 |   text-align: center;
 67 | }
 68 | 
 69 | /* About page styling */
 70 | 
 71 | .main_about {
 72 |   background-image: url(https://images.unsplash.com/photo-1516211697506-8360dbcfe9a4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
 73 |   background-size: cover;
 74 |   background-repeat: no-repeat;
 75 |   display: flex;
 76 |   justify-content: center;
 77 |   align-items: center;
 78 |   margin-bottom: 0;
 79 | }
 80 | 
 81 | .container-about {
 82 |   background-color: #718355;
 83 |   width: 600px;
 84 |   min-height: 50%;
 85 |   padding: 20px;
 86 |   margin: 25px 0;
 87 | }
 88 | 
 89 | #title_about {
 90 |   margin-bottom: 50px;
 91 |   font-size: 35px;
 92 |   font-family: "Raleway";
 93 | }
 94 | 
 95 | .container-about p {
 96 |   font-size: 22px;
 97 | }
 98 | 
 99 | /* Recipes styling */
100 | 
101 | .container_recipes {
102 |   display: flex;
103 |   flex-wrap: wrap;
104 |   justify-content: center;
105 |   align-items: center;
106 |   gap: 20px;
107 |   height: 100%;
108 |   padding: 40px;
109 |   background-image: url(https://images.unsplash.com/photo-1516211697506-8360dbcfe9a4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
110 |   background-size: cover;
111 |   background-repeat: no-repeat;
112 | }
113 | 
114 | .recipes_box {
115 |   border-radius: 15%;
116 |   cursor: pointer;
117 |   background-color: #e3debf;
118 |   padding: 5px;
119 | }
120 | 
121 | 
122 | 
123 | .img_recipes {
124 |   width: 290px;
125 |   height: 280px;
126 |   border-radius: 15%;
127 | }
128 | 
129 | .title_recipes {
130 |   text-align: center;
131 |   font-family: "Raleway";
132 |   font-size: 16px;
133 |   color: #718355;
134 | }
135 | 
136 | /* SignUser Page */
137 | 
138 | .main_container {
139 |   display: flex;
140 |   flex-direction: column;
141 |   justify-content: center;
142 |   flex-wrap: wrap;
143 |   align-items: center;
144 |   height: 100vh;
145 |   background-image: url(https://images.unsplash.com/photo-1516211697506-8360dbcfe9a4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
146 |   background-size: cover;
147 |   background-repeat: no-repeat;
148 | }
149 | 
150 | .form_container {
151 |   display: flex;
152 |   flex-direction: column;
153 |   align-items: center;
154 |   border: 5px solid #797d62;
155 |   border-radius: 10%;
156 |   background-color: #718355;
157 |   width: 320px;
158 |   height: 340px;
159 |   padding: 20px;
160 | }
161 | 
162 | .title_form {
163 |   font-style: "Raleway", sans-serif;
164 |   font-size: 32px;
165 | }
166 | 
167 | .input_form {
168 |   width: 220px;
169 |   height: 30px;
170 |   margin: 12px;
171 |   padding: 5px;
172 | }
173 | 
174 | .button_form {
175 |   margin: 10px;
176 |   width: 230px;
177 |   height: 40px;
178 |   background-color: #718355;
179 |   border: none;
180 |   font-family: "Raleway", sans-serif;
181 |   cursor: pointer;
182 |   font-weight: bold;
183 |   font-size: 18px;
184 | }
185 | 
186 | .button_form:hover {
187 |   background-color: #41521f;
188 | }
189 | 
190 | .span_form {
191 |   margin-top: 10px;
192 |   padding: 5px;
193 |   font-style: italic;
194 | }
195 | 
196 | .span_button {
197 |   border: none;
198 |   background-color: #718355;
199 | 
200 |   cursor: pointer;
201 | }
202 | .span_button:hover {
203 |   border-bottom: 1px solid black;
204 | }
205 | 
206 | /* Single recipe styling */
207 | 
208 | .supercontainer_recipe {
209 |   display: flex;
210 |   flex-direction: column;
211 |   justify-content: center;
212 |   align-items: center;
213 |   padding: 50px;
214 |   gap: 40px;
215 |   background-image: url(https://images.unsplash.com/photo-1516211697506-8360dbcfe9a4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
216 |   background-size: cover;
217 |   background-repeat: no-repeat;
218 | }
219 | 
220 | .container_recipe {
221 |   border: 2px solid #ccd5ae;
222 |   width: 400px;
223 |   min-height: 300px;
224 |   position: relative;
225 |   background-color: #fefae0;
226 |   padding: 50px;
227 |   margin-top: 30px;
228 | }
229 | 
230 | .container_recipe ul li {
231 |   font-family: "Raleway";
232 | }
233 | 
234 | .image_recipe {
235 |   width: 140px;
236 |   height: 140px;
237 |   border-radius: 50%;
238 |   border: 2px solid #ccd5ae;
239 |   align-content: center;
240 |   position: absolute;
241 |   top: 0;
242 |   left: 50%;
243 |   transform: translateX(-50%) translateY(-50%);
244 | }
245 | 
246 | #recipe_title {
247 |   margin-top: 80px;
248 |   text-align: center;
249 |   font-family: "Raleway";
250 | }
251 | 
252 | .recipe_subtitle {
253 |   font-family: "Raleway";
254 |   margin-top: 30px;
255 | }
256 | 
257 | .review_container {
258 |   background-color: #fefae0;
259 |   width: 800px;
260 |   min-height: 300px;
261 |   border: 2px solid #ccd5ae;
262 |   padding: 20px;
263 |   
264 | }
265 | 
266 | .other_reviews{
267 |   border: 2px solid #ccd5ae;
268 |   margin: 5px;
269 |   padding: 12px;
270 | }
271 | 
272 | #review_title {
273 |   text-align: center;
274 |   font-family: "Raleway";
275 |   font-weight: normal;
276 | }
277 | 
278 | #input_review {
279 |   width: 650px;
280 |   height: 40px;
281 |   font-family: "Raleway";
282 | }
283 | 
284 | #other_reviews {
285 |   font-family: "Raleway";
286 |   font-weight: normal;
287 |   font-size: 26px;
288 | 
289 | }
290 | 
291 | .p_title {
292 |   font-family: "Raleway";
293 |   font-weight: bold;
294 | }
295 | 
296 | .p_review {
297 |   font-family: "Raleway";
298 |   font-style: italic;
299 | }
300 | 
301 | #review_btn {
302 |   margin-left: 5px;
303 |   background-color:#718355;
304 |   font-family: "Raleway";
305 |   font-weight: bold;
306 |   width: 70px;
307 |   height: 30px;
308 |   border-radius: 55%;
309 |   border: none;
310 |   cursor: pointer;
311 | }
312 | 
313 | 
314 | 
315 | /* Footer styling */
316 | 
317 | .footer_container {
318 |   display: flex;
319 |   flex-direction: column;
320 |   justify-content: space-between;
321 |   align-items: center;
322 |   height: 160px;
323 |   background-color: #cfe1b9;
324 | 
325 | }
326 | 
327 | .icons_container {
328 |   display: flex;
329 |   gap: 20px;
330 |   margin-top: 40px;
331 |  
332 | }
333 | 
334 | .footer_text {
335 |   text-align: center;
336 |   font-size: 12px;
337 | }
338 | 


--------------------------------------------------------------------------------