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.
This 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, ExpressJS, ReactJS, and MarkoJS have piqued my interest in JS world. Similarly React Native 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 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. This 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.
- Motivation
- Sample Screens
- App Demo
- Installation
- Dependency
- Backend API Server
- Design & Architecture
- App Features
- Future Scope
- Testing
- Technologies Used
- Contributing
- Authors
- License
- Acknowledgements
 |
 |
|
Splash screen |
Home screen |
Clone the repo from the url and install the dependencies
git clone https://github.com/SandeepVattapparambil/chef-rudy.git
cd chef-rudy
npm i && npm installChef Rudy app is dependent on the following packages:
-
@react-native-community/masked-view v0.1.10 : React Native MaskedView for iOS and Android. React Native MaskedView is not currently supported by Expo unless you "eject".
-
@react-navigation/native v5.2.3 : React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app.
-
@react-navigation/stack v5.2.18 : Stack navigator for React Navigation.
-
axios v0.19.2 : Promise based HTTP client for the browser and node.js
-
expo v37.0.3 : The 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.
-
expo-updates v0.1.0 : expo-updates fetches and manages updates to your app stored on a remote server.
-
react v16.9.0 : React 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.
-
react-dom v16.9.0 : This 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.
-
react-native v0.61.5 : React 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.
-
react-native-gesture-handler v1.6.1 : React 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.
-
react-native-reanimated v1.7.1 : React 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.
-
react-native-safe-area-context v0.7.3 : A flexible way to handle safe area, also works on Android and Web!
-
react-native-screens v2.2.0 : This 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.
-
react-native-svg-charts v5.4.0 : react-native-svg-charts provides SVG Charts support to React Native on iOS and Android, and a compatibility layer for the web.
-
react-native-svg-transformer v0.14.3 : React 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.
-
react-native-unimodules v0.9.0 : This 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.
-
react-native-web v0.11.7 : React Native for Web brings the platform-agnostic Components and APIs of React Native to the Web. It is used in production by Twitter Lite.
-
react-redux v7.2.0 : React 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.
-
redux v4.0.5 : Redux 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.
-
redux-thunk v2.3.0 : Redux 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.
-
rn-placeholder v3.0.0 : Display some placeholder stuff before rendering your text or media content in React Native. Compatible with Expo and react-native-web.
also the following packages are required for development:
-
@babel/core v7.8.6 : Babel 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.
-
babel-jest v25.2.6 : Jest plugin for babel. A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects.
-
jest v5.2.6 : A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects.
-
react-test-renderer v16.9.0 : This 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.
-
@types/react v16.9.23 : This package contains type definitions for React.
-
@types/react-native v0.61.17 : This package contains type definitions for react-native.
-
babel-preset-expo v8.1.0 : This 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.
-
typescript v3.8.3 : TypeScript 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.
This project uses Edamam 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. 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.
Once 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.
└───src
├───Components
│ ├───Button
│ ├───GridPlaceHolder
│ ├───ListPlaceHolder
│ └───ListPlaceHolderGraph
├───Config
├───Network
├───Redux
│ ├───Actions
│ ├───Constants
│ ├───Reducers
│ └───Store
└───Screens
├───AnalyzeMeal
├───Home
├───RecipeSearch
└───ShowRecipeManually start the packager using the following command:
npm run startStart and run your app in an Android device / AVD:
npm run androidStart and run your app in an iOS device / emulator:
npm run iosRun your app on web:
npm run webPackage and run your app on an Android/iOS device using Expo client on your device:
npm run mobileThe 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:
The redux architecture implemented here is a reduced model of flux architecture as shown below:
Once the app loads, it renders the home screen as shown below:
Users have two options to choose from:
- Recipe Search This feature allows users to search millions of recipes from around the world , and gets it comple details, including nutritional details, images etc.
- Analyze Meal This feature allows users to analyze any recipe or uts ingredients to get a complete consolidated nutritional data with charts and graphs.
|
 |
 |
|
Home screen |
Recipe search screen |
Recipe search loading for list view |
 |
 |
 |
|
Recipes in list view |
Recipe search loading for grid view |
Recipes in grid view |
 |
 |
 |
|
Recipe show screen, |
Recipe show screen, |
Recipe show screen, |
 |
 |
 |
|
Recipe show screen |
Recipes in grid view |
Recipe show screen |
|
 |
 |
|
Home screen |
Analyze Meal screen |
Nutrition data loading |
 |
 |
|
|
Nutrition data summary |
Nutrition data summary (scrolled) |
Over 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 a similar framework from Google 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 architecture. The proposed architecture is composed by three modules:
The core:
Includes 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.
The mobile app:
Implemented as a standard React Native application, using containers and components.
The web application:
Implemented as a standard React application, using containers and components. Each module will live in its own repository, with the core as a git submodule in both applications.
Let’s take a look to the architecture diagram:
You can read more about ReactiveCore Architecture from this medium article by Carolina Aguilar from here
other resources:
Unit testing can be implemented using Jest testing library.
Please read CONTRIBUTING.md for details on contributing to the project and CODE_OF_CONDUCT.md for the process for submitting pull requests to us.
MIT License
Copyright (c) 2020 Sandeep Vattapparambil
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
🖖 Edamam for your apis.
🖖 Maximilian Schwarzmüller for your amazing courses on Udemy, from which I learned react native.
🖖 Carolina Aguilar for your medium article on ReactiveCore architecture.
Made with ❤️ by Sandeep Vattapparambil.