Next.js: Build a Simple Interactive Recipe Search App

Written by

javascriptdebugged

in

In today’s digital age, we’re constantly bombarded with information, and finding what we need can feel like searching for a needle in a haystack. This is especially true when it comes to cooking. With countless recipes available online, sifting through them to find that perfect dish can be a time-consuming and frustrating experience. That’s where a well-designed recipe search app comes in handy. This tutorial will guide you through building a simple, yet functional, interactive recipe search app using Next.js, a powerful React framework.

Why Build a Recipe Search App?

Beyond the practical benefits of quickly finding recipes, building a recipe search app offers several advantages for developers:

  • Learning Next.js: It’s an excellent project for learning the fundamentals of Next.js, including routing, data fetching, and component creation.
  • Practical Application: You’ll create something useful that you can actually use in your daily life.
  • API Integration: You’ll learn how to fetch data from an external API, a crucial skill for web development.
  • UI/UX Design: You’ll get hands-on experience designing a user-friendly interface.

This tutorial will cover everything you need to know to build a basic recipe search app, from setting up your Next.js project to displaying recipe results.

Prerequisites

Before we dive in, make sure you have the following:

  • Node.js and npm: Installed on your computer.
  • A code editor: Such as Visual Studio Code or Sublime Text.
  • Basic understanding of HTML, CSS, and JavaScript: This tutorial assumes you have some familiarity with these web technologies.

Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app recipe-search-app

This command will create a new directory called recipe-search-app with all the necessary files for a Next.js project. Navigate into the project directory:

cd recipe-search-app

Now, start the development server:

npm run dev

Open your browser and go to http://localhost:3000. You should see the default Next.js welcome page.

Choosing a Recipe API

To get recipe data, we’ll use a free recipe API. There are several options available. For this tutorial, we will use the Spoonacular API, as it offers a free tier with a generous amount of requests. Sign up for a free account at Spoonacular and get your API key. You will need this key later.

Alternatively, you could use a different API such as Edamam, or Recipe Puppy. The code will need minor adjustments to accommodate the different API’s response formats.

Creating the Search Input Component

Let’s create a reusable component for the search input. Create a new file called components/SearchInput.js and add the following code:

// components/SearchInput.js
import { useState } from 'react';

function SearchInput({ onSearch }) {
  const [searchTerm, setSearchTerm] = useState('');

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    onSearch(searchTerm);
  };

  return (
    <form onSubmit={handleSubmit} className="mb-4">
      <input
        type="text"
        value={searchTerm}
        onChange={handleChange}
        placeholder="Search for a recipe..."
        className="border rounded py-2 px-3 mr-2"
      />
      <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Search
      </button>
    </form>
  );
}

export default SearchInput;

This component:

  • Uses the useState hook to manage the search term.
  • Handles input changes with handleChange, updating the search term state.
  • Submits the search with handleSubmit, preventing the default form behavior and calling the onSearch function (which we’ll define later).
  • Renders a simple form with an input field and a submit button.

Fetching Recipe Data

Now, let’s create a function to fetch recipe data from the API. We’ll put this in a separate file for better organization. Create a new file called utils/api.js and add the following code:

// utils/api.js
const API_KEY = 'YOUR_SPOONACULAR_API_KEY'; // Replace with your actual API key
const API_URL = 'https://api.spoonacular.com/recipes/complexSearch';

export async function fetchRecipes(query) {
  const url = `${API_URL}?apiKey=${API_KEY}&query=${query}&number=10`; // Limit to 10 results
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data.results;
  } catch (error) {
    console.error('Error fetching recipes:', error);
    return []; // Return an empty array on error
  }
}

Important notes about the code:

  • Replace YOUR_SPOONACULAR_API_KEY with your actual API key from Spoonacular.
  • The fetchRecipes function takes a query parameter (the search term).
  • It constructs the API URL, including the API key and the search query.
  • It uses the fetch API to make a GET request to the Spoonacular API.
  • It handles potential errors, such as network issues or invalid API responses.
  • It returns an array of recipe objects.

Displaying Recipe Results

Now, let’s modify our pages/index.js file to use the SearchInput component and display the recipe results.

// pages/index.js
import { useState } from 'react';
import SearchInput from '../components/SearchInput';
import { fetchRecipes } from '../utils/api';

function RecipeList({ recipes }) {
  if (!recipes || recipes.length === 0) {
    return <p>No recipes found.</p>;
  }

  return (
    <ul>
      {recipes.map((recipe) => (
        <li key={recipe.id} className="mb-4 border rounded p-4 shadow-md">
          <img src={recipe.image} alt={recipe.title} className="w-full h-48 object-cover mb-2 rounded" />
          <h3 className="text-xl font-bold mb-1">{recipe.title}</h3>
          <p>Ready in {recipe.readyInMinutes} minutes</p>
        </li>
      ))}
    </ul>
  );
}

