Norbert’s Wealth Dome

🍽️ Build a Tasty Recipe App with React, Tailwind CSS & Vite (2025)

Listen Later

In this tutorial, we’ll build a full-featured Recipe App using React, Tailwind CSS, and Vite. This project is perfect for React beginners who want to learn how to manage state, use components, handle modals, and filter dynamic data.

🚀 What You’ll Build

* React app powered by Vite

* Styled with Tailwind CSS

* Data fetched from a local recipe "database"

* Features:

* Search bar

* Filter by categories

* View recipe details in a modal

* Responsive layout

🧰 Tech Stack

* React 19

* Tailwind CSS 4.1+

* Vite

* React Icons (optional)

🛠️ Step 1: Set Up with Vite

npm create vite@latest tasty-recipes

cd tasty-recipes
npm install
npm run dev

Choose React with JavaScript (no TypeScript).

🎨 Step 2: Install Tailwind CSS

Follow the Tailwind + Vite installation guide:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Update your tailwind.config.js:

content: ["./index.html", "./src/**/*.{js,jsx}"],

Update src/index.css:

@tailwind base;

@tailwind components;
@tailwind utilities;

🧼 Step 3: Clean Up Vite Template

Delete unnecessary files:

* src/assets folder

* App.css

* Boilerplate JSX in App.jsx

🧩 Step 4: Create Components

Header.jsx

const Header = () => (

Tasty Recipes
    {["Home", "Recipes", "About", "Contact"].map((item, i) => (
  • {item}
    • ))}
    );

    🧾 Step 5: Add a Local Recipe Database

    Create src/db.js:

    const recipes = [

    {
    title: "Spaghetti Carbonara",
    category: "Pasta",
    image: "https://www.themealdb.com/images/media/meals/llcbn01574260722.jpg",
    ingredients: ["Spaghetti", "Eggs", "Parmesan", "Pancetta", "Pepper"],
    description: "A creamy, savory classic Roman pasta dish.",
    instructions: "Boil pasta, cook pancetta, mix eggs & cheese, combine everything."
    },
    // Add more recipes...
    ];
    export default recipes;

    🧠 Step 6: Main App State Logic

    In App.jsx:

    import { useState, useEffect } from 'react';

    import recipes from './db';
    import Header from './Header';
    function App() {
    const [filteredRecipes, setFilteredRecipes] = useState([]);
    const [selectedRecipe, setSelectedRecipe] = useState(null);
    useEffect(() => {
    setFilteredRecipes(recipes);
    }, []);
    const handleRecipeClick = (recipe) => setSelectedRecipe(recipe);
    const closeModal = () => setSelectedRecipe(null);
    return (
    <>

    {filteredRecipes.length > 0 ? (
    filteredRecipes.map((recipe, i) => (
    handleRecipeClick(recipe)} />
    ))
    ) : (

    No recipes found.

    )}
    {selectedRecipe && }
    );
    }

    🍽️ Step 7: RecipeCard Component

    const RecipeCard = ({ recipe, onClick }) => (

    {recipe.title}

    {recipe.description}

    );

    🔍 Step 8: RecipeModal Component

    const RecipeModal = ({ recipe, onClose }) => (

    e.stopPropagation()} className="bg-white rounded-lg shadow-lg p-6 max-w-xl w-full relative">
    ×
    {recipe.title}

    {recipe.description}

    Ingredients:
      {recipe.ingredients.map((item, i) => (
    • {item}
      • ))}
      );

      📁 Folder Structure

      src/

      ├── App.jsx
      ├── Header.jsx
      ├── RecipeCard.jsx
      ├── RecipeModal.jsx
      ├── db.js
      ├── index.css
      ├── main.jsx

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

      👉 Full Source Code: https://github.com/NorbertBM/learn-web-development-for-beginners-.git -------------------------------------------------------------------------------------------------

      #React #TailwindCSS #Vite #RecipeApp #FrontendProject #React2025



      This is a public episode. If you'd like to discuss this with other subscribers or get access to bonus episodes, visit norbertbm.substack.com/subscribe
      ...more
      View all episodesView all episodes
      Download on the App Store
      Norbert’s Wealth DomeBy Norbert B.M.