{"id":50840078,"url":"https://github.com/vimalyad/recipe_explorer","last_synced_at":"2026-06-14T06:06:38.365Z","repository":{"id":287556055,"uuid":"965059351","full_name":"vimalyad/recipe_explorer","owner":"vimalyad","description":"RecipeExplorer is a React application that allows users to discover, search, and save recipes for their cooking adventures. The app fetches recipe data from an API and provides a user-friendly interface to explore and manage your favorite recipes.","archived":false,"fork":false,"pushed_at":"2025-04-20T11:00:07.000Z","size":1486,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-10T18:38:02.264Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://recipeexplorer2907.netlify.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/vimalyad.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,"zenodo":null}},"created_at":"2025-04-12T10:17:41.000Z","updated_at":"2025-11-08T22:03:05.000Z","dependencies_parsed_at":"2025-04-12T13:49:43.717Z","dependency_job_id":"b5aa6dba-72d6-473c-85c4-ede0d1558b5d","html_url":"https://github.com/vimalyad/recipe_explorer","commit_stats":null,"previous_names":["vimal290704/trimester_3_end_term_project","vinay290704/trimester_3_end_term_project","yamisukehiro2907/trimester_3_end_term_project","vimalyad/recipe_explorer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vimalyad/recipe_explorer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimalyad%2Frecipe_explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimalyad%2Frecipe_explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimalyad%2Frecipe_explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimalyad%2Frecipe_explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vimalyad","download_url":"https://codeload.github.com/vimalyad/recipe_explorer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimalyad%2Frecipe_explorer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34310814,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-14T02:00:07.365Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-06-14T06:06:37.755Z","updated_at":"2026-06-14T06:06:38.359Z","avatar_url":"https://github.com/vimalyad.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RecipeExplorer\n\nRecipeExplorer is a React application that allows users to discover, search, and save recipes for their cooking adventures. The app fetches recipe data from an API and provides a user-friendly interface to explore and manage your favorite recipes.\n\n![RecipeExplorer Screenshot](./src/assets/image.png)\n\n[Link Demo](https://recipeexplorer2907.netlify.app/)\n\n## 🍳 Features\n\n- **Recipe Discovery**: Browse through a variety of recipes fetched from an external API\n- **Search Functionality**: Find recipes by keywords and ingredients\n- **Filtering Options**: Filter recipes by categories or types\n- **Personal Cooking List**: Save your favorite recipes to a personal cooking list\n- **Persistent Storage**: Your cooking list is saved in localStorage for easy access across sessions\n- **Responsive Notifications**: Get feedback when adding or removing recipes from your list\n- **Offline Access**: Access your saved recipes even when offline\n- **Error Handling**: Robust error handling for API issues and data processing\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js (v18.0.0 or later recommended)\n- npm (v9.0.0 or later) or yarn package manager\n\n### Installation and Setup\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/Vimal290704/Trimester_3_End_term_project\n   cd RecipeExplorer\n   ```\n\n2. Install dependencies using npm:\n\n   ```bash\n   npm install\n   ```\n\n   Or using yarn:\n\n   ```bash\n   yarn install\n   ```\n\n3. Start the development server:\n\n   ```bash\n   npm run dev\n   ```\n\n   Or using yarn:\n\n   ```bash\n   yarn dev\n   ```\n\n4. Open your browser and navigate to `http://localhost:5173` (Vite's default port)\n\n### Quick Setup From Scratch\n\nIf you're setting up the project from scratch:\n\n```bash\n# Create a new directory and navigate into it\nmkdir RecipeExplorer \u0026\u0026 cd RecipeExplorer\n\n# Initialize a new npm project\nnpm init -y\n\n# Install all dependencies at once\nnpm install axios@1.8.4 react@19.0.0 react-dom@19.0.0 react-hot-toast@2.5.2 react-router-dom@6.30.0 react-toastify@11.0.5 sweetalert2@11.19.1\n\n# Install all development dependencies\nnpm install --save-dev @eslint/js@9.21.0 @tailwindcss/postcss@4.1.3 @tailwindcss/vite@4.1.3 @types/react@19.0.10 @types/react-dom@19.0.4 @vitejs/plugin-react@4.3.4 autoprefixer@10.4.21 eslint@9.21.0 eslint-plugin-react-hooks@5.1.0 eslint-plugin-react-refresh@0.4.19 globals@15.15.0 postcss@8.5.3 tailwindcss@4.1.3 vite@6.2.0\n```\n\nOr use this single command to install all tools at once:\n\n```bash\nnpm install axios@1.8.4 react@19.0.0 react-dom@19.0.0 react-hot-toast@2.5.2 react-router-dom@6.30.0 react-toastify@11.0.5 sweetalert2@11.19.1 @tailwindcss/vite@4.1.3 @eslint/js@9.21.0 @tailwindcss/postcss@4.1.3 @types/react@19.0.10 @types/react-dom@19.0.4 @vitejs/plugin-react@4.3.4 autoprefixer@10.4.21 eslint@9.21.0 eslint-plugin-react-hooks@5.1.0 eslint-plugin-react-refresh@0.4.19 globals@15.15.0 postcss@8.5.3 tailwindcss@4.1.3 vite@6.2.0\n```\n\n### Available Scripts\n\nThe project includes several scripts you can run:\n\n- `npm run dev` - Run the development server with hot reloading\n- `npm run build` - Build the application for production\n- `npm run lint` - Run ESLint to check for code quality issues\n- `npm run preview` - Preview the production build locally\n\n## 🏗️ Project Structure\n\n```\nRecipeExplorer/\n├── src/\n│   ├── assets/\n│   │   └── image.png\n│   ├── components/\n│   │   ├── RecipeCard.jsx\n│   │   ├── FilterOption.jsx\n│   │   ├── Home.jsx\n│   │   └── CookingList.jsx\n│   ├── context/\n│   │   └── DataContext.jsx\n│   ├── App.jsx\n│   ├── main.jsx\n│   └── index.css\n├── public/\n│   └── index.html\n├── package.json\n└── vite.config.js\n```\n\n## 💾 Data Management\n\nRecipeExplorer uses React Context API for state management. The `DataContext` provides:\n\n- Recipe data fetching through the DummyJSON API\n- Search and filter functionality\n- Cooking list state management\n- Local storage persistence\n- Toast notifications for user feedback\n- Error handling\n\n## 🔍 Core Functionality\n\n### Recipe Fetching\n\nThe application fetches recipe data from the DummyJSON API:\n\n```javascript\nconst RawData = useCallback(async () =\u003e {\n  try {\n    const response = await api.get(`https://dummyjson.com/recipes`);\n    setApiWorking(true);\n    return response.data.recipes;\n  } catch (error) {\n    console.error(\"Error fetching recipes:\", error);\n    setApiWorking(false);\n    setError(error.message || \"Error fetching recipes\");\n    return [];\n  }\n}, []);\n```\n\n### Cooking List Management\n\nUsers can save recipes to their cooking list:\n\n```javascript\nconst saveRecipe = useCallback(\n  (recipe, event) =\u003e {\n    if (event) {\n      event.preventDefault();\n    }\n\n    if (!recipe) {\n      setError(\"Cannot save null recipe\");\n      return;\n    }\n\n    if (!doesContain(recipe)) {\n      setCookList((prev) =\u003e [...prev, recipe]);\n      toast.success(\n        `${recipe.name || \"Recipe\"} added to your cooking list!`,\n        toastOptions\n      );\n    }\n  },\n  [doesContain, toastOptions]\n);\n```\n\nAnd remove recipes from their list:\n\n```javascript\nconst removeFromCookList = useCallback(\n  (recipeId) =\u003e {\n    if (!recipeId) {\n      setError(\"Cannot remove recipe without ID\");\n      return;\n    }\n\n    const recipe = cookList.find((item) =\u003e item \u0026\u0026 item.id === recipeId);\n    if (recipe) {\n      setCookList((prev) =\u003e\n        prev.filter((item) =\u003e item \u0026\u0026 item.id !== recipeId)\n      );\n      toast.info(`${recipe.name || \"Recipe\"} removed from your list`, {\n        ...toastOptions,\n        icon: \"🗑️\",\n      });\n    }\n  },\n  [cookList, toastOptions]\n);\n```\n\n## 🔧 Technologies Used\n\nThe application uses the following libraries:\n\n- **React (v19.0.0)** - UI library\n- **React Router Dom (v6.30.0)** - For routing and navigation\n- **Axios (v1.8.4)** - HTTP client for API requests\n- **React-Toastify (v11.0.5)** - Notification system\n- **React-Hot-Toast (v2.5.2)** - Alternative toast notification system\n- **Tailwind CSS (v4.1.3)** - For styling and responsive design\n- **Vite (v6.2.0)** - Build tool and development server\n- **SweetAlert2 (v11.19.1)** - For enhanced alert dialogs\n- **LocalStorage API** - For persistent data storage\n\n## 🛠️ Environment Setup\n\n### Setting Up Development Environment\n\n1. **Install Node.js and npm**\n\n   Download and install from [Node.js official website](https://nodejs.org/)\n\n2. **Install Git**\n\n   Download and install from [Git official website](https://git-scm.com/)\n\n3. **Configure Environment Variables** (if needed)\n\n   Create a `.env` file in the root directory for any environment variables:\n\n   ```\n   VITE_API_URL=https://dummyjson.com\n   ```\n\n4. **Editor Setup**\n\n   For the best development experience, we recommend using Visual Studio Code with these extensions:\n\n   - ESLint\n   - Prettier\n   - Tailwind CSS IntelliSense\n\n## 🚀 Deployment\n\n### Build for production\n\n```bash\nnpm run build\n```\n\nThis will create a `dist` folder with optimized production build.\n\n### Preview production build locally\n\n```bash\nnpm run preview\n```\n\n### Deploy to Netlify\n\nThe app is configured to be easily deployed to Netlify. Connect your repository and the deployment process will be handled automatically.\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n1. **API Connection Failed**\n\n   - Check your internet connection\n   - Verify that the DummyJSON API is available\n   - Check browser console for specific error messages\n\n2. **Build Failures**\n\n   - Make sure all dependencies are installed correctly\n   - Clear the node_modules folder and reinstall dependencies\n   - Check for any ESLint errors with `npm run lint`\n\n3. **Styling Issues**\n   - Ensure Tailwind CSS is configured correctly\n   - Run `npx tailwindcss init -p` to create configuration files if missing\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 🙏 Acknowledgements\n\n- DummyJSON for providing the recipe API\n- React and the ecosystem of libraries that make this project possible\n- All contributors and supporters of the project\n\n---\n\nMade with ❤️ by Vimal Kumar Yadav\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimalyad%2Frecipe_explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvimalyad%2Frecipe_explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimalyad%2Frecipe_explorer/lists"}