Ionic App; Recipe App with shopping lists and cooking tips etc

Compatible with My Recipes Web

• Manage recipes
  Add, Update, Remove, ...
• Manage ingredients for recipes
  • Auto adding to all ingredient list
  • Select ingredients from list when adding a new recipe
• Menu management
  ...

Ionic Framework v3.9.2
AngularJS v5.2.11

• Solutions for Image Stretching In Flex Row
  https://codepen.io/dudleystorey/pen/pejpYW
  Place the image inside another container, and make that the flex-child
  • Recipes list in Menu detail page

• Checkbox <check-box>
  Checkboxes for showing validation status in Signup pages
• Star rate <star-rate>
  Showing or selecting stars for rate

Implemented accordion with conditional style

• Signup Allergies Page
• Preference Setting Page

<div [class.collapsed]="condition">

.collapsed {
	max-height: 0 !important;
}

• Google Firebase for backend

|
+-- allergies
|  |
|  +-- {index}
|
+-- cuisines
|  |
|  +-- {index}
|
+-- dislikes
|  |
|  +-- {index}
|    
+-- userAllergies
|  |
|  +-- {userId}
|     |
|     +-- {allergyIndex}: true
|
+-- userDiets
|  |
|  +-- {userId}
|     |
|     +-- {cuisineIndex}: true
|
+-- userDislikes
|  |
|  +-- {userId}
|     |
|     +-- {dislikeIndex}: true
|
+-- userFavouriteCuisines
|  |
|  +-- {userId}
|     |
|     +-- {cuisineIndex}: true
|
+-- users
   |
   +-- {id}

• Write Review Page

<div class="input-item">
  <ion-textarea
    name="content"
    placeholder="Write your review here"
    [style.height] = "initDone ? '100%' : 'auto'"
    [(ngModel)]="content"></ion-textarea>
</div>

ion-textarea {
  padding: 0 0 20px 0;

  textarea {
    width: 100%;
    height: 100%;
  }
}

• Google Plus v6.0.0
  Google Signin
• Facebook4 v4.0.0
  Facebook Signin
• Email Composer v0.8.15
  Report a problem in Settings

Main backend & database for the app

• Effective use of virtualScroll

The height of each item is not fixed and different