Skip to content

Latest commit

 

History

History
93 lines (61 loc) · 3.15 KB

README.md

File metadata and controls

93 lines (61 loc) · 3.15 KB
Raw

Angular & NgRx Recipe Book App

Extended version of the exercise project recipe-book-app from Angular - The Complete Guide course made by Maximilian Schwarzmüller.

Live version:

https://angular-ngrx-recipe-book-app.netlify.app/

Description:

Serverless single-page application with authentication that creates & manages recipes and shopping list for recipes.

Features:

  • You can create, edit, delete, update recipes, save changes & fetch data from server.
  • You can create, edit, delete, update shopping list items - they are currently not saved to server and kept in browser only.
  • You can also send recipe ingredients to the shopping list directly to extend the shopping list.
  • It supports Authentication: Signup, Sign-in, Sign-out, Auto Sign-in and Sign-out with token expiry management.

Technologies used:

  • Angular 8.3.29 + NgRx 8.6.0
  • Bootstrap 3.4.1
  • Google Firebase realtime database as backend
  • Webpack
  • Netlify for deployment

Extended additions list:

  • Environment variable management via custom Webpack config with the help of "dotenv", "@angular-builders/custom-webpack" and "@angular-builders/dev-server" npm packages.
  • "_redirects" config for Netlify deployment.
  • More extensions in progress.

How to run with a custom Firebase realtime database

  • Take a look at the ".env.example" file. Place your "API_URL" and "API_KEY" accordingly in an ".env" file, make sure it is git-ignored properly.
  • If you need to add more environment variables, follow the convention in the "custom-webpack.config.js":
// custom-webpack.config.js

module.exports = {
    plugins: [
        new EnvironmentPlugin([
            // Insert the keys to your environment variables here.
            // Eg: API_URL="http://localhost:3000/api/v1"
            'API_URL',
            'API_KEY',
        ]),
    ],
}

How to access env variables:

// In any environment file under environment folder,
// just point via process.env.YOUR_ENV_VAR_NAME:

export const environment = {
   production: ...
   API_URL: process.env.API_URL,
   API_KEY: process.env.API_KEY
};

How-to from Angular CLI:

This project was generated with Angular CLI version 8.3.29.

Development server

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.

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/ 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.