Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andrewjbateman/angular-material-firebase

:clipboard: Angular app with Angular material components to display data stored using firebase v9
https://github.com/andrewjbateman/angular-material-firebase

angular angular-material angular-material16 angular16 crud firebase firebase9 firestore-database html5 rxjs scss-framework

Last synced: 10 days ago
JSON representation

:clipboard: Angular app with Angular material components to display data stored using firebase v9

Host: GitHub
URL: https://github.com/andrewjbateman/angular-material-firebase
Owner: AndrewJBateman
Created: 2022-01-12T09:28:41.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2023-06-01T07:07:58.000Z (over 1 year ago)
Last Synced: 2024-11-07T03:32:36.096Z (2 months ago)
Topics: angular, angular-material, angular-material16, angular16, crud, firebase, firebase9, firestore-database, html5, rxjs, scss-framework
Language: TypeScript
Homepage:
Size: 2.53 MB
Stars: 1
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # :zap: Angular Material Firebase

* Creates, Reads, Updates & Deletes (CRUD) data stored in [Google Firestore](https://firebase.google.com/)

* Uses [Angular Material design library](https://material.angular.io/) components; mat-table, mat-card and mat-form etc.

* **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-material-firebase?style=plastic)

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

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

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

## :page_facing_up: Table of contents

* [:zap: Angular Material Firebase](#zap-angular-material-firebase)

  * [:page\_facing\_up: Table of contents](#page_facing_up-table-of-contents)

  * [:books: General info](#books-general-info)

  * [:camera: Screenshots](#camera-screenshots)

  * [:signal\_strength: Technologies](#signal_strength-technologies)

  * [:floppy\_disk: Setup](#floppy_disk-setup)

  * [:computer: Code Examples](#computer-code-examples)

  * [:cool: Features](#cool-features)

  * [:clipboard: Status \& To-Do List](#clipboard-status--to-do-list)

  * [:clap: Inspiration](#clap-inspiration)

  * [:file\_folder: License](#file_folder-license)

  * [:envelope: Contact](#envelope-contact)

## :books: General info

* Project data stored in Firestore NoSQL database as a collection named "projects"

* [ngx-toastr](https://www.npmjs.com/package/ngx-toastr) used to display status info. popups

* [Material Dialogs](https://material.angular.io/components/dialog/overview) used to open modals for create, edit & delete projects.

* [Angular Material custom theme](https://material.angular.io/guide/theming#defining-a-theme)

* [Strictly typed forms in Angular](https://blog.ninja-squad.com/2022/04/21/strictly-typed-forms-angular/)

## :camera: Screenshots

![Example screenshot](./imgs/home.png)

![Example screenshot](./imgs/dark.png)

## :signal_strength: Technologies

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

* [Angular Material v16](https://material.angular.io/)

* [RxJS v7](https://rxjs-dev.firebaseapp.com/guide/overview)

* [firebase v9](https://www.npmjs.com/package/firebase)

* [Angular Reactive Forms](https://angular.io/guide/reactive-forms) used with a FormBuilder service & [form validation](https://angular.io/guide/form-validation) to handle form inputs as a group

* [ngx-mask v16](https://www.npmjs.com/package/ngx-mask) for masking of project date, access-code etc.

## :floppy_disk: Setup

* Install dependencies using `npm i`

* Add firebase credentials to `environments` files

* 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 `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.

## :computer: Code Examples

* Function to fetch the projects collection from a Google Firestore NoSQL database and order by date

```typescript

getProjects = (): Observable[]> => {

  return this.firebase

    .collection("projects", ref => ref.orderBy("createdDate"))

    .snapshotChanges();

};

```

## :cool: Features

* Code to perform CRUD operations on a Firestore NoSQL database is quite simple

## :clipboard: Status & To-Do List

* Status: Working

* To-Do: Add form types, correct form so fields are not red after complete form submitted and form is reset. Deploy, change project add/edit form to a dialog, add transloco, SSR, PWA. Add form types in `createdit.component.ts`

## :clap: Inspiration

* [Daniel Kreider: Angular Project Structure Best Practices](https://danielk.tech/home/angular-project-structure-best-practices)

* [Angular Material Darkmode in 3 Steps](https://zoaibkhan.com/blog/angular-material-dark-mode-in-3-steps/)

## :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]`