{"id":28288545,"url":"https://github.com/sandeepv68/chef-rudy","last_synced_at":"2026-03-05T14:31:11.903Z","repository":{"id":38013016,"uuid":"260410061","full_name":"Sandeepv68/chef-rudy","owner":"Sandeepv68","description":"A simple mobile app to help in cooking built using React Native. This app can help you search millions of recipes from around the world from its database. This app can also help you do nutritional analysis on your favourite recipes or its ingredients.","archived":false,"fork":false,"pushed_at":"2023-01-27T00:41:29.000Z","size":4095,"stargazers_count":5,"open_issues_count":13,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-01-15T21:38:26.487Z","etag":null,"topics":["android","app","edamam-api","ios","javascript","mobile-app","react-native","reactjs","redux"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sandeepv68.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-05-01T08:16:43.000Z","updated_at":"2025-11-17T13:51:49.000Z","dependencies_parsed_at":"2023-02-15T03:31:55.589Z","dependency_job_id":null,"html_url":"https://github.com/Sandeepv68/chef-rudy","commit_stats":null,"previous_names":["sandeepv68/chef-rudy"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sandeepv68/chef-rudy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepv68%2Fchef-rudy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepv68%2Fchef-rudy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepv68%2Fchef-rudy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepv68%2Fchef-rudy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sandeepv68","download_url":"https://codeload.github.com/Sandeepv68/chef-rudy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepv68%2Fchef-rudy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30130314,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T12:40:50.676Z","status":"ssl_error","status_checked_at":"2026-03-05T12:39:32.209Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["android","app","edamam-api","ios","javascript","mobile-app","react-native","reactjs","redux"],"created_at":"2025-05-22T00:12:37.874Z","updated_at":"2026-03-05T14:31:11.613Z","avatar_url":"https://github.com/Sandeepv68.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://i.ibb.co/SQGt77F/logo.png\" alt=\"drawing\" width=\"400\"/\u003e\n\u003c/p\u003e\n\nA simple mobile app to help in cooking, built using [React Native](https://reactnative.dev/). This app can help you search millions of recipes from around the world from its database. This app  can also help you do nutritional analysis on your favourite recipes or its ingredients. \n\n## :slightly_smiling_face: \u0026nbsp; Motivation\nThis is my first journey into the world of building mobile apps. I have always been a javascript engineer for the web since the start of my career. I've always loved javascript. Technologies like [NodeJS](https://nodejs.org/en/), [ExpressJS](https://expressjs.com/), [ReactJS](https://reactjs.org/), and [MarkoJS](https://markojs.com/) have piqued my interest in JS world. Similarly [React Native](https://reactnative.dev/) caught my eye, way back, but I couldn't get my hands-on it. However, I decided to make my time and learn it by building an app for myself. I chose [Edamam](https://www.edamam.com/) API to serve as the back-end for this app. Edamam provides nutrition solutions to businesses in the food, health and wellness sectors, leveraging its proprietary cloud-based, structured-data semantic technology platform. \nThis project is to showcase what I learned from building apps in react native, and also as a sample for others who wants to learn mobile app development in react native.\n\n## :notebook_with_decorative_cover: \u0026nbsp; Table of Contents\n\n\u003c!--ts--\u003e\n* [Motivation](#slightly_smiling_face-motivation)\n* [Sample Screens](#iphone-sample-screens)\n* [App Demo](#film_strip-app-demo)\n* [Installation](#floppy_disk-installation)\n* [Dependency](#package-dependency)\n* [Backend API Server](#control_knobs-backend-api-server)\n* [Design \u0026 Architecture](#framed_picture-design--architecture)\n    * [Available commands](#loudspeaker-available-commands)\n* [App Features](#point_right-app-features)\n    * [Recipe Search](#point_right-app-features)\n    * [Analyze Meal](#1-analyze-meal)\n* [Future Scope](#rocket-future-scope)\n* [Testing](#hammer_and_wrench-testing)\n* [Technologies Used](#gear-technologies-used)\n* [Contributing](#hammer-contributing)\n* [Authors](#man_technologist-authors)\n* [License](#scroll-license)\n* [Acknowledgements](#handshake-acknowledgements)\n\u003c!--te--\u003e\n\u003cp align=\"center\"\u003e \u003c/p\u003e\n\n## :iphone: \u0026nbsp; Sample Screens\n\n\u003ctable class=\"md-table\" style=\"border:none\"\u003e\n    \u003ctbody style=\"border:none\"\u003e\n        \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/6PdHn3f/chef-rudy-1-splash.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/SPTL6GL/chef-rudy-2-home.png\" height=\"500\" /\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eSplash screen\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eHome screen\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## :film_strip: \u0026nbsp; App Demo\n[Watch the video on youtube](https://youtu.be/2hji8MQfCJc)\n\n## :floppy_disk: \u0026nbsp; Installation\nClone the repo from the url and install the dependencies\n```sh\ngit clone https://github.com/SandeepVattapparambil/chef-rudy.git\ncd chef-rudy\nnpm i \u0026\u0026 npm install\n```\n\n## :package: \u0026nbsp; Dependency\nChef Rudy app is dependent on the following packages:\n* **@react-native-community/masked-view** [v0.1.10](https://www.npmjs.com/package/@react-native-community/masked-view) **:**\nReact Native MaskedView for iOS and Android. React Native MaskedView is not currently supported by Expo unless you \"eject\".\n\n* **@react-navigation/native** [v5.2.3](https://www.npmjs.com/package/@react-navigation/native) **:**\nReact Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. \n\n* **@react-navigation/stack** [v5.2.18](https://www.npmjs.com/package/@react-navigation/stack) **:**\nStack navigator for React Navigation.\n\n* **axios** [v0.19.2](https://www.npmjs.com/package/axios) **:**\nPromise based HTTP client for the browser and node.js\n\n* **expo** [v37.0.3](https://www.npmjs.com/package/expo) **:**\nThe expo package is an umbrella package that contains the client-side code (ex: JavaScript) for accessing system functionality such as contacts, camera, and location in Expo apps. Some of the Expo APIs are implemented in this package, while others are implemented in universal modules under the parent packages directory.\n\n* **expo-updates** [v0.1.0](https://www.npmjs.com/package/expo-updates) **:**\nexpo-updates fetches and manages updates to your app stored on a remote server.\n\n* **react** [v16.9.0](https://www.npmjs.com/package/react) **:**\nReact is a JavaScript library for creating user interfaces.The react package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.\n\n* **react-dom** [v16.9.0](https://www.npmjs.com/package/react-dom) **:**\nThis package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.\n\n* **react-native** [v0.61.5](https://www.npmjs.com/package/react-native) **:**\nReact Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.React Native apps may target iOS 9.0 and Android 4.1 (API 16) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like Expo can be used to work around this.\n\n* **react-native-gesture-handler** [v1.6.1](https://www.npmjs.com/package/react-native-gesture-handler) **:**\nReact Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native. With this library gestures are no longer controlled by the JS responder system, but instead are recognized and tracked in the UI thread. It makes touch interactions and gesture tracking not only smooth, but also dependable and deterministic.\n\n* **react-native-reanimated** [v1.7.1](https://www.npmjs.com/package/react-native-reanimated) **:**\nReact Native Reanimated provides a more comprehensive, low level abstraction for the Animated library API to be built on top of and hence allow for much greater flexibility especially when it comes to gesture based interactions.\n\n* **react-native-safe-area-context** [v0.7.3](https://www.npmjs.com/package/react-native-safe-area-context) **:**\nA flexible way to handle safe area, also works on Android and Web!\n\n* **react-native-screens** [v2.2.0](https://www.npmjs.com/package/react-native-screens) **:**\nThis project aims to expose native navigation container components to React Native. It is not designed to be used as a standalone library but rather as a dependency of a full-featured navigation library.\n\n* **react-native-svg-charts** [v5.4.0](https://www.npmjs.com/package/react-native-svg-charts) **:**\nreact-native-svg-charts provides SVG Charts support to React Native on iOS and Android, and a compatibility layer for the web.\n\n* **react-native-svg-transformer** [v0.14.3](https://www.npmjs.com/package/react-native-svg-transformer) **:**\nReact Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a Web application when using a library like SVGR to transform your imported SVG images into React components. This makes it possible to use the same code for React Native and Web.\n\n* **react-native-unimodules** [v0.9.0](https://www.npmjs.com/package/react-native-unimodules) **:**\nThis library contains the core unimodule infrastructure and a collection of unimodules and interfaces that are commonly depended on by other unimodules. You only need to install react-native-unimodules once and then you will be able to use most of the packages from the Expo SDK, like expo-camera, expo-media-library and many more, in any React Native project.\n\n* **react-native-web** [v0.11.7](https://www.npmjs.com/package/react-native-web) **:**\nReact Native for Web brings the platform-agnostic Components and APIs of React Native to the Web. It is used in production by Twitter Lite.\n\n* **react-redux** [v7.2.0](https://www.npmjs.com/package/react-redux) **:**\nReact Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.\n\n* **redux** [v4.0.5](https://www.npmjs.com/package/redux) **:**\nRedux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.\n\n* **redux-thunk** [v2.3.0](https://www.npmjs.com/package/redux-thunk) **:**\nRedux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.\n\n* **rn-placeholder** [v3.0.0](https://www.npmjs.com/package/rn-placeholder) **:**\nDisplay some placeholder stuff before rendering your text or media content in React Native. Compatible with Expo and react-native-web.\n\nalso the following packages are required for development: \n* **@babel/core** [v7.8.6](https://www.npmjs.com/package/@babel/core) **:**\nBabel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. \n\n* **babel-jest** [v25.2.6](https://www.npmjs.com/package/babel-jest) **:**\nJest plugin for babel. A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects.\n\n* **jest** [v5.2.6](https://www.npmjs.com/package/jest) **:**\nA comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects.\n\n* **react-test-renderer** [v16.9.0](https://www.npmjs.com/package/react-test-renderer) **:**\nThis package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. Essentially, this package makes it easy to grab a snapshot of the \"DOM tree\" rendered by a React DOM or React Native component without using a browser or jsdom.\n\n* **@types/react** [v16.9.23](https://www.npmjs.com/package/@types/react) **:**\nThis package contains type definitions for React.\n\n* **@types/react-native** [v0.61.17](https://www.npmjs.com/package/@types/react-native) **:**\nThis package contains type definitions for react-native.\n\n* **babel-preset-expo** [v8.1.0](https://www.npmjs.com/package/babel-preset-expo) **:**\nThis preset extends the default React Native preset (metro-react-native-babel-preset) and adds support for decorators, tree-shaking web packages, and loading font icons with optional native dependencies if they're installed.\n\n* **typescript** [v3.8.3](https://www.npmjs.com/package/typescript) **:**\nTypeScript is a language for application-scale JavaScript. TypeScript adds optional types to JavaScript that support tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to readable, standards-based JavaScript.\n\n## :control_knobs: \u0026nbsp; Backend API Server\nThis project uses [Edamam](https://www.edamam.com/) API to serve as the back-end for this app. Edamam provides nutrition solutions to businesses in the food, health and wellness sectors, leveraging its proprietary cloud-based, structured-data semantic technology platform. Inorder to consume the api, users are instructed to signup from their web portal available [here](https://developer.edamam.com/). Edamam has various subscription plans available for all types of users. Each api requires discrete app id and app key. These keys has to be saved inside the `keys.json` file inside the `src` folder in the app repo as shown in the image below.\n\u003cp\u003e\u003cimg src=\"https://i.ibb.co/PgRs4Nd/keys.png\" height=400\u003e\u003c/p\u003e\n\n## :framed_picture: \u0026nbsp; Design \u0026 Architecture\nOnce the git repo is cloned, and api keys are set, you are good to go. You can modify the code to best suit your needs. The following is the folder tree structure for the `src` folder. The source of the app is written in `Typescript`.\n```sh\n└───src\n    ├───Components\n    │   ├───Button\n    │   ├───GridPlaceHolder\n    │   ├───ListPlaceHolder\n    │   └───ListPlaceHolderGraph\n    ├───Config\n    ├───Network\n    ├───Redux\n    │   ├───Actions\n    │   ├───Constants\n    │   ├───Reducers\n    │   └───Store\n    └───Screens\n        ├───AnalyzeMeal\n        ├───Home\n        ├───RecipeSearch\n        └───ShowRecipe\n```\n\n### :loudspeaker: \u0026nbsp; Available commands\nManually start the packager using the following command:\n```sh\nnpm run start\n```\n\nStart and run your app in an Android device / AVD:\n```sh\nnpm run android\n```\n\nStart and run your app in an iOS device / emulator:\n```sh\nnpm run ios\n```\n\nRun your app on web:\n```sh\nnpm run web\n```\n\nPackage and run your app on an Android/iOS device using Expo client on your device:\n```sh\nnpm run mobile\n```\n\n\nThe main entry point to the app is `index.js`, which registers the root component `App` from `App.tsx`. App loads all the screens and sets up the navigation using stack. Data required for each screen is obtained from `redux` store, which gets it from the api using `thunk` and `axios`. The architecture of this app follows standard redux-flux architecture as shown below: \n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://i.ibb.co/Cm6SpyZ/Untitled.png\"\u003e\u003c/p\u003e\n\nThe redux architecture implemented here is a reduced model of [flux architecture](https://facebook.github.io/flux/docs/in-depth-overview) as shown below:\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://cdn.scotch.io/scotchy-uploads/2014/10/V70cSEC.png\"\u003e\u003c/p\u003e\n\n## :point_right: \u0026nbsp; App Features\nOnce the app loads, it renders the home screen as shown below:\n\nUsers have two options to choose from:\n* **Recipe Search**\nThis feature allows users to search millions of recipes from around the world , and gets it comple details, including nutritional details, images etc.\n* **Analyze Meal**\nThis feature allows users to analyze any recipe or uts ingredients to get a complete consolidated nutritional data with charts and graphs.\n\n### :+1: \u0026nbsp; **Recipe Search**\n\u003ctable class=\"md-table\" style=\"border:none\"\u003e\n    \u003ctbody style=\"border:none\"\u003e\n        \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/SPTL6GL/chef-rudy-2-home.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/RgMJhwS/chef-rudy-3-search.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/xFJYXXV/chef-rudy-4-search-loading.png\" height=\"500\" /\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eHome screen\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eRecipe search screen\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n             \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eRecipe search loading for list view\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/YW6bYhn/chef-rudy-5-list.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/RCBBNBG/chef-rudy-7-grid-loading.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/MR8YrP6/chef-rudy-6-grid.png\" height=\"500\" /\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eRecipes in list view\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eRecipe search loading for grid view\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n             \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eRecipes in grid view\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/8YLT2kS/chef-rudy-8-show-1.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/G9DLqDx/chef-rudy-9-show-2.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/thVx41m/chef-rudy-010-show-3.png\" height=\"500\" /\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eRecipe show screen, \u003cbr/\u003edefault selected Ingredients tab\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eRecipe show screen, \u003cbr/\u003ePreparation tab selected. \u003cbr/\u003eGo to redipe button visible\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n             \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003eRecipe show screen, \u003cbr/\u003eNutrition tab selected.\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/TYT2y6m/chef-rudy-011-show-4.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/RHT4QmF/chef-rudy-012-grid-1.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/djHZ9Wq/chef-rudy-013-show-2.png\" height=\"500\" /\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eRecipe show screen\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eRecipes in grid view\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n             \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eRecipe show screen\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n### :+1: \u0026nbsp; **Analyze Meal**\n\n\u003ctable class=\"md-table\" style=\"border:none\"\u003e\n    \u003ctbody style=\"border:none\"\u003e\n        \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/SPTL6GL/chef-rudy-2-home.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/tsYpK0F/chef-rudy-014-analysis-1.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/gtd5MTZ/chef-rudy-015-analysis-2.png\" height=\"500\" /\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eHome screen\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eAnalyze Meal screen\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n             \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eNutrition data loading\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/7CRQ297/chef-rudy-016-analysis-3.png\" height=\"500\" /\u003e\u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\u003cimg src=\"https://i.ibb.co/Hd7VLyb/chef-rudy-017-analysis-4.png\" height=\"500\" /\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr style=\"border:none\"\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eNutrition data summary\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd style=\"border:none\"\u003e\n                \u003cp align=\"center\"\u003e\u003ci\u003eNutrition data summary (scrolled)\u003c/i\u003e\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003ctable\u003e    \n\n## :rocket: \u0026nbsp; Future Scope\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.ibb.co/82PyKFw/Annotation-2020-05-09-152608.png\" height=\"500\"\u003e\u003c/p\u003e\n\nOver the past five years, the trend in adopting moble technologies shows, that industry profoundly prefers React Native over any other framework in the market. However, [Flutter](https://flutter.dev/) a similar framework from [Google](https://flutter.dev/) is also catching up. The high popularity of react native accounts from the reusability and extensibility of Javascript for both web and mobile. Business logic written in javascript can be modularised and reused accross mobile as well as web apps. However a strong architectural foundation has to be set up inorder to achieve that. One such standard architecture is called [ReactiveCore](https://medium.com/kuralabs-engineering/reactive-core-architecture-for-react-native-and-react-applications-d590daf4ef8a) architecture. \nThe proposed architecture is composed by three modules:\n\n**The core**: \n\nIncludes the business logic and the state of the application. This component is implemented using the Redux framework. Code reuse is done via this module. This is the most important module to make the Reactive Core Architecture possible. It’s the only one able to handle and mutate the application state. It’s the brain that tells the mobile and web applications how to behave and react. It's also the clear candidate to consume a REST API and process data. Since each reducer handles an specific part of the application state, it makes easier for the core module to scale for larger and more complex applications.\n\n**The mobile app**:\n\n Implemented as a standard React Native application, using containers and components.\n\n**The web application**: \n\nImplemented as a standard React application, using containers and components.\nEach module will live in its own repository, with the core as a git submodule in both applications.\n\nLet’s take a look to the architecture diagram:\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://miro.medium.com/max/1400/1*jMpdj2y5rayiwlQ8YNTs5A.jpeg\" height=500\u003e\u003c/p\u003e\n\nYou can read more about ReactiveCore Architecture from this medium article by [Carolina Aguilar](https://medium.com/@caroagse?source=post_page-----d590daf4ef8a----------------------) from [here](https://medium.com/kuralabs-engineering/reactive-core-architecture-for-react-native-and-react-applications-d590daf4ef8a)\n\nother resources:\n* [Flutter vs React Native](https://nevercode.io/blog/flutter-vs-react-native-a-developers-perspective/)\n\n## :hammer_and_wrench: \u0026nbsp; Testing\nUnit testing can be implemented using [Jest](https://www.npmjs.com/package/jest) testing library. \n\n## :gear: \u0026nbsp; Technologies Used\n\u003cimg src=\"https://i.ibb.co/dMpJ8Dn/tech-stack.png\"\u003e\n\n## :hammer: \u0026nbsp; Contributing\nPlease read [CONTRIBUTING.md](https://github.com/SandeepVattapparambil/chef-rudy/blob/master/CONTRIBUTING.md) for details on contributing to the project and [CODE_OF_CONDUCT.md](https://github.com/SandeepVattapparambil/chef-rudy/blob/master/CODE_OF_CONDUCT.md) for the process for submitting pull requests to us.\n\n## :man_technologist: \u0026nbsp; Authors\n* [Sandeep Vattapparambil](https://github.com/SandeepVattapparambil)\n\n## :scroll: \u0026nbsp; License\nMIT License\n\nCopyright (c) 2020 Sandeep Vattapparambil\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n## :handshake: \u0026nbsp; Acknowledgements\n:vulcan_salute: \u0026nbsp; [Edamam](https://www.edamam.com/) for your apis.\n\n:vulcan_salute: \u0026nbsp; [Maximilian Schwarzmüller](https://www.udemy.com/user/maximilian-schwarzmuller/) for your amazing courses on Udemy, from which I learned react native.\n\n:vulcan_salute: \u0026nbsp; [Carolina Aguilar](https://medium.com/@caroagse?source=post_page-----d590daf4ef8a----------------------) for your medium article on ReactiveCore architecture.\n\nMade with ❤️ by Sandeep Vattapparambil.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandeepv68%2Fchef-rudy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandeepv68%2Fchef-rudy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandeepv68%2Fchef-rudy/lists"}