├── postcss.config.js
├── tailwind.config.js
├── src
├── components
│ ├── NotFound.jsx
│ ├── FryingPan.jsx
│ ├── Favourites.jsx
│ ├── Home.jsx
│ ├── Footer.jsx
│ ├── Recipe.jsx
│ ├── Navbar.jsx
│ ├── RecipeItem.jsx
│ └── FryingPanStyles.css
├── index.js
├── index.css
├── hooks
│ └── useFetch.js
└── App.jsx
├── public
└── index.html
├── .gitignore
├── package.json
└── note.txt
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | "./src/**/*.{js,jsx,ts,tsx}",
5 | ],
6 | theme: {
7 | extend: {},
8 | },
9 | plugins: [],
10 | }
--------------------------------------------------------------------------------
/src/components/NotFound.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const NotFound = () => {
4 | return (
5 |
6 |
404 Not Found
7 |
8 | );
9 | };
10 |
11 | export default NotFound;
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Food Verse Project
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/.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 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import { BrowserRouter } from 'react-router-dom';
4 | import App from './App';
5 | import './index.css';
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 | root.render(
9 |
10 |
11 |
13 |
14 | );
15 |
--------------------------------------------------------------------------------
/src/components/FryingPan.jsx:
--------------------------------------------------------------------------------
1 | import "./fryingPanStyles.css";
2 |
3 | const FryingPan = () => {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
20 |
6 | {savedItems.length === 0 && (
7 |
8 | Favourite list is empty!
9 |
10 | )}
11 |
12 |
13 | {savedItems.map((recipe) => (
14 |
17 |
7 | {!loading && !error && recipes.length === 0 ? (
8 |
9 |
10 | Nothing to show, please search something!
11 |
12 |
13 |
14 | ) : null}
15 |
16 | {loading &&
{error ? error : "Loading..."}
}
17 |
18 | {recipes?.length > 0 &&
19 | recipes.map((recipe) =>
)}
20 |
6 |
7 |
8 |
9 | Foodverse
10 |
11 |
12 | Foodverse by Nature
13 |
20 |
21 |
22 |
24 |
25 |
26 | );
27 | };
28 |
29 | export default Footer;
--------------------------------------------------------------------------------
/src/components/Recipe.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 |
3 | const Recipe = ({ recipe }) => {
4 | return (
5 |
6 |
11 |
12 |
13 | {recipe.publisher}
14 |
15 |
16 | {recipe.title}{" "}
17 |
18 |
25 |
18 |
19 | Foodverse
20 |
21 |
32 |
33 |
34 |
40 | Home
41 |
42 |
43 |
44 |
49 | Favourites{" "}
50 |
51 | ({savedItems.length})
52 |
53 |
54 |
55 |
56 |
79 |
87 |
106 |
107 |
108 |
109 | );
110 | };
111 |
112 | export default App;
--------------------------------------------------------------------------------
/src/components/RecipeItem.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { Link, useParams } from "react-router-dom";
3 | import { useFetch } from "../hooks/useFetch";
4 |
5 | const RecipeItem = ({ favouriteHandler, savedItems }) => {
6 | const [itemSavedStatus, setItemSavedStatus] = useState(null);
7 | const { id } = useParams();
8 |
9 | const { data: recipe, loading, error } = useFetch(id);
10 |
11 | const durationCalc = (duration) => {
12 | if (!duration) return;
13 |
14 | if (!String(duration).includes(".")) {
15 | return duration + "h";
16 | }
17 |
18 | if (String(duration).includes(".")) {
19 | const splittedDuration = String(duration).split(".");
20 | const hour = splittedDuration[0] + "h";
21 | const splitterMinutes = "." + splittedDuration[1];
22 | const minutes = +splitterMinutes * 60 + "min";
23 |
24 | return hour + minutes;
25 | }
26 | };
27 |
28 | useEffect(() => {
29 | if (!recipe) return;
30 |
31 | setItemSavedStatus(savedItems.some((item) => item.id === recipe.id));
32 | }, [recipe]);
33 |
34 | return (
35 |
36 |
37 |
38 |
43 |
44 |
45 |
46 | Ingredients:
47 |
48 |
49 | {recipe?.ingredients?.map((ing, i) => (
50 |
51 | ✓ {ing.quantity}
52 | {ing.unit} {ing.description}
53 |
54 | ))}
55 |
56 |
57 |
58 |
59 |
60 | {recipe?.publisher}
61 |
62 |
{recipe?.title}
63 |
64 |
Servings: {recipe?.servings} people
65 |
66 | Cooking time:{" "}
67 | {recipe?.cooking_time < 60
68 | ? String(recipe?.cooking_time) + "min"
69 | : durationCalc(recipe?.cooking_time / 60)}
70 |
71 |
72 |
73 |
favouriteHandler(recipe?.id)}
75 | className={`bg-gradient-to-br p-3 px-8 rounded-lg text-sm uppercase font-medium tracking-wider mt-2 inline-block shadow-md hover:shadow-lg duration-300 ${
76 | itemSavedStatus
77 | ? "from-orange-400 to-orange-600 text-orange-50 shadow-orange-200 hover:shadow-orange-300"
78 | : "from-sky-400 to-sky-600 text-sky-50 shadow-sky-200 hover:shadow-sky-300"
79 | }`}
80 | >
81 | {itemSavedStatus
82 | ? "- Remove from favourites"
83 | : "+ Save as favourite"}
84 |
85 |
91 | Get directions
92 |
93 |
97 | Back to home
98 |
99 |
100 |
101 |
Home
43 |
44 |
45 | Favourites {}
46 |
47 |
48 |
49 | 10. navbar class div jeita okhane flex boshate hobe justify-between , items-center dite hobe (flex justify-between items-center container mx-auto py-10 flex-col lg:flex-row gap-5)
50 |
51 | 11. h2 er logo ke ekon style korte hobe h2 er bitor ja ja dite hobe
52 | (text-2xl font-bold lowercase italic) and span er bitor dite hobe text-rose-500
53 |
54 |
55 | 12. abar app.js e jete hobe and app class e abr kichu css dite hobe
56 | (bg-rose-50 text-gray-600 text-lg)
57 |
58 | 13. tarpor search er inpute field ke design korte hobe
59 | (bg-white/75 p-3 px-8 lg:w-96 rounded-full outline-none shadow-lg shadow-rose-100 focus:shadow-rose-200 duration-300)
60 |
61 | 14. ekon ul menu ke design korte hobe
62 | (flex gap-5)
63 | - navlink ke deign korte hobe
64 | (text-gray-400 hover:text-gray-600 duration-300)
65 | navlink er bitor je span tag ache oita ke o design korte hobe
66 | (text-bold text-sky-400)
67 |
68 | - active class dite navlink er bitore - navActive
69 | - return er upore navActive name ekta arrow function nite hobe and parameter hisebe ekta object nibe object er name hocche isActive click korle isActive ta trigger hobe
70 | - ei function ta return korbe r ekta object
71 | color: isActive ? "#f43f5e": null,
72 | - ekhane jokon e click kora tokon isActive ti trigger hobe and color ta show korbe otherwise color ta null dekabe
73 |
74 |
75 | 15. ekon input er jonno state nite hobe cz input e kono kichu like jeno sei data ta pawa jai tai nite hobe
76 | const [searchQuery, setSearchQuery] = useState('');
77 |
78 | - tarpor input er bitor value dite hobe
79 | value = {searchQuery}
80 | - abr onChange() name ekta function o dite hobe jate kono kichu likar shate value ta change hoi setSearchQuery er maddome
81 | onChange(e) => setSearchQuery(e.target.value);
82 |
83 | - form er modde searchHandler name on submit add korte hobe jate inter dile form ta trigger hoi
84 |
85 | const searchHandler = (e) => {
86 | e.preventDefault();
87 |
88 | console.log(searchQuery)
89 | }
90 |
91 | - input e ekta refrence nite hobe jate submit korle lika ta chole jai
92 | const inputFeildRef = useRef(null);
93 | ref={inputFeildRef}
94 |
95 | - setSearchQuery("");
96 | inputFeildRef.current.blur();
97 |
98 | r ei doi ta searchHandler er bitor add kore dite hobe
99 |
100 | 16. searchQuery jei value ta ache ekon sei ta navabr er bitor ache so amader ke ei searchQuery value ta ke home er bitor nite hobe
101 | - navabr e searchQuery jei state ta ache sei ta ke tule niye app.jsx e patate jate kore okhane theke navbar o home doi tai use kora jai mane stae ta ke top e niye jete hobe . abr eki bhave search handler ta ke o niye jete hobe . ekon niya jawar age amader ke ekta way follow korte hobe
102 | - first jeigula niye jaben sei gula ke props akare navabr paramater hisebe diye rakte hobe
103 |
104 |
105 | 17. getData name e ekta async function nite hobe jar parameter hisebe searchQuery ta nibe jar bitore data gula ke fetch korte hobe
106 |
107 | const getData = async (searchQuery) => {
108 | const res = await fetch(`https://forkify-api.herokuapp.com/api/search?q=${searchQuery}`);
109 | const data = await res.json();
110 | console.log(data.recipes)
111 | }
112 |
113 | 18. fecth korar por jei data paichi tar jonno abar r ekta state nite hobe
114 | const [recipes, setRecipes] = useState([]);
115 |
116 | 19. jodi response property correct na thake tahole ekta error throw korte hobe
117 | if(!res.ok) throw new Error ('No receipe Found!');
118 |
119 | 20. ato kon fetch kore jei data peyechi aita ke try{} er bitor rakte hobe
120 | const res = await fetch(`https://forkify-api.herokuapp.com/api/search?q=${searchQuery}`);
121 | if(!res.ok) throw new Error ('No reciepe Found');
122 | const data = await res.json();
123 | setRecipes(data.recipes)
124 |
125 |
126 | 21. try{} er niche obossoi catch(err){} use korte hobe . so erjonno abr 2 ta state extra add korte hobe
127 | const [loading, setLoading] = useState(false);
128 | const [error, setError] = useState('');
129 |
130 | 22. ekon try er bitor setLoading(true) kore dite hobe . abar data set kore pore setLoading(flase) false kore dite hobe
131 |
132 | 23. ekon jodi error khai tai tahole catch block setError er message ta set kore dite hobe
133 |
134 | 24.
135 | const getData = async (searchQuery) => {
136 | try{
137 | setLoading(true);
138 | const res = await fetch(`https://forkify-api.herokuapp.com/api/search?q=${searchQuery}`);
139 | if(!res.ok) throw new Error ('No reciepe Found');
140 | const data = await res.json();
141 | setRecipes(data.recipes);
142 | setLoading(false);
143 | } catch (err) {
144 | setError(err.message)
145 | }
146 | }
147 |
148 | ei conding ta ke ekta hook baniye tarpor reke dite hobe
--------------------------------------------------------------------------------