Merge pull request #33 from mobile-space/jahon_new_features

Jahon new features
mobile-space · Jun 7, 2018 · f8f027c · f8f027c
2 parents 02c2956 + 7f17901
commit f8f027c
Show file tree

Hide file tree

Showing 35 changed files with 1,209 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,89 @@
-# Chowin.. out
+# Chowin-Out
 
+<p align="center">
+  <a href="https://github.com/mobile-space/chowin-out">
+    <img alt="chowin-out" src="assets/icon.png" width="250">
+  </a>
+</p>
 
+<h3 align="center">
+  Chowin-Out mobile app
+</h3>
+
+<p align="center">
+  Chowin-Out is a your best friend to find food
+</p>
+
+<div style={{display: flex; flex-direction: row}}>
+
+<a href='https://play.google.com/store/apps/details?id=com.makkhay.chowinout&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'>
+  <img alt='Get it on Google Play' src='project-plan-files/google-play-store-icon.png'/>
+</a>
+<a href='https://github.com/mobile-space/chowin-out'>
+  <img alt='Get it on App Store' src='project-plan-files/apple-app-store-icon.png'/>
+</a>
+</div>
+
+### [Demo - Try it on Expo](https://expo.io/@jkhusanov/chowin-out)
+
+## What's Chowin-Out?
+
+**Chowin-Out is a your best friend to find food**
+
+- Users can  **discover new food around** and find a restaurant information that serves that food.
+- In addition, they can **find food based on a photo** (like Shazam, powered by Machine Learning) and **get the recipe** for that food and cook it yourself. 
+- They can also **save food** on their favorite list and **share** restaurant info or food recipe with their friends and family
+
+
+### Demo and some screenshots
+
+![Demo gif](https://github.com/mobile-space/chowin-out/blob/master/project-plan-files/Demo_iOS.gif)
+
+<div style={{display: flex; flex-direction: row}}>
+  <img src="project-plan-files/final-screenshots/1.png" width="270" />
+  <img src="project-plan-files/final-screenshots/2.png" width="270" />
+  <img src="project-plan-files/final-screenshots/3.png" width="270" />
+</div>
+<div style={{display: flex; flex-direction: row}}>
+  <img src="project-plan-files/final-screenshots/4.png" width="270" />
+  <img src="project-plan-files/final-screenshots/5.png" width="270" />
+  <img src="project-plan-files/final-screenshots/6.png" width="270" />
+</div>
+<div style={{display: flex; flex-direction: row}}>
+  <img src="project-plan-files/final-screenshots/7.png" width="270" />
+  <img src="project-plan-files/final-screenshots/8.png" width="270" />
+  <img src="project-plan-files/final-screenshots/9.png" width="270" />
+</div>
+<div style={{display: flex; flex-direction: row}}>
+  <img src="project-plan-files/final-screenshots/10.png" width="270" />
+  <img src="project-plan-files/final-screenshots/11.png" width="270" />
+  <img src="project-plan-files/final-screenshots/12.png" width="270" />
+  <img src="project-plan-files/final-screenshots/13.png" width="270" />
+</div>
+
+## Functionality
+- Chowin-Out is a fully functioning food discovery app
+- Users can get food local food based on location
+- Users can find food recipes based on photo
+- Users can like and save foods
+- Users can share information with their friends and family
+
+
+Would like to implement dynamic seasonal tab to offer users to find food based on seasonal vegetables and fruits, and overall make the app more UI friendly and functional.
+
+## Feedback
+
+In case you have any feedback or questions, feel free to open a new issues on this repo or reach out to us [**@jkhusanov**](https://github.com/jkhusanov),[**@makkhay**](https://github.com/makkhay), [**@sukhjitsingh**](https://github.com/sukhjitsingh), and [**@niszeto**](https://github.com/niszeto) on Github.
+
+## Milestones
+
+Below you can see our milestones and how we achieved them
 
-**Demo Expo**:
-https://expo.io/@jkhusanov/chowin-out
 
 ## Milestone #1
 
 ### Screenshots of UI Prototype 
-![Screenshot gif](https://github.com/mobile-space/chowin-out/blob/master/project-plan-files/onboardingScreen.gif)
+
 
 <div style={{display: flex; flex-direction: row}}>
   <img src="project-plan-files/Screenshots/Splash.png" width="270" />
@@ -45,8 +120,8 @@ https://expo.io/@jkhusanov/chowin-out
   - [x] Empty Screens
   - [x] Navigation
   - [ ] :star: **Bonus:** Redux for screens and navigation 
-- [ ] Start building prototype
-  - [ ] Get feedback
+- [x] Start building prototype
+  - [x] Get feedback
 
 
 ### WireFrames 
@@ -60,6 +135,8 @@ https://expo.io/@jkhusanov/chowin-out
 
 ![Screenshot](https://github.com/mobile-space/chowin-out/blob/master/project-plan-files/Api%20calls%20and%20main_frame.jpg)
 
+## Milestone #2
+
 ### Week 1 (Prakash's weekly progress)
 - [x] display static image in a flatlist 
 - [x] rough draft of profile screen
@@ -76,20 +153,36 @@ https://expo.io/@jkhusanov/chowin-out
 ### Week 1 (Nick's weekly progress)
 - [x] Geolocation and connected with IntroScreen and FoodScreen
 
+## Milestone #3
+
 ## Week 2 General TODO
 
-- [ ] Polish the food display screen (Jahon)
-- [ ] Restaurants list screen (Jahon)
-- [ ] Restaurant screen (Jahon)
+- [x] Polish the food display screen (Jahon)
+- [x] Restaurants list screen (Jahon)
+- [x] Restaurant screen (Jahon)
+
+- [x] Activity indicator for screens (Jahon) (Prakash)
+- [x] Polish food detail screen (Prakash)
+- [x] Async storage for intro, load once (Prakash)
+- [x] New icon (Prakash)
+
+- [x] Context API (Moni)
+- [x] EatStreet and Yummly API (Moni)
+
+- [x] Geolocation talk to EatStreet API (Nick)
+- [x] Yelp API getting restaurants from EatStreet API (Nick)
+
+## Milestone #4
+
+## Publish the app on mobile app stores
+
+- [x] Publish on [Google Play](https://play.google.com/store/apps/details?id=com.makkhay.chowinout)
+- [ ] Publish on App Store (coming soon)
 
-- [ ] Activity indicator for screens (Jahon) (Prakash)
-- [ ] Polish food detail screen (Prakash)
-- [ ] Async storage for intro, load once (Prakash)
-- [ ] New icon (Prakash)
+## Milestone #5
 
-- [ ] Context API (Moni)
-- [ ] EatStreet and Yummly API (Moni)
+## General improvements and new features
 
+- [x] Fix the bugs and improve the app
+- [x] Add magic camera for image recognition using [Clarifai](https://clarifai.com/)
 
-- [ ] Geolocation talk to EatStreet API (Nick)
-- [ ] Yelp API getting restaurants from EatStreet API (Nick)
diff --git a/app/components/FavCard.js b/app/components/FavCard.js
@@ -114,7 +114,7 @@ export default class FavCard extends React.Component {
 
 }
 const padding = 0;
-const { width } = Dimensions.get('window');
+const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
 
 const styles = StyleSheet.create({
   loadingView: {
@@ -146,7 +146,7 @@ const styles = StyleSheet.create({
     height: 56,
     paddingRight: 0,
     position: 'absolute',
-    bottom: Platform.OS === 'ios' ? width/15 : width/14,
+    bottom: Platform.OS === 'ios' ? viewportHeight/15 : viewportHeight/14,
     right: padding,
   },
 });
diff --git a/app/components/FavSlide.js b/app/components/FavSlide.js
@@ -11,6 +11,7 @@ import {
   Dimensions,
   AsyncStorage,
   DeviceEventEmitter,
+  Alert,
 } from 'react-native';
 import { Icon, Header, Button } from 'react-native-elements';
 import Carousel, { ParallaxImage } from 'react-native-snap-carousel';
@@ -21,7 +22,7 @@ export default class FavSlide extends React.Component{
   constructor(props) {
     super(props);
 
-    const { item, lat, long } = props;
+    const { item, lat, long, screen } = props;
 
     this.state = {
       isFavorited: false,
@@ -100,23 +101,25 @@ export default class FavSlide extends React.Component{
     )
   }
   render = () => {
-    const { item, lat, long } = this.props;
+    const { item, lat, long, screen } = this.props;
     const { image, name, description } = item;
     const { navigate } = this.props.navigation;
     return (
       <View style={styles.slide}>
         <TouchableOpacity
           activeOpacity={1}
           onPress={() =>
-            this.props.navigation.navigate('RestaurantsList', { foodName: item.foodName, latitude: lat, longitude: long })
+            screen === "Restaurant" ? 
+            this.props.navigation.navigate('RestaurantsList', { foodName: item.foodName, latitude: lat, longitude: long }):
+            this.props.navigation.navigate('FoodRecipe', { foodID: item.id })
           }
         >
           {this.renderImage(item.imageUrlsBySize[90])}
 
           <View style={styles.foodInteraction}> 
           <View style={styles.foodInfo}>
             <Text style={styles.foodName} numberOfLines={2}>
-              {item.foodName}
+              {screen === "Restaurant" ? item.foodName : item.recipeName}
             </Text>
           </View>
           <View style={styles.buttonContainer}>

diff --git a/app/components/OnBoard.js b/app/components/OnBoard.js
@@ -7,6 +7,7 @@ import Onboarding from 'react-native-onboarding-swiper';
 import DISCOVER from '../../assets/discover.png'
 import LOCATE from '../../assets/locate.png'
 import FAV from '../../assets/favorite.png'
+import CAMERA from '../../assets/camera1.png'
 import RECIPIE from '../../assets/recipe.png'
 import GIF from '../../assets/food.gif'
 
@@ -30,25 +31,32 @@ const OnBoard = ({navigation}) => (
 
         {
           title: 'Locate Resturant',
-          backgroundColor: '#00796B',
+          backgroundColor: '#2DCCE3',
           image: <Image source={LOCATE} style={styles.logo}/>,
           subtitle: 'We will help you find the nearest resturant',
 
-        }
-        ,
-        {
-          title: 'Get Recipe',
-          backgroundColor: '#8BC34A',
-          image: <Image source={RECIPIE}  style={styles.logo}/>,
-          subtitle: 'Learn new recipe and cook yourself',
         },
-  
+
         {
           title: 'Favorite It',
-          backgroundColor: '#D32F2F',
+          backgroundColor: '#33CCB1',
           image: <Image source={FAV} style={styles.logo}/>,
           subtitle: 'Save food to your favorite',
         },
+        {
+          title: 'Discover what is in your food',
+          backgroundColor: '#50E3C1',
+          image: <Image source={CAMERA}  style={styles.logo}/>,
+          subtitle: 'Our smart camera analyzes the ingredients! :)',
+        },
+
+        {
+          title: 'Get Recipe',
+          backgroundColor: '#2DE394',
+          image: <Image source={RECIPIE}  style={styles.logo}/>,
+          subtitle: 'Learn new recipe and cook yourself',
+        },
+
         {
           title: "Ready to Eat ?",
           subtitle: (
@@ -62,7 +70,7 @@ const OnBoard = ({navigation}) => (
 
             />
           ),
-          backgroundColor: 'white',
+          backgroundColor: '#50E3C1',
           image: (
             <Image source={GIF} style={styles.logo}/>
           ),

diff --git a/app/navigation/CameraNavigator.js b/app/navigation/CameraNavigator.js
@@ -0,0 +1,21 @@
+import { StackNavigator } from 'react-navigation';
+import CameraStack from './CameraStack';
+
+const CameraNavigator = StackNavigator({
+  CameraStack: {
+    screen: CameraStack,
+  },
+
+
+
+}, {
+    initialRouteName: 'CameraStack',
+    mode: 'modal',
+    headerMode: 'none',
+    navigationOptions: {
+      gesturesEnabled: false,
+    },
+  }
+);
+
+export default CameraNavigator;
diff --git a/app/navigation/CameraStack.js b/app/navigation/CameraStack.js
@@ -0,0 +1,32 @@
+import { StackNavigator } from 'react-navigation';
+
+import TakePictureScreen from '../screens/TakePictureScreen';
+import RecognitionResultScreen from '../screens/RecognitionResultScreen';
+import FoodListScreen from '../screens/FoodListScreen';
+import FoodDetailsScreen from '../screens/FoodDetailsScreen';
+import RecipeWebView from '../screens/RecipeWebView';
+
+const CameraStack = StackNavigator({
+  Camera: {
+    screen: TakePictureScreen,
+  },
+  RecognitionResult: {
+    screen: RecognitionResultScreen,
+  },
+  FoodList: {
+    screen: FoodListScreen,
+  },
+  FoodRecipe: {
+    screen: FoodDetailsScreen,
+  },
+  Recipe:{
+    screen: RecipeWebView,
+    headerMode: 'none',
+  },
+
+},
+  {
+    initialRouteName: 'Camera',
+  }
+);
+export default CameraStack;
diff --git a/app/navigation/HomeTabs.js b/app/navigation/HomeTabs.js
@@ -7,6 +7,7 @@ import { SimpleLineIcons, FontAwesome, MaterialCommunityIcons } from '@expo/vect
 import FoodNavigator from './FoodNavigator';
 import ProfileNavigator from './ProfileNavigator';
 import FoodChooseStack from './FoodStack';
+import CameraNavigator from './CameraNavigator';
 
 
 const HomeTabs = TabNavigator({
@@ -23,6 +24,19 @@ const HomeTabs = TabNavigator({
       )
     }
   },
+  CameraTab: {
+    screen: CameraNavigator,
+    navigationOptions: {
+      tabBarLabel: 'MAGIC CAMERA',
+      tabBarIcon: ({ tintColor }) => (
+        <MaterialCommunityIcons
+          name='camera'
+          color={tintColor}
+          size={Platform.OS === 'ios' ? 22 : 25}
+        />
+      ),
+    }
+  },
   ProfileTab: {
     screen: ProfileNavigator,
     navigationOptions: {

diff --git a/app/screens/FoodChooseScreen.js b/app/screens/FoodChooseScreen.js
@@ -155,6 +155,7 @@ export default class FoodChooseScreen extends React.Component {
           navigation={this.props.navigation}
           lat = {lat}
           long={long}
+          screen = "Restaurant"
         />
       );
     }