{"id":24769418,"url":"https://github.com/parthasarathy27/recipe-app-fe","last_synced_at":"2025-10-09T14:36:29.908Z","repository":{"id":274472261,"uuid":"923013820","full_name":"parthasarathy27/Recipe-App-FE","owner":"parthasarathy27","description":"The Recipe App allows users to browse, search, and save their favorite recipes. Built with ReactJS and Redux, the app fetches recipe data from the Edamam API and offers features like recipe details, search by ingredients or dietary preferences, and filtering by meal type. Users can mark recipes as favorites and view them later.","archived":false,"fork":false,"pushed_at":"2025-01-27T14:24:37.000Z","size":201,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-27T15:25:33.372Z","etag":null,"topics":["front-end","project-submission","task","using-api"],"latest_commit_sha":null,"homepage":"https://recipe-finder-rho-gilt.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/parthasarathy27.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-27T13:52:59.000Z","updated_at":"2025-01-27T14:26:05.000Z","dependencies_parsed_at":"2025-01-27T15:25:36.648Z","dependency_job_id":"c06b2bb1-3f16-481d-b972-19e6ae8acd4c","html_url":"https://github.com/parthasarathy27/Recipe-App-FE","commit_stats":null,"previous_names":["parthasarathy27/recipe-app-fe"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parthasarathy27%2FRecipe-App-FE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parthasarathy27%2FRecipe-App-FE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parthasarathy27%2FRecipe-App-FE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parthasarathy27%2FRecipe-App-FE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/parthasarathy27","download_url":"https://codeload.github.com/parthasarathy27/Recipe-App-FE/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245154318,"owners_count":20569481,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["front-end","project-submission","task","using-api"],"created_at":"2025-01-29T02:53:41.838Z","updated_at":"2025-10-09T14:36:24.877Z","avatar_url":"https://github.com/parthasarathy27.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Recipe App with Favorites and Filters\n\nThis **Recipe App** allows users to browse and search for recipes, save their favorite recipes, and apply filters to find specific types of recipes. Built with **ReactJS**, **Redux**, and styled using **CSS**, this app allows users to interact with a recipe API, view detailed recipes, and manage a list of favorites.\n\n## Features\n\n- **Browse Recipes**: Users can browse through a collection of recipes fetched from an external API.\n- **Search Recipes**: Allows users to search for recipes based on keywords, ingredients, or dietary preferences (e.g., vegetarian, gluten-free).\n- **Recipe Details**: Displays detailed information about recipes, including ingredients, instructions, preparation time, and serving size.\n- **Favorites**: Users can mark recipes as favorites and view them in a favorites list.\n- **Filters**: Recipes can be filtered based on categories like breakfast, lunch, dinner, or dietary restrictions.\n- **State Management**: Utilizes **Redux** for state management, including actions, reducers, and the store.\n- **Loading State**: A loading spinner is displayed while fetching data from the API.\n- **Alert System**: A notification/alert system that informs users about important actions, such as empty search results.\n\n## Tech Stack\n\n- **Frontend**: ReactJS, Redux, CSS\n- **State Management**: Redux\n- **API**: Edamam Recipe API (https://api.edamam.com)\n- **Styling**: Plain CSS (can be extended to SCSS or CSS-in-JS)\n\n## Project Structure\n\n```\nsrc/\n├── api/\n│   └── recipeApi.js        # Contains API fetching logic\n├── Components/\n│   ├── Alert.js            # Displays alerts or notifications\n│   ├── Favourite.js        # Handles displaying and managing favorites\n│   ├── Home.js             # Main home page with recipe search and listing\n│   ├── Loader.js           # Displays loading spinner during API calls\n│   ├── Main.css            # Main CSS file for styling\n│   ├── Main.js             # Main file that aggregates other components\n│   ├── NavBar.js           # Navigation bar for the app\n│   ├── RecipeInstruction.js # Displays detailed recipe instructions\n│   ├── SearchList.js       # Displays list of searched recipes\n│   └── SearchListAlert.js  # Displays alert for no search results\n├── Redux/\n│   ├── RecipeActions.js    # Redux actions for fetching and managing recipes\n│   ├── RecipeReducer.js    # Redux reducer for managing recipe state\n│   ├── RecipeTypes.js      # Action types for recipes\n│   └── store.js            # Redux store configuration\n├── App.js                  # Main app component\n├── App.test.js             # Test file for the App component\n├── index.css               # Global CSS styles\n├── index.js                # Entry point for React app\n├── reportWebVitals.js      # Measures app performance\n├── setupTests.js           # Sets up testing environment\n├── .gitignore              # Git ignore file\n├── README.md               # Project documentation\n└── package.json            # Project dependencies and scripts\n```\n\n## API Integration\n\nThe app fetches recipe data from the **Edamam Recipe API**. It uses the following API endpoint to get recipes based on user input:\n\n```\nhttps://api.edamam.com/search?q={query}\u0026app_id={your_app_id}\u0026app_key={your_app_key}\u0026from=0\u0026to=50\n```\n\n### API Setup\n\nTo start fetching recipe data, you'll need to replace the API credentials (app_id and app_key) in the `recipeApi.js` file, located in the `src/api/` folder.\n\n1. Go to [Edamam API](https://developer.edamam.com/) and sign up for an API key.\n2. Replace the following variables in the `recipeApi.js` file with your own credentials:\n\n```js\nconst appId = 'your_app_id';\nconst appKey = 'your_app_key';\n```\n\n## Setting Up the Project Locally\n\n### Prerequisites\n\nBefore you begin, ensure that you have the following installed:\n\n- **Node.js** (version 12 or higher)\n- **npm** (Node Package Manager)\n\n### Steps to Set Up\n\n1. Clone the repository to your local machine:\n\n   ```bash\n   git clone https://github.com/your-username/Recipe-App-FE.git\n   cd Recipe-App-FE\n   ```\n\n2. Install the project dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Set up your API credentials:\n\n   - Follow the instructions above to obtain your API keys from Edamam and update them in the `src/api/recipeApi.js` file.\n\n4. Start the app locally:\n\n   ```bash\n   npm start\n   ```\n\n   The app should now be running on `http://localhost:3000`.\n\n### Project Features in Detail\n\n#### 1. Recipe Search\nThe app allows users to search for recipes based on:\n- **Keywords** (e.g., \"pizza\", \"pasta\").\n- **Ingredients** (e.g., \"chicken\", \"spinach\").\n- **Dietary restrictions** (e.g., vegetarian, gluten-free).\n\n#### 2. Recipe Details\nWhen a user selects a recipe, they can see:\n- **Ingredients**: A list of ingredients needed to make the recipe.\n- **Instructions**: Step-by-step guide to preparing the dish.\n- **Preparation time** and **Serving size**.\n\n#### 3. Favorites List\n- Users can mark recipes as favorites, which will then be saved in the state and accessible in the \"Favorites\" section.\n  \n#### 4. Filters\nUsers can filter recipes based on:\n- **Meal type** (e.g., breakfast, lunch, dinner).\n- **Dietary restrictions** (e.g., vegetarian, gluten-free).\n\n#### 5. Loading and Error Handling\nThe app displays a loading spinner while fetching data from the API and shows an error message if no recipes are found.\n\n#### 6. Alerts\nAn alert system notifies users if no recipes match the search criteria or if there is an issue with fetching data from the API.\n\n## Redux Setup\n\n### Actions (`Redux/RecipeActions.js`)\n\nActions are responsible for dispatching API calls and updating the state with the fetched recipe data.\n\n### Reducers (`Redux/RecipeReducer.js`)\n\nReducers handle the state changes based on dispatched actions, updating the app state with the list of recipes, favorite recipes, and any search-related data.\n\n### Store (`Redux/store.js`)\n\nThe store configures the app’s state management with Redux and integrates it with React using the `Provider` component.\n\n## Testing\n\nTesting is set up using **Jest** and **React Testing Library**. You can run the tests by executing:\n\n```bash\nnpm test\n```\n\n## Deployment\n\nYou can deploy the app to services like **Vercel**, **Netlify**, or **GitHub Pages**. These platforms will automatically build and deploy your React app from your repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparthasarathy27%2Frecipe-app-fe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparthasarathy27%2Frecipe-app-fe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparthasarathy27%2Frecipe-app-fe/lists"}