{"id":22213891,"url":"https://github.com/deepak9011/recipe-newer","last_synced_at":"2026-04-12T15:03:05.239Z","repository":{"id":252952392,"uuid":"842003505","full_name":"Deepak9011/Recipe-Newer","owner":"Deepak9011","description":"Recipe Newer is a React-based web app for discovering and exploring global recipes, featuring search, category and area filters, and a custom domain on Azure. Integrating TheMealDB API, it provides a seamless culinary experience with efficient data fetching for detailed recipe views.","archived":false,"fork":false,"pushed_at":"2025-03-05T14:05:26.000Z","size":10872,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T15:22:50.575Z","etag":null,"topics":["azure-app-service","css3","git","html5","integration","javascript","reactjs","restful-api","vite"],"latest_commit_sha":null,"homepage":"https://recipenewer.deepakagrawal.xyz/","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/Deepak9011.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":"2024-08-13T13:29:41.000Z","updated_at":"2025-03-05T14:05:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"df68301c-5dec-4e7c-89a2-48130a22ee46","html_url":"https://github.com/Deepak9011/Recipe-Newer","commit_stats":null,"previous_names":["deepak9011/recipe-newer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deepak9011%2FRecipe-Newer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deepak9011%2FRecipe-Newer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deepak9011%2FRecipe-Newer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deepak9011%2FRecipe-Newer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Deepak9011","download_url":"https://codeload.github.com/Deepak9011/Recipe-Newer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245409451,"owners_count":20610523,"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":["azure-app-service","css3","git","html5","integration","javascript","reactjs","restful-api","vite"],"created_at":"2024-12-02T21:12:17.378Z","updated_at":"2026-04-12T15:03:05.130Z","avatar_url":"https://github.com/Deepak9011.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Recipe Newer \n\n\u003cimg src=\"public/recipe-newer-icon.svg\" width=\"250\"\u003e\n\nEmbark on a culinary journey with Recipe Newer, your ultimate companion for exploring a world of flavors. Discover delightful dishes from around the globe with just a search. From savory classics to sweet sensations, Recipe Newer guides you through a treasure trove of recipes, helping you create masterpieces in your kitchen.\n\n[Click here to visit the website!](https://recipenewer.deepakagrawal.xyz/))\n\n## Technologies\n\nRecipe Newer is crafted using modern web technologies to ensure a smooth, engaging, and efficient single-page user experience. Here's a glimpse into the technologies that power the app:\n\n### React\n\nThe frontend of Recipe Newer is built with React, a powerful JavaScript library for building user interfaces. React's component-based architecture enhances code reusability and helps manage the app's complex UI components.\n\n### Vite\n\nVite is the build tool of choice for Recipe Newer. Its rapid build speed and modern development server create a lightning-fast development environment, contributing to a more efficient development process.\n\n### TheMealDB API\n\nRecipe Newer integrates seamlessly with TheMealDB API to fetch an extensive variety of recipes. As a publicly accessible API, it provides a wealth of culinary information, allowing users to discover and explore diverse dishes effortlessly.\n\n### HTML5 \u0026 CSS3\n\nThe app's structure and styling are built using HTML5 for content and CSS3 for styling. This combination creates visually appealing recipe cards, search interfaces, and a cohesive user interface.\n\n### JavaScript ES6+\n\nModern JavaScript features and syntax, such as ES6+, are utilized to write clean, concise, and maintainable code. These features enhance the app's interactivity and functionality.\n\n### Git \u0026 GitHub\n\nVersion control is managed using Git, allowing for efficient code management. GitHub provides a platform for hosting and sharing the app's source code.\n\n### Deployment on Netlify\n\nRecipe Newer is optimized for deployment on Netlify, a powerful platform for hosting static websites and web applications. Netlify's seamless integration with GitHub streamlines the deployment process, ensuring that the app is easily accessible to users online.\n\n## Features\n\nRecipe Newer is a web application designed to make your culinary journey enjoyable and effortless. With a focus on simplicity and discovery, Recipe Newer empowers users to explore a diverse range of recipes and unleash their inner chef. Here are some of the key features:\n\n### Search recipes by name\n\n* Users are able to type into a search bar to search for recipes by name\n\n### Filter recipes by category\n\n* Users are able to filter recipes by category\n\n### Filter recipes by area\n\n* Users are able to filter recipes by areas of the world (countries)\n\n### Lookup a random recipe\n\n* Users are able to cycle through random recipes on click\n\n### List all recipes by the first letter\n\n* Users are able to list all recipes whose name begins with the clicked letter\n\n### View recipe details\n\n* Users are able to click on any recipe card to view the details of the clicked recipe (name, ingredients, etc.)\n\n### Save recipes\n\n* Users are able to save recipes which can be viewed later in the favorites page\n\n\n## Frontend Routing\n\n* `Route`\n  * `Component`\n    * Description\n\n***\n\n* `/`\n  * `Home`\n    * The default homepage containing the 'search' feature of the application\n* `/:id`\n  * `RecipeDetailView`\n    * Displays the detailed view of a recipe which contains all of the recipe information (such as name, ingredients, etc.)\n* `/favorites`\n  * `Favorites`\n    * Displays all of the users favorited recipes, if any\n* `/category`\n  * `Categories`\n    * Displays all of the available recipe categories\n* `/category/:category`\n  * `CategoryView`\n    * Displays all of the recipes that fall under a category\n* `/area`\n  * `Areas`\n    * Displays different country flags so users can filter recipes by areas of the world\n* `/area/:area`\n  * `AreaView`\n    * Displays all of the recipes that fall under an area (country)\n* `/random`\n  * `RecipeDetailView`\n    * Displays the recipe detail view of a random meal every time the user clicks\n* `/alphabet/:letter`\n  * `Alphabet`\n    * Displays all of the recipes whose name begins with the letter the user clicked\n\n## Challenge\n\nDuring the development of Recipe Newer, one notable challenge I encountered revolved around making an API call for each element in an array. This challenge emerged when I wanted users to be directed to the Recipe Detail View by clicking on a Recipe Card component whose data was being displayed by JSON that was fetched from a Filter by Category API request. The problem was that the data returned by the endpoint I was using didn't display all of the recipe information, only the ID and a few other pieces of data. In order to pass down the relevant information to the Recipe Detail View component, I had to iterate over each element of the fetched JSON data and initiate a second API call for each element that would allow me to look up all of the recipe information for each ID.\n\nTo overcome this challenge, I had to utilize the `Promise.all()` method from the Promise object, which I had never used before. This method proved to be a powerful solution for handling multiple asynchronous operations simultaneously. By wrapping each API call inside a Promise and then using `Promise.all()`, I was able to execute all the API calls concurrently and efficiently collect the required data.\n\n```javascript\nexport async function getMealsByCategory(setState, category) {\n  try {\n    const url = `https://www.themealdb.com/api/json/v1/1/filter.php?c=${category}`\n    const resp = await fetch(url);\n    const data = await resp.json();\n\n    const newDataArray = await Promise.all(\n      data.meals.map(async (meal) =\u003e {\n        const resp = await fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${meal.idMeal}`);\n        const data = await resp.json();\n        return await data.meals[0];\n      })\n    )\n\n    setState(newDataArray)\n  } catch(err) {\n    console.error(err)\n  }\n}\n```\n\nThis function was able to return data that originally looked like this:\n\n```json\n[\n        {\n            \"strMeal\": \"Baked salmon with fennel \u0026 tomatoes\",\n            \"strMealThumb\": \"https://www.themealdb.com/images/media/meals/1548772327.jpg\",\n            \"idMeal\": \"52959\"\n        },\n        {\n            \"strMeal\": \"Cajun spiced fish tacos\",\n            \"strMealThumb\": \"https://www.themealdb.com/images/media/meals/uvuyxu1503067369.jpg\",\n            \"idMeal\": \"52819\"\n        },\n        {\n            \"strMeal\": \"Escovitch Fish\",\n            \"strMealThumb\": \"https://www.themealdb.com/images/media/meals/1520084413.jpg\",\n            \"idMeal\": \"52944\"\n        },\n\n        ...\n\n]\n```\n\nAnd in the end, looked like this:\n\n```json\n[\n       {\n           \"idMeal\": \"52959\",\n           \"strMeal\": \"Baked salmon with fennel \u0026 tomatoes\",\n           \"strCategory\": \"Seafood\",\n           \"strArea\": \"British\",\n            ...\n       },\n       {\n           \"idMeal\": \"52944\",\n           \"strMeal\": \"Escovitch Fish\",\n           \"strCategory\": \"Seafood\",\n           \"strArea\": \"Jamaican\",\n            ...\n       },\n\n       ...\n\n]\n```\n\nThis challenge not only expanded my knowledge of asynchronous operations but also introduced me to a valuable tool in JavaScript's Promise API. I was able to apply this solution to several other API function calls as well, further solidifying my understanding. However, given that this is the function where I first encountered the problem and found the solution, I wanted to go ahead and highlight this one specifically.\n\n## Resources\n\n* [Carousel Component](https://mdbootstrap.com/docs/react/components/carousel/)\n* [Images for Carousel Component](https://unsplash.com/)\n* [SVG Icons](https://www.svgrepo.com/)\n* [SVG Page Dividers](https://omatsuri.app/)\n* [Font Awesome Icons](https://fontawesome.com/)\n* [Custom Fonts](https://fonts.google.com/)\n* [CSS Loader](https://loading.io/css/)\n* [Pass Props Through React Router's Link Component](https://ui.dev/react-router-pass-props-to-link)\n* [Scroll To Top on Page Transition](https://stackoverflow.com/questions/36904185/react-router-scroll-to-top-on-every-transition)\n* [Make API Calls For Each Element In An Array](https://stackoverflow.com/questions/66505445/how-to-make-api-calls-for-each-element-in-array)\n\n\n\u003c!-- Interview at Zuddl Asked about Sckema\n\n create table Recipe(recipe_id primary key int, recipe_name varchar(20), title varchar(100), description varchar(500), url varchar(20), countries varchar(20), categories varchar(20))\ncreate table User(user_id, user_name, password)\nfavourite(user_id foreign Key refrences User(user_id), recipe_id foreign key refrences Recipe(recipe_id))\n\nselect Recipe.recipe_id, Recipe.recipe_name from favourite inner join Recipe where Recipe.recipe_id == favourite.recipe_id group by recipe_id desc COUNT(user_id) Limit 5;\n\nselect * from Recipe where recipe_name Like \"%Butter Masala%\"; --\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepak9011%2Frecipe-newer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeepak9011%2Frecipe-newer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepak9011%2Frecipe-newer/lists"}