https://github.com/andrewjbateman/angular-crud-operations

:clipboard: Angular app to store fast-food orders in a Firebase database. They are then retrieved and shown in a table on-screen
https://github.com/andrewjbateman/angular-crud-operations

angular angular16 crud crud-operations firebase firebase-database firebase10 firestore material materialize-css rxjs rxjs7

Last synced: 8 days ago
JSON representation

:clipboard: Angular app to store fast-food orders in a Firebase database. They are then retrieved and shown in a table on-screen

• Host: GitHub
• URL: https://github.com/andrewjbateman/angular-crud-operations
• Owner: AndrewJBateman
• License: mit
• Created: 2020-04-20T16:35:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-05-14T19:52:00.000Z (6 months ago)
• Last Synced: 2024-05-15T16:12:36.879Z (6 months ago)
• Topics: angular, angular16, crud, crud-operations, firebase, firebase-database, firebase10, firestore, material, materialize-css, rxjs, rxjs7
• Language: TypeScript
• Homepage:
• Size: 2.97 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# :zap: Angular Firebase CRUD

* Angular app to store fast-food orders in a Firebase database. They are then retrieved and shown in a table on-screen

* **Note:** to open web links in a new window use: _ctrl+click on link_

![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/angular-crud-operations?style=plastic)

![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/angular-crud-operations?style=plastic)

![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/angular-crud-operations?style=plastic)

![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/angular-crud-operations?style=plastic)

## :books: General info

* Firebase backend stores customer name and number and what they ordered.

## :camera: Screenshots

* ![Example screenshot](./img/checkout.png)

## :signal_strength: Technologies

* [Angular v16](https://angular.io/) javascript framework

* [Angular Material Icons](https://material.io/resources/icons/?style=baseline)

* [Materialize v1](https://materializecss.com/) front-end framework based on Material Design

* [firebase v10](https://firebase.google.com/)

## :floppy_disk: Setup

* Install dependencies using `npm i`

* Add firebase credentials to `environment.ts` files

* Make sure [Firestore Database rules](https://firebase.google.com/docs/firestore/security/get-started) will allow user access

* Run `ng serve` to get a server at `http://localhost:4200/`

* If required, run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## :computer: Code Examples

* onSubmit function to get order data from form to createOrder function

```typescript

onSubmit() {

    this.ordersService.form.value.order = this.order;

    let data = this.ordersService.form.value;

    console.log('data: ', data); // {CustomerName: Edward, orderNumber: 3, order: ["burger", "fries"]}

    this.ordersService.createOrder(data).then((res) => {

      console.log("fast food order created");

    });

  }

```

## :cool: Features

* working Firebase backend Database storage of customer orders

## :clipboard: Status & To-Do List

* Status: Working

* To-Do:  Improve: add quantity of items, clear form after use

## :clap: Inspiration

* [Dayana Jabif of Angular Templates: Angular CRUD with Firebase](https://angular-templates.io/tutorials/about/angular-crud-with-firebase)

## :file_folder: License

* This project is licensed under the terms of the MIT license.

## :envelope: Contact

* Repo created by [ABateman](https://github.com/AndrewJBateman), email: `[email protected]`