function HomePage() {
  const [recipes, setRecipes] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleSearch = async (searchTerm) => {
    setLoading(true);
    const results = await fetchRecipes(searchTerm);
    setRecipes(results);
    setLoading(false);
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Recipe Search</h1>
      <SearchInput onSearch={handleSearch} />
      {loading && <p>Loading...</p>}
      <RecipeList recipes={recipes} />
    </div>
  );
}

export default HomePage;

Let’s break down what’s happening in this updated code:

  • Import Statements: We import useState, SearchInput, and the fetchRecipes function.
  • RecipeList Component: This component is responsible for displaying the recipe results. It receives an array of recipes as a prop. If no recipes are found, it displays a “No recipes found.” message. Otherwise, it maps over the recipes array and renders a list item (<li>) for each recipe. Each list item displays the recipe’s image, title, and ready time.
  • HomePage Component: This is the main component for our home page.
  • State Variables: We use useState to manage two state variables: recipes (an array to store the recipe results) and loading (a boolean to indicate whether we’re currently fetching data).
  • handleSearch Function: This function is called when the user submits the search form. It sets loading to true, calls the fetchRecipes function (from utils/api.js) with the search term, updates the recipes state with the results, and sets loading to false.
  • JSX Structure: The component renders a heading, the SearchInput component, a loading message (if loading is true), and the RecipeList component, passing the recipes array as a prop.

Styling with Tailwind CSS

To make our app look good, we’ll use Tailwind CSS, a utility-first CSS framework. Next.js makes it easy to integrate Tailwind. If you didn’t set it up when you created the project, follow these steps:

  1. Install Tailwind CSS and related packages:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  1. Configure Tailwind in tailwind.config.js:

Open tailwind.config.js and add the following to the content array:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      // ... other configurations
    },
  },
  plugins: [],
}
  1. Import Tailwind CSS in styles/globals.css:

Open styles/globals.css and add the following directives at the top of the file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, you can use Tailwind CSS classes in your components. The code examples above already include Tailwind CSS classes for styling. For example, className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" styles a button with a blue background, white text, bold font, padding, and rounded corners.

Running and Testing Your App

With all the components and code in place, let’s run the app:

npm run dev

Open your browser and go to http://localhost:3000. You should see the recipe search app. Enter a search term (e.g., “chicken”) and click the search button. The app will fetch recipes from the Spoonacular API and display the results.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • API Key Issues: Double-check that you’ve replaced YOUR_SPOONACULAR_API_KEY with your actual API key. Also, make sure your API key is valid and hasn’t expired.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the API is not configured to allow requests from your domain. This is less common with public APIs, but can happen. In development, you might be able to use a CORS proxy (there are browser extensions available). For production, you may need to set up a server-side proxy.
  • Incorrect API Endpoint: Verify that the API endpoint URL (API_URL) in utils/api.js is correct.
  • Network Errors: Make sure you have a stable internet connection. Check the browser’s developer console for any network errors.
  • Typos: Carefully review your code for typos, especially in variable names, function names, and API parameters.
  • Missing Dependencies: Ensure you have installed all the necessary dependencies. Run npm install in your project directory to install any missing packages.

Enhancements and Next Steps

This is a basic recipe search app, but you can enhance it further:

  • Implement Pagination: Display recipes in pages to handle large result sets.
  • Add Recipe Details Page: Create a page to show detailed information about each recipe.
  • Implement Filtering: Allow users to filter recipes by ingredients, cuisine, dietary restrictions, etc.
  • Improve UI/UX: Enhance the design and user experience with more advanced styling and features.
  • Add Error Handling: Display more informative error messages to the user.
  • Implement Caching: Cache API responses to improve performance and reduce API usage.
  • Use a State Management Library: For more complex apps, consider using a state management library like Redux or Zustand.

Key Takeaways

In this tutorial, you’ve learned how to build a basic recipe search app using Next.js. You’ve learned how to set up a Next.js project, create reusable components, fetch data from an external API, and display the results. You’ve also learned how to use Tailwind CSS for styling. This project provides a solid foundation for building more complex web applications with Next.js.

FAQ

  1. Can I use a different API? Yes, you can. You’ll need to adapt the API URL and the way you parse the API response to match the structure of the new API.
  2. How can I deploy this app? You can deploy your Next.js app to platforms like Vercel, Netlify, or AWS.
  3. How do I handle API rate limits? If the API has rate limits, you’ll need to implement strategies like caching, queuing requests, or using a server-side proxy to manage your API usage.
  4. What are the benefits of using Next.js? Next.js offers features like server-side rendering, static site generation, and optimized performance, making it a great choice for building modern web applications.

The journey of building a web application, from a simple idea to a functional product, is a rewarding one. While this recipe search app is a relatively small project, it encompasses many of the core principles of modern web development. By understanding these concepts and practicing with them, you build the confidence and skills to tackle more complex projects in the future. Remember that the best way to learn is by doing, so don’t be afraid to experiment, try new things, and iterate on your code. The world of web development is constantly evolving, so embrace the learning process, stay curious, and keep building.

More posts