Building a Recipe Sharing Platform with Next.js

Introduction

A recipe sharing platform is a place for users to post, discover, and share their favorite recipes. In this tutorial, we'll provide an overview of building a recipe sharing platform using Next.js. We'll cover project setup, user authentication, recipe posting, and basic search functionality. In a real-world recipe sharing platform, you'd implement advanced features like user profiles, comments, and more.

Setting Up the Project

Ensure you have Node.js and npm installed on your system. If not, download and install them from the official website.

Create a new Next.js project using the following commands:

        npx create-next-app recipe-sharing
cd recipe-sharing
            

User Authentication

To allow users to post recipes, you'll need to implement user authentication. For simplicity, we'll use a mock authentication system in this example.

        <!-- pages/login.js -->
import React, { useState } from 'react';
export default function Login() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [loggedIn, setLoggedIn] = useState(false);
    const handleLogin = () => {
        // Simulated login logic
        if (username === 'user' && password === 'password') {
            setLoggedIn(true);
        }
    };
    return (
        <div>
            <h2>Login</h2>
            <input
                type=`text`
                placeholder=`Username`
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />
            <input
                type=`password`
                placeholder=`Password`
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button onClick={handleLogin}>Login</button>
        </div>
    );
}
            

Recipe Posting

Users can post their recipes on the platform. Here's a simplified example of a recipe posting page.

        <!-- pages/post-recipe.js -->
import React, { useState } from 'react';
export default function PostRecipe() {
    const [recipeTitle, setRecipeTitle] = useState('');
    const [recipeDescription, setRecipeDescription] = useState('');
    const [recipeIngredients, setRecipeIngredients] = useState('');
    const [recipeInstructions, setRecipeInstructions] = useState('');
    const handlePostRecipe = () => {
        // Save the recipe data to a database (not implemented here)
    };
    return (
        <div>
            <h2>Post a Recipe</h2>
            <input
                type=`text`
                placeholder=`Recipe Title`
                value={recipeTitle}
                onChange={(e) => setRecipeTitle(e.target.value)}
            />
            <textarea
                placeholder=`Recipe Description`
                value={recipeDescription}
                onChange={(e) => setRecipeDescription(e.target.value)}
            ></textarea>
            <textarea
                placeholder=`Ingredients`
                value={recipeIngredients}
                onChange={(e) => setRecipeIngredients(e.target.value)}
            ></textarea>
            <textarea
                placeholder=`Instructions`
                value={recipeInstructions}
                onChange={(e) => setRecipeInstructions(e.target.value)}
            ></textarea>
            <button onClick={handlePostRecipe}>Post Recipe</button>
        </div>
    );
}
            

Search Functionality

Users can search for recipes based on keywords or categories. You'd typically implement a more advanced search feature in a real-world application.

        <!-- Implement a search component and search logic -->
// ...
            

Conclusion

You've learned how to create a simplified recipe sharing platform with Next.js, including project setup, user authentication, and recipe posting. In a real-world scenario, you'd implement more advanced features like user profiles, comments, and a database for managing recipes. You can customize and expand this foundation based on your specific recipe sharing platform requirements.