Hey there!👋🏻, culinary wizards and React aficionados! Are you tired of staring into your empty fridge wondering what to cook? Fear not, because we're about to embark on a delicious journey to build our very own Recipe Finder app using the magical powers of React.
Get ready to spice up your coding skills and your kitchen adventures!🍲
Ingredients for Success:
Before we start cooking up some code, let's make sure we have all the necessary ingredients:
- A dash of HTML, CSS, and JavaScript knowledge 🤓
- A pinch of React expertise (don't worry, we'll guide you through!😎)
- A dollop of creativity and a sprinkle of humor (optional, but highly recommended🤪)
Setting Up Our Kitchen:
First things first, let's set up our development environment. Fire up your terminal and run the following commands to create a new React app!🔥:
npx create-react-app recipe-finder
cd recipe-finder
npm start
Now that our kitchen is preheating, let's add some flavor with Tailwind CSS. Run this command to install Tailwind CSS:
npm install tailwindcss@latest postcss-cli autoprefixer
Gathering Ingredients:
Next up, we need to gather our ingredients. We'll be using the Spoonacular API to fetch delicious recipes. Head over to their website, sign up for a free account, and grab your API key. Now, let's add some Axios to our project:
npm install axios
Cooking Up the Recipe Finder:
Now comes the fun part – cooking up our Recipe Finder app! Open up src/App.js and let's get cooking:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
const [query, setQuery] = useState('');
const [recipes, setRecipes] = useState([]);
useEffect(() => {
const fetchRecipes = async () => {
try {
const response = await axios.get(
`https://api.spoonacular.com/recipes/complexSearch?apiKey=YOUR_API_KEY&query=${query}&number=10`
);
setRecipes(response.data.results);
} catch (error) {
console.error('Error fetching recipes:', error);
}
};
if (query) {
fetchRecipes();
}
}, [query]);
const handleChange = (event) => {
setQuery(event.target.value);
};
return (
<div className="container mx-auto mt-8">
<h1 className="text-3xl font-bold mb-4 text-center">Recipe Finder</h1>
<div className="flex justify-center mb-8">
<input
type="text"
placeholder="Enter ingredients..."
className="border rounded-l py-2 px-4 focus:outline-none"
value={query}
onChange={handleChange}
/>
<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-r focus:outline-none">
Search
</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{recipes.map((recipe) => (
<div key={recipe.id} className="border rounded p-4 shadow-md">
<img
src={recipe.image}
alt={recipe.title}
className="w-full h-48 object-cover mb-4"
/>
<h2 className="text-xl font-bold mb-2">{recipe.title}</h2>
<p className="text-gray-700">{recipe.summary}</p>
</div>
))}
</div>
</div>
);
};
export default App;
Adding Some Spice with Tailwind CSS 🫕:
Our Recipe Finder app is looking a bit bland, so let's add some spice with Tailwind CSS! Open up src/index.css and replace its content with the following:
@tailwind base;
@tailwind components;
@tailwind utilities;
Conclusion:
Voilà! We've whipped up a tasty Recipe Finder app using React and spiced it up with Tailwind CSS. Now you can search for mouthwatering recipes to satisfy your cravings and impress your friends with your coding skills.
Keep on cooking, coding, and having fun – bon appétit! 🍽️🚀
Top comments (0)