Recipe Book

---

What is it?

A responsive Single Page Application (SPA), written in Angular v4.0, to store personal recipes. The Recipe Book website allows recipes to be added, edited, or deleted; individual ingredients are also managed. Images of the recipe can be specified as a URL, no uploading at the moment. Recipe ingredients can be added to a separate Shopping List page. Items can be added, edited, or deleted on the Shopping List page.

All of this data is stored in a Firebase database. Authentication to the database is controlled using Google as an OAuth 2.0 provider. Once user's login, they can get and set data in the database.

This project was generated with Angular CLI. The HTML/CSS templates utilize Bootstrap version 3.3.7 for styling.

Installation

1. Download and install Node.js using these instructions.

2. Download and install GitHub Desktop using these instructions

3. Clone this repository using the instructions from GitHub

   • Ensure you use command: git clone https://github.com/ZGrauer/recipe-book.git

4. Install all dependencies by entering npm install from a terminal within the cloned folder.

5. Go to console.firebase.google.com/ and Create New Project using this guide.

6. Go to your project file /src/index.html, and update the Firebase var config values within the <script> tag starting on line 24. This will setup the connection to your database.

7. Edit Angular files as needed within the ./src/app/ folder. Use the Angular CLI to add components.

Development server

Be sure to update the Firebase configuration settings in /src/index.html before running ng serve.

    <script src="https://www.gstatic.com/firebasejs/3.7.1/firebase.js"></script>
    <script>
        // Initialize Firebase
        // TODO: Replace with your project's customized code snippet
        var config = {
        apiKey: "<API_KEY>",
        authDomain: "<PROJECT_ID>.firebaseapp.com",
        databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
        storageBucket: "<BUCKET>.appspot.com",
        messagingSenderId: "<SENDER_ID>",
        };
        firebase.initializeApp(config);
    </script>

Run ng serve in a terminal from the project directory for a dev server. The app can then be run by navigating to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    $ ng serve

Code scaffolding

From a terminal run ng generate component component-name to generate a new component using the Angular CLI. You can also use ng generate directive/pipe/service/class/module.

    $ ng generate component component-name

Build

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.

    $ ng build

Further help

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

    $ ng help

Todos

• Add user authentication and authorization via Google OAuth 2.0
• Guard paths/routes based on user
• Add authorization & authentication to recipe CRUD operations

License

GNU GENERAL PUBLIC LICENSE