{"id":107166,"date":"2025-05-02T06:03:20","date_gmt":"2025-05-02T01:33:20","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-to-build-a-nutrition-tracker-app-using-the-foodie-api-10hh\/"},"modified":"2025-05-02T06:03:20","modified_gmt":"2025-05-02T01:33:20","slug":"how-to-build-a-nutrition-tracker-app-using-the-foodie-api-10hh","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-to-build-a-nutrition-tracker-app-using-the-foodie-api-10hh\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u062f\u06cc\u0627\u0628 \u062a\u063a\u0630\u06cc\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 API Foodie"},"content":{"rendered":"<div data-article-id=\"2452501\" id=\"article-body\">\n<p>\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0634\u0645\u0627<\/p>\n<p>\u0635\u0646\u0639\u062a \u0628\u0647\u062f\u0627\u0634\u062a \u0648 \u062a\u0646\u0627\u0633\u0628 \u0627\u0646\u062f\u0627\u0645 \u062f\u0631 \u0633\u0627\u0644\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0645\u0646\u0641\u062c\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u062f\u0631 \u0642\u0644\u0628 \u0627\u06cc\u0646 \u0631\u0634\u062f \u0627\u0633\u062a. \u0627\u06af\u0631 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0647\u0633\u062a\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0648\u0631\u0648\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0641\u0636\u0627 \u0647\u0633\u062a\u06cc\u062f \u060c \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u062f\u06cc\u0627\u0628 \u062a\u063a\u0630\u06cc\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a. \u0628\u0627 \u062a\u0634\u06a9\u0631 \u0627\u0632 Foodie API (https:\/\/foodapi.devco.solutions\/) \u060c \u0648\u0627\u06a9\u0634\u06cc \u0648 \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062a\u063a\u0630\u06cc\u0647 \u0627\u06cc \u0647\u0631\u06af\u0632 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0646\u0628\u0648\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u060c \u0645\u0627 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 API Foodie \u060c \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u062f\u06cc\u0627\u0628 \u062a\u063a\u0630\u06cc\u0647 \u0627\u06cc \u0633\u0627\u062f\u0647 \u0627\u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u062a\u0648\u0644\u06cc\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645. \u0634\u0645\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f:<\/p>\n<ul>\n<li>\u062a\u0646\u0638\u06cc\u0645 \u0645\u062d\u06cc\u0637 \u062e\u0648\u062f<\/li>\n<li>\u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u0628\u0627 API<\/li>\n<li>\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062a\u063a\u0630\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u06cc\u0627 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u063a\u0630\u0627\u06cc\u06cc<\/li>\n<li>\u0646\u0645\u0627\u06cc\u0634 \u0646\u062a\u0627\u06cc\u062c \u062f\u0631 \u06cc\u06a9 \u0631\u0627\u0628\u0637 React Clean<\/li>\n<\/ul>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u06cc\u0631\u062c\u0647 \u0628\u0632\u0646\u06cc\u0645.<\/p>\n<p><strong>1. \u062a\u0646\u0638\u06cc\u0645 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u062e\u0648\u062f<\/strong><\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0622\u0645\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f:<\/p>\n<ul>\n<li>node.js \u0646\u0635\u0628 \u0634\u062f\u0647 (v18+ \u062a\u0648\u0635\u06cc\u0647 \u0634\u062f\u0647)<\/li>\n<li>\u0628\u0631\u0646\u0627\u0645\u0647 React.js (\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 Vite \u06cc\u0627 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f)<\/li>\n<li>tailwindcss (\u0628\u0631\u0627\u06cc UI \u0633\u0631\u06cc\u0639)<\/li>\n<li>API Key \u0627\u0632 Foodie API (\u062b\u0628\u062a \u0646\u0627\u0645 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627)<\/li>\n<\/ul>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm create vite@latest nutrition-tracker --template react\ncd nutrition-tracker\nnpm install\nnpm install axios\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Tailwind \u0631\u0627 \u062f\u0631 tailwind.config.js \u0648 index.css \u062e\u0648\u062f \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>2. \u06a9\u0644\u06cc\u062f API Foodie \u062e\u0648\u062f \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f<\/strong><\/p>\n<p>\u067e\u0633 \u0627\u0632 \u062b\u0628\u062a \u0646\u0627\u0645 \u062f\u0631 API Foodie \u060c \u06cc\u06a9 \u06a9\u0644\u06cc\u062f API \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<br \/>\u0627\u06cc\u0646 \u0631\u0627 \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f &#8211; \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u0647 \u0622\u0646 \u0627\u062d\u062a\u06cc\u0627\u062c \u062f\u0627\u0631\u06cc\u062f.<\/p>\n<p>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 .env \u0631\u0627 \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>VITE_FOODIE_API_KEY=your_real_api_key_here\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Import.meta.env.vite_foodie_api_key \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>3. \u0633\u0631\u0648\u06cc\u0633 API \u062a\u063a\u0630\u06cc\u0647 \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f<\/strong><\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0633\u0627\u062f\u0647 Axios \u0631\u0627 \u062f\u0631 \u0627\u0637\u0631\u0627\u0641 API Foodie \u062f\u0631\u0633\u062a \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ src\/api\/foodie.ts\nimport axios from \"axios\";\n\nconst foodie = axios.create({\n  baseURL: \"https:\/\/foodapi.devco.solutions\/api\",\n  headers: {\n    \"Authorization\": `Bearer ${import.meta.env.VITE_FOODIE_API_KEY}`,\n    \"Content-Type\": \"application\/json\",\n  },\n});\n\nexport async function analyzeFood(description: string) {\n  const response = await foodie.post(\"\/nutrition\", {\n    query: description,\n  });\n  return response.data;\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u060c \u0645\u0627 \u0641\u0631\u0636 \u0645\u06cc \u06a9\u0646\u06cc\u0645 API Foodie \u0628\u0627\u0631\u0647\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648 (\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u06cc\u0627 \u0646\u0627\u0645 \u063a\u0630\u0627\u06cc\u06cc) \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f.<\/p>\n<p><strong>4. \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong><\/p>\n<p>\u0645\u0627 \u06cc\u06a9 \u0646\u0645\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0648\u0631\u0648\u062f\u06cc + \u0648\u0627\u0642\u0639\u06cc\u062a \u0631\u0627 \u0637\u0631\u0627\u062d\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ src\/components\/NutritionTracker.tsx\nimport { useState } from \"react\";\nimport { analyzeFood } from \"..\/api\/foodie\";\n\nexport default function NutritionTracker() {\n  const [query, setQuery] = useState(\"\");\n  const [nutrition, setNutrition] = useState(null);\n  const [loading, setLoading] = useState(false);\n\n  async function handleSubmit(e: React.FormEvent) {\n    e.preventDefault();\n    setLoading(true);\n    try {\n      const data = await analyzeFood(query);\n      setNutrition(data);\n    } catch (error) {\n      console.error(\"Failed to fetch nutrition data\", error);\n    } finally {\n      setLoading(false);\n    }\n  }\n\n  return (\n    <div classname=\"max-w-xl mx-auto mt-10 p-6 shadow rounded-2xl bg-white\">\n      \n      \n\n      {nutrition &amp;&amp; (\n        <div classname=\"mt-6\">\n          <h2 classname=\"text-xl font-semibold\">Nutrition Facts<\/h2>\n          <ul classname=\"list-disc list-inside mt-2\">\n            <li>Calories: {nutrition.calories} kcal<\/li>\n            <li>Protein: {nutrition.protein} g<\/li>\n            <li>Fat: {nutrition.fat} g<\/li>\n            <li>Carbs: {nutrition.carbs} g<\/li>\n            {\/* extend as needed *\/}\n          <\/ul>\n        <\/div>\n      )}\n    <\/div>\n  );\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0622\u0646 \u0631\u0627 \u062f\u0631 app.tsx \u062e\u0648\u062f \u0633\u0648\u0627\u0631 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import NutritionTracker from \".\/components\/NutritionTracker\";\n\nfunction App() {\n  return (\n    \n  );\n}\n\nexport default App;\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>5. \u0622\u0632\u0645\u0627\u06cc\u0634 \u0631\u062f\u06cc\u0627\u0628 \u062a\u063a\u0630\u06cc\u0647 \u062e\u0648\u062f<\/strong><\/p>\n<p>\u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm run dev\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0641\u0631\u0645 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0647\u0631 \u0646\u0627\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c &#8220;\u0646\u0627\u0646 \u062a\u0633\u062a \u0622\u0648\u0648\u06a9\u0627\u062f\u0648&#8221;) \u0648 \u06cc\u06a9 \u0634\u06a9\u0633\u062a \u06a9\u0627\u0645\u0644 \u062a\u063a\u0630\u06cc\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u0646\u062f\u0647 \u0627\u0632 API Foodie \u062a\u0647\u06cc\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u0628\u0627 \u0645\u0634\u06a9\u0644\u0627\u062a CORS \u0631\u0648\u0628\u0631\u0648 \u0634\u062f\u06cc\u062f \u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0631\u0648\u06a9\u0633\u06cc \u062a\u0645\u0627\u0633 \u0647\u0627\u06cc API \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u06a9\u0648\u0686\u06a9 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06cc\u0627 \u06cc\u06a9 \u067e\u0631\u0648\u06a9\u0633\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a DEV \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>6. \u06af\u0633\u062a\u0631\u0634 \u0628\u0631\u0646\u0627\u0645\u0647<\/strong><br \/>\u067e\u0633 \u0627\u0632 \u06a9\u0627\u0631 MVP \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f:<\/p>\n<p>\u062a\u0635\u0627\u0648\u06cc\u0631 \u063a\u0630\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0646\u0642\u0627\u0637 \u067e\u0627\u06cc\u0627\u0646\u06cc \u062a\u0634\u062e\u06cc\u0635 \u062a\u0635\u0648\u06cc\u0631 API Foodie \u0631\u0627 \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f<br \/>\u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u063a\u0630\u0627\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0634\u062f\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062d\u0644 \u0645\u062d\u0644\u06cc \u06cc\u0627 supabase \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f<br \/>\u0627\u0647\u062f\u0627\u0641 \u06a9\u0627\u0644\u0631\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0631\u062f\u06cc\u0627\u0628\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u06a9\u0646\u06cc\u062f<br \/>\u0648\u0639\u062f\u0647 \u0647\u0627\u06cc \u063a\u0630\u0627\u06cc\u06cc \u0641\u06cc\u0644\u062a\u0631 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc (\u06a9\u062a\u0648 \u060c \u0648\u06af\u0627\u0646 \u060c \u0628\u062f\u0648\u0646 \u06af\u0644\u0648\u062a\u0646)<br \/>\u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0627 \u0686\u0646\u062f \u06a9\u0644\u06cc\u06a9 \u0628\u0647 Vercel \u06cc\u0627 NetLify \u0645\u0633\u062a\u0642\u0631 \u06a9\u0646\u06cc\u062f<\/p>\n<p><strong>7. \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/strong><br \/>\u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0631\u062f\u06cc\u0627\u0628 \u062a\u063a\u0630\u06cc\u0647 \u0628\u0627 API Foodie \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0634\u0645\u0627 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u06af\u0633\u062a\u0631\u062f\u0647 \u0645\u0648\u0627\u062f \u063a\u0630\u0627\u06cc\u06cc \u06cc\u0627 \u0645\u062f\u0644 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062e\u0648\u062f \u060c \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u062a\u063a\u0630\u06cc\u0647 \u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0627 \u0686\u0646\u062f \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0648 \u06cc\u06a9 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc React Clean \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0631\u0632\u0634 \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0628\u0647 \u0639\u0644\u0627\u0642\u0647 \u0645\u0646\u062f\u0627\u0646 \u0628\u0647 \u062a\u0646\u0627\u0633\u0628 \u0627\u0646\u062f\u0627\u0645 \u060c \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0648 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0628\u0631 \u0633\u0644\u0627\u0645\u062a\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f.<\/p>\n<p>\ud83d\udd35 \u0646\u06a9\u062a\u0647 PRO: \u0627\u06af\u0631 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u062a\u062c\u0627\u0631\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u060c \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u062a\u063a\u0630\u06cc\u0647 \u0627\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0647\u0634 \u0647\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 API \u0648 \u0628\u0647\u0628\u0648\u062f \u0633\u0631\u0639\u062a \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0634\u0645\u0627 \u0635\u0646\u0639\u062a \u0628\u0647\u062f\u0627\u0634\u062a \u0648 \u062a\u0646\u0627\u0633\u0628 \u0627\u0646\u062f\u0627\u0645 \u062f\u0631 \u0633\u0627\u0644\u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0645\u0646\u0641\u062c\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u062f\u0631 \u0642\u0644\u0628 \u0627\u06cc\u0646 \u0631\u0634\u062f \u0627\u0633\u062a. \u0627\u06af\u0631 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0647\u0633\u062a\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0648\u0631\u0648\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0641\u0636\u0627 \u0647\u0633\u062a\u06cc\u062f \u060c \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u062f\u06cc\u0627\u0628 \u062a\u063a\u0630\u06cc\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a. \u0628\u0627 \u062a\u0634\u06a9\u0631 \u0627\u0632 Foodie API (https:\/\/foodapi.devco.solutions\/) &hellip;<\/p>\n","protected":false},"author":2,"featured_media":107167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-107166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/107166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=107166"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/107166\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/107167"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=107166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=107166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=107166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}