AndrewJBateman / angular-tutorial-recipe-shopping

:clipboard: Angular course from Udemy - project to create an app with a recipe book and shopping list

⚡ Angular Tutorial Recipe Shopping

• An Angular 8 project to display a list of recipes and to store the data in a google Firestore database with full Create, Read, Update and Delete functionality from the UI.

*** Note: to open web links in a new window use: ctrl+click on link**

📄 Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

📚 General info

The course project is a recipe/shopping list app and it takes input from the following sections of the course:

• Section 6: Components and data-binding: *ngIf, *ngFor
• Section 8: Directives: shared folder created, dropdown directive created.
• Section 10: Services: recipe.services ile created. Using a Service for Cross-Component Communication. Using services for pushing data from A to B.
• Section 12: Routing.
• Section 14: Observables.
• Section 16: Forms.
• Section 19: Http.

📷 Screenshots

. .

📶 Technologies

• Angular v8
• Angular CLI v8.
• Firebase v6
• Reactive Extensions for Javascript -RxJS v6 library used for reactive programming using the observable type.

💾 Setup

• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
• Run ng test to execute the unit tests via Karma.
• Run ng e2e to execute the end-to-end tests via Protractor.

💻 Code Examples

• Recipe detail template.

<!-- Display recipe image -->
<div class="row">
  <div class="col-xs-12">
    <img
      [src]="(recipeState | async).recipes[id].imagePath"
      alt="{{ (recipeState | async).recipes[id].name }}"
      class="img-responsive"
      style="max-height: 300px;">
  </div>
</div>

<!-- display recipe name as heading -->
<div class="row">
  <div class="col-xs-12">
    <h1>{{ (recipeState | async).recipes[id].name }}</h1>
  </div>
</div>

<!-- dropdown button menu with 3 options listed -->
<div class="row">
  <div class="col-xs-12">
    <div
      class="btn-group"
      appDropdown>
      <button
        type="button"
        class="btn btn-primary dropdown-toggle">
        Manage Recipe <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a (click)="onAddToShoppingList()" style="cursor: pointer;">To Shopping List</a></li>
        <li><a style="cursor: pointer;" (click)="onEditRecipe()">Edit Recipe</a></li>
        <li><a style="cursor: pointer;" (click)="onDeleteRecipe()">Delete Recipe</a></li>
      </ul>
    </div>
  </div>
</div>

<!--  display recipe description and list of ingredients - name and amount -->
<div class="row">
  <div class="col-xs-12">
    {{ (recipeState | async).recipes[id].description }}
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <ul class="list-group">
      <li
        class="list-group-item"
        *ngFor="let ingredient of (recipeState | async).recipes[id].ingredients">
        {{ ingredient.name }} - {{ ingredient.amount }}
      </li>
    </ul>
  </div>
</div>

🆒 Features

• Possible to add recipes to a recipe list, with a description, list of ingredients and an image.
• Firebase database store of recipes and recipe details.

📋 Status & To-Do List

• Status: Registration/Login works with username and password stored in Firebase project user database.
• To-Do: Complete testing. Document code and improve README file.

👏 Inspiration

• All code is from Maximilian Schwarzmüller's Angular 7 course

✉️ Contact

• Repo created by ABateman - feel free to contact me!