This is a cooking recipe website built using React for the front-end and Firebase for the back-end. It allows users to create, read, update, and delete recipes easily. The application features a user-friendly interface, search functionality, and the ability to manage ingredients. With Firebase handling data storage and real-time updates, users can seamlessly manage their favorite recipes. Major frameworks and libraries:

(back to top)

1. Install dependencies:

   npm install

2. Start the front-end development server:

   npm start

1. Install Firebase:

   npm install firebase

Here's an interface summary for your cooking application, based on the provided screenshots:

1. Theme Customization:

   • Users can customize the theme color of the application, choosing between options like red or dark mode for a personalized interface experience.

     

2. View Recipe:

   • Clicking "Cook This" expands the recipe details, displaying the full list of ingredients and step-by-step cooking instructions.

     

3. Initial Recipe Search:

   • When users first access the application, they can search for recipes. The search results display the recipe name, cooking time, and a brief description. Users can click "Cook This" to view details or "Edit" to modify the recipe.

     

4. Create a New Recipe:

   • Users can create a new recipe by clicking the "Create Recipe" button. They input the recipe title, ingredients, method, and cooking time. Once filled out, clicking "Submit" adds the recipe to the list.

     

5. Edit Recipe:

   • To edit an existing recipe, users click the "Edit" button. This opens a form with the current recipe details, allowing users to update ingredients, methods, or cooking time.

     

6. Delete Recipe:

   • Users can delete a recipe by clicking the trash icon. A confirmation dialog appears to ensure the user wants to delete the recipe.

     

This summary provides an overview of the core functionalities, focusing on recipe management and interface customization.

Old Version (useHistory):

import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push(`/search?q=${term}`);

New Version (useNavigate):

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(`/search?q=${search}`);

• Use useNavigate: Simplifies navigation in React Router v6, making code more concise and modern.

Old Version:

const fetchData = async () => {
  const res = await fetch(url);
};

New Version:

const controller = new AbortController();
const signal = controller.signal;
const res = await fetch(url, { signal });

• Use AbortController: Manages async operations effectively, preventing memory leaks and unhandled errors.

Old Version:

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
</Switch>

New Version:

<Routes>
  <Route path="/" element={<Home />} />
</Routes>

• Use Routes: Enhances code readability and performance in React Router v6.

Old Version:

useEffect(() => {
  fetchData();
}, []);

New Version:

useEffect(() => {
  const unsubscribe = projectFirestore.collection('recipes').onSnapshot((snapshot) => {
    // Update state with new data
  });
  return () => unsubscribe();
}, []);

• Use onSnapshot: Fetches initial data and listens for changes, streamlining the data handling process.

Here’s the updated README format with code improvements:

Old Version:

const handleEdit = (recipe) => {
  // Update recipe logic without modal
};

New Version (with Modal):

const handleEdit = (recipe) => {
  setEditing(recipe.id);
  setUpdatedRecipe({ 
    title: recipe.title, 
    cookingTime: recipe.cookingTime.replace(' minutes', ''), 
    method: recipe.method,
    ingredients: recipe.ingredients 
  });
};

{editing && (
  <div className={`modal ${mode}`}>
    <div className="modal-content">
      <label>
        <span>Recipe Title:</span>
        <input 
          type="text" 
          value={updatedRecipe.title} 
          onChange={(e) => setUpdatedRecipe({ ...updatedRecipe, title: e.target.value })} 
        />
      </label>
      {/* Additional form fields for ingredients, method, cooking time */}
      <button onClick={() => handleUpdate(editing)} className="btn">Save</button>
      <button onClick={() => setEditing(null)} className="btn">Cancel</button>
    </div>
  </div>
)}

• Modal Addition: Added a modal that allows users to edit recipes in an overlay form.
• Dynamic Modal Styling: The modal styling adapts based on the mode, supporting both light and dark themes.
• Form Content: The form content is similar to the creation form, allowing users to modify all fields.