Recipe-book

A mobile responsive Angular app for storing recipes and adding their ingredients to a shopping list. Live app: https://ng-recipe-book-e0f27.web.app/.

Table of contents

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

General info

This project was coded to learn Angular from scratch. The state management is done with observables and services, known as facade pattern.

Screenshots

Image#1: Login

Image#2: Recipes

Image#3: Edit recipe

Image#4: Edit recipe

Image#5: Manage recipe

Image#5: Shopping List

Technologies

• Angular - version 9.1.0
• Firebase RealTime Database

Setup

Clone or download the repo.

Install all the dependencies listed on thepackage.json file by running:

npm install

Run the Angular app in the development mode.

In the project directory, you can run:

ng serve

Open http://localhost:4200 to view it in the browser.

The page will reload if you make edits.

You will also see any lint errors in the console.

Code scaffolding

Run

ng generate component component-name

to generate a new component. You can also use

ng generate directive|pipe|service|class|guard|interface|enum|module

Build

Run

ng build 

to build the project. The build artifacts will be stored in the dist/recipe-book directory. Use the --prod flag for a production build.

Running unit tests

Run

ng test

to execute the unit tests via Karma.

Running end-to-end tests

Run

ng e2e

to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Features

List of implemented features:

• Authentication
• Form validation
• Create and read operations to/from Firebase RealTime Database.
• Lazy loading
• Nested routes
• Pass data with route parameters

List of possible improvements:

• Automatically read the data from the database after being logged in, and also automatically create new recipes and update changes made to them , without the need of clicking the fetch and save buttons from the Manage dropdown menu.
• Store each user's recipes and shopping list items in a separate collection, because now it's a shared database between all users.

Status

Project is finished.

Inspiration

This project was based on this course.

Contact

Created by Esteban Munch Jones- feel free to contact me.