Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vis8340/recipe-finder-app
Recipe-Finder-Application
https://github.com/vis8340/recipe-finder-app
css react react-router-dom redux tostify
Last synced: 4 days ago
JSON representation
Recipe-Finder-Application
- Host: GitHub
- URL: https://github.com/vis8340/recipe-finder-app
- Owner: vis8340
- Created: 2024-10-26T13:17:23.000Z (14 days ago)
- Default Branch: main
- Last Pushed: 2024-10-26T13:17:30.000Z (14 days ago)
- Last Synced: 2024-11-01T11:20:53.174Z (8 days ago)
- Topics: css, react, react-router-dom, redux, tostify
- Language: JavaScript
- Homepage: https://bymj.short.gy/NRoM62
- Size: 4.72 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.