https://github.com/pintu544/recipe-finder-application

The Recipe Finder Application serves as a versatile platform enabling users to search for recipes based on specific keywords. The primary goal of this assignment is to deliver a responsive, user-friendly interface that facilitates searching, viewing, and saving recipes.
https://github.com/pintu544/recipe-finder-application

react

Last synced: 6 days ago
JSON representation

The Recipe Finder Application serves as a versatile platform enabling users to search for recipes based on specific keywords. The primary goal of this assignment is to deliver a responsive, user-friendly interface that facilitates searching, viewing, and saving recipes.

• Host: GitHub
• URL: https://github.com/pintu544/recipe-finder-application
• Owner: pintu544
• Created: 2023-10-23T10:25:10.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-23T10:33:57.000Z (about 1 year ago)
• Last Synced: 2024-04-13T23:09:58.378Z (8 months ago)
• Topics: react
• Language: JavaScript
• Homepage: https://bymj.short.gy/NRoM62
• Size: 4.73 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Project Description

**Recipe-Finder-Application** is a React web application that allows users to browse the Spoonacular recipe database, search for recipes based on various criteria, and filter recipes by diet and meal type. Users can view detailed recipe information, including ingredients and instructions, and save or delete recipes from their favourites. The app also includes user authentication features, allowing users to create accounts, log in, and log out.

## Technologies Used

- **Frontend:**

  - React

  - Redux Toolkit

  - CSS

  - React Router Dom

  - Toastify React

- **API:**

  - Spoonacular API

## Features

### 1. Recipe Browsing and Search

- **Search Bar:** Users can search for recipes by entering keywords, such as ingredients or dish names.

- **Filtering:** Recipes can be filtered based on diet and meal type preferences.

- **Random Search:** Users can discover new recipes through a random search feature.

### 2. Recipe Details

- **Detailed Information:** Each recipe displays detailed information, including title, ingredients, cooking instructions, and an image.

- **Save to Favorites:** Users can save their favourite recipes for future reference (account required to save ).

- **Delete from Favorites:** Users can remove recipes from their favourites list.

### 3. User Authentication

- **Account Creation:** Users can create accounts by providing a valid email address and password.

- **Login and Logout:** Registered users can log in and out of their accounts.

### 4. Error Handling

- **API Errors:** Effective handling of failed API requests or instances where no results are found.

- **User-Friendly Messages:** User-friendly error messages are displayed to guide users in case of unexpected situations.

### 5. Styling and User Interface (UI/UX)

- **Responsive Design:** The application features a responsive and visually appealing UI/UX suitable for both web and mobile devices.

- **Attractive Layout:** The user interface is designed to be attractive and user-friendly, ensuring a seamless browsing experience.

## Deployment

Recipe-Finder-Application is deployed and can be accessed at [[Recipe-Finder-Application](https://bymj.short.gy/NRoM62)].

## Running the Application Locally

To run the application locally, follow these steps:

1. Clone the repository to your local machine.

2. Navigate to the project directory and run `npm install` to install dependencies.

3. Run `npm run dev` to start  the frontend  servers.

4. Open [http://localhost:3000](http://localhost:3000) in your browser to view the application.

## Acknowledgements

Special thanks to the creators of the Spoonacular API for providing recipe data.