https://quick-code-launch.lovable.app/assets/APIIntegrationPage-CE8sv-y_.js

1import{j as e}from"./index-DrBPhjy5.js";import{L as a,G as i,D as r,j as n,F as l,Z as o,k as c,d}from"./Layout-LwDNXt6D.js";import{A as m,a as p}from"./alert-DIYlhfDI.js";import{C as h}from"./CodeBlock-3JvFd8EA.js";import{B as s}from"./badge-CMh-GqOk.js";import{I as x}from"./info-CSYFFSha.js";import{A as u}from"./arrow-right-lzRlWI_Y.js";import{S as g}from"./settings-BbXcCc5A.js";import{C as b}from"./cloud-D_lgtGMr.js";const f=[{icon:e.jsx(l,{className:"text-blue-600 h-6 w-6"}),title:"1. Understanding API Basics",bg:"bg-blue-50",content:e.jsxs(e.Fragment,{children:[e.jsxs("ul",{className:"list-disc ml-6 mb-4 text-blue-800",children:[e.jsx("li",{children:"What APIs are and how they work"}),e.jsx("li",{children:"API Types: REST, GraphQL, Streaming, Webhook, etc."}),e.jsx("li",{children:"Authentication (API keys, OAuth, mTLS, etc.)"}),e.jsx("li",{children:"HTTP Methods (GET, POST, PUT, DELETE, PATCH)"}),e.jsx("li",{children:"Status Codes, Response Formats, and Robust Error Handling"})]}),e.jsxs("div",{className:"text-xs text-blue-900",children:[e.jsx(s,{className:"bg-blue-200 text-blue-900",children:"Tip"}),"Read API docs carefully before starting integration."]})]})},{icon:e.jsx(g,{className:"text-emerald-600 h-6 w-6"}),title:"2. Planning API Integration",bg:"bg-emerald-50",content:e.jsxs("ul",{className:"list-disc ml-6 mb-2 text-emerald-900",children:[e.jsx("li",{children:"Choose APIs that best fit your app’s requirements"}),e.jsx("li",{children:"Study docs: endpoints, auth, limits, and examples"}),e.jsx("li",{children:"Check rate limits/pricing and set expectations"}),e.jsx("li",{children:"Plan fallbacks and mock testing flows"}),e.jsx("li",{children:"Cache data if needed for performance & savings"})]})},{icon:e.jsx(o,{className:"text-pink-600 h-6 w-6"}),title:"3. API Implementation Patterns",bg:"bg-pink-50",content:e.jsxs("ul",{className:"list-disc ml-6 mb-2 text-pink-900",children:[e.jsxs("li",{children:["Use env variables for keys/secrets ",e.jsx(s,{className:"bg-pink-200 text-pink-900",children:".env"})]}),e.jsx("li",{children:"Graceful error handling with alerts/toasts"}),e.jsx("li",{children:"Add visible loading states/spinners"}),e.jsx("li",{children:"Cache sensible responses with react-query"}),e.jsx("li",{children:"Handle rate limits politely (backoff)"})]})},{icon:e.jsx(c,{className:"text-purple-700 h-6 w-6"}),title:"4. Security & Best Practices",bg:"bg-purple-50",content:e.jsxs("ul",{className:"list-disc ml-6 text-purple-900",children:[e.jsx("li",{children:"Keep all API keys/secrets out of git"}),e.jsx("li",{children:"Validate all untrusted inputs"}),e.jsx("li",{children:"Encrypt sensitive client data if stored"}),e.jsx("li",{children:"Monitor 3rd-party dependency security (npm audit)"}),e.jsx("li",{children:"Keep dependencies up to date"})]})},{icon:e.jsx(d,{className:"text-black h-6 w-6"}),title:"5. Example API Integration (with react-query)",bg:"bg-yellow-50",content:e.jsxs("div",{children:[e.jsx("p",{className:"mb-2 text-yellow-900",children:"A robust example for fetching data with error/loading state and an env variable API key:"}),e.jsx(h,{title:"API Integration Example",language:"typescript",code:`import { useQuery } from '@tanstack/react-query';
2
3const fetchData = async () => {
4  const response = await fetch('https://api.example.com/data', {
5    headers: {
6      'Authorization': \`Bearer \${import.meta.env.VITE_API_KEY}\`,
7      'Content-Type': 'application/json',
8    },
9  });
10  if (!response.ok) throw new Error('Network response was not ok');
11  return response.json();
12};
13
14const DataComponent = () => {
15  const { data, isLoading, error } = useQuery({
16    queryKey: ['data'],
17    queryFn: fetchData,
18  });
19
20  if (isLoading) return <div>Loading...</div>;
21  if (error) return <div>Error: {error.message}</div>;
22  return <div>{/* Render your data */}</div>;
23};`})]})},{icon:e.jsx(b,{className:"text-sky-600 h-6 w-6"}),title:"6. Testing, Docs, and Monitoring",bg:"bg-sky-50",content:e.jsxs("ul",{className:"list-disc ml-6 text-sky-900",children:[e.jsx("li",{children:"Test using mock APIs before deploying"}),e.jsx("li",{children:"Implement realistic error scenarios"}),e.jsx("li",{children:"Monitor API response times and usage"}),e.jsx("li",{children:"Set up security/logging alerts for failures"}),e.jsx("li",{children:"Read and regularly update API docs"})]})}],j=[{name:"RapidAPI",description:"World's largest API hub with thousands of public APIs and a unified dashboard for testing and monitoring.",url:"https://rapidapi.com",category:"API Marketplace"},{name:"Public APIs",description:"A collective list of free APIs for use in software and web development.",url:"https://github.com/public-apis/public-apis",category:"Collection"},{name:"JSONPlaceholder",description:"Free fake API for testing and prototyping.",url:"https://jsonplaceholder.typicode.com",category:"Testing"},{name:"OpenWeatherMap",description:"Simple and fast weather APIs with free tier available.",url:"https://openweathermap.org/api",category:"Weather"},{name:"REST Countries",description:"Get information about countries via a RESTful API.",url:"https://restcountries.com",category:"Data"},{name:"CoinGecko",description:"Free crypto API providing cryptocurrency data.",url:"https://www.coingecko.com/en/api",category:"Cryptocurrency"},{name:"NASA API",description:"Access NASA data, including astronomy pictures and Mars weather.",url:"https://api.nasa.gov",category:"Science"},{name:"TheMealDB",description:"An open database of recipes from around the world.",url:"https://www.themealdb.com/api.php",category:"Food"}

23,{name:"NewsAPI",description:"Simple HTTP REST API for searching and retrieving news articles.",url:"https://newsapi.org",category:"News"},{name:"PokeAPI",description:"All the Pokémon data you'll ever need in one place.",url:"https://pokeapi.co",category:"Entertainment"}],C=()=>e.jsx(a,{title:"API Integration Guide for AI Apps",description:"Patterns for integrating third-party APIs into AI-built applications safely.",canonicalUrl:"https://quick-code-launch.lovable.app/api-integration",children:e.jsxs("div",{className:"container mx-auto px-4 py-12",children:[e.jsxs("div",{className:"mb-10",children:[e.jsxs("div",{className:"flex items-center mb-2",children:[e.jsx(i,{className:"h-10 w-10 text-primary mr-4"}),e.jsx("h1",{className:"text-4xl font-extrabold text-primary drop-shadow-sm",children:"API Integration Guide"})]}),e.jsx("div",{className:"text-xl text-gray-600 mb-6",children:"Master the art of integrating APIs into your Vibe application using modern tools, best practices, and real-world examples."})]}),e.jsxs(m,{className:"mb-8",children:[e.jsx(x,{className:"h-4 w-4"}),e.jsx(p,{children:"This comprehensive guide covers everything from API basics to robust implementation and security best practices — with plenty of free resources to try!"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",children:f.map(t=>e.jsxs("section",{className:`${t.bg} rounded-lg p-6 md:p-8 mb-2`,children:[e.jsxs("div",{className:"flex items-center mb-4",children:[t.icon,e.jsx("h2",{className:"ml-3 text-2xl font-bold",children:t.title})]}),e.jsx("div",{children:t.content})]},t.title))}),e.jsx("section",{className:"max-w-3xl mx-auto my-16",children:e.jsxs("div",{className:"bg-white rounded-xl shadow p-6",children:[e.jsx("h2",{className:"text-2xl font-bold mb-4 text-center",children:"Recommended Video: AI-Powered API Integration Demo"}),e.jsx("div",{className:"aspect-w-16 aspect-h-9 mb-5 rounded-lg overflow-hidden shadow",children:e.jsx("iframe",{src:"https://www.youtube.com/embed/lGFC6gIeDb8?si=e6uk31V9aAdVk0l8",title:"Vibe Coding YouTube API Integration Demo",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",className:"w-full h-full",allowFullScreen:!0})}),e.jsxs("div",{className:"bg-slate-50 p-4 rounded mb-2",children:[e.jsx("h3",{className:"font-semibold mb-2 text-lg",children:"API Integration Demo: AI-Powered API & Web App Builder with ChatGPT | Fullstack VibeCoding Tutorial"}),e.jsx("p",{className:"text-gray-700 text-sm mb-2",children:"Watch how to use ChatGPT (GPT-6.1) and AI tools to rapidly build, test, and integrate 3rd-party APIs with modern React apps. This demo covers end-to-end workflows—from prompt engineering to API authentication, error handling, and production deployment. Featuring practical tips for scaffolding both frontend and backend API code using conversational AI, automating API requests, and integrating services like OpenAI, Supabase, and more!"}),e.jsx("a",{href:"https://youtu.be/lGFC6gIeDb8?si=e6uk31V9aAdVk0l8",className:"text-primary underline font-medium",target:"_blank",rel:"noopener noreferrer",children:"Watch on YouTube"})]})]})}),e.jsxs("section",{className:"mt-12 mb-12",children:[e.jsxs("div",{className:"flex items-center mb-4",children:[e.jsx(r,{className:"text-cyan-600 h-6 w-6"}),e.jsx("h2",{className:"ml-3 text-2xl font-bold",children:"Top 10 Free API Resources"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",children:j.map(t=>e.jsxs("div",{className:"bg-white border rounded-lg p-5 shadow hover:shadow-md flex flex-col justify-between",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(n,{size:16,className:"text-gray-400"}),e.jsx("span",{className:"text-sm font-medium text-gray-700",children:t.category})]}),e.jsx("h3",{className:"text-lg font-semibold mb-2",children:t.name}),e.jsx("p",{className:"text-gray-600",children:t.description})]}),e.jsxs("a",{className:"mt-4 text-primary font-semibold inline-flex items-center gap-1 hover:underline",href:t.url,rel:"noopener noreferrer",target:"_blank",children:["Visit ",e.jsx(u,{size:14})]})]},t.name))})]})]})});export{C as default};