andrewjbateman / angular-akita-firebase

:clipboard: CRUD app using Akita state management to access Firebase data

⚡ Angular Akita Firebase

• Angular app using Akita state management and Create, Read, Update & Delete (CRUD) functions to interface with a Firebase database. Tutorial code from Aldo Caamal with some updates - see 👏 Inspiration below
• Note: to open web links in a new window use: ctrl+click on link

*** Note: to open web links in a new window use: ctrl+click on link**

📄 Table of contents

• ⚡ Angular Akita Firebase
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Akita used to create the posts.store.ts - an Akita Entity Store of single objects that is the single source of truth
• Akita is not being maintained and they themselves recommend using an equivalent reactive store 'https://ngneat.github.io/elf/'

📷 Screenshots

📶 Technologies

• Angular framework v15
• Google Firebase v9
• @ngneat operator until-destroy v9 replaces ngx-take-until-destroy to unsubscribe from observables when component destroyed, instead of using Angular ngDestroy lifecycle
• Akita State Management for JS v7
• Akita Ng Entity Service v7
• akita-ng-fire v6 to simplify the connection between Akita and Firebase.
• Typescript Partials used to construct types with all properties set to optional.

💾 Setup

• Run npm i to install dependencies.
• Add to environments/environment.ts: Firebase realtime database access credentials
• 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 for a production build with css purging.
• Run http-server to view build on an apple/android phone or simulator (pick 2nd http address supplied)
• The build artifacts will be stored in the dist/angular-akita-firebase directory.

🔧 Testing

• Run ng test to run Jasmine unit tests via Karma.
• Run ng e2e to execute the end-to-end tests via Protractor.

💻 Code Examples

• posts.service.ts function to load post to Firebase database while showing percentage progress

  async add(post: Post, files: any) {
    await this.uploadImage(files);

    let newpost = {
      title: post['title'],
      content: post['content'],
      cover: this.downloadURL,
      fileref: this.filepath,
    };

    let p = await this.firestore.collection('posts').add(newpost);
    this.setPercentage(null);
  }

🆒 Features

• Uses Akita state management, built on top of RxJS data streams to create an Observable Data Store model.

📋 Status & To-Do List

• Status: Working. Add Firebase authentication to access database - bypassed by setting access to 'true' in Firebase rules
• To-Do: Nothing

👏 Inspiration

• Aldo Caamal: Youtube: Simple Posts App using Angular 9, Akita State Management & Firebase #1 ( Setup )
• 10 Reasons Why You Should Start Using Akita as Your State Management Solution
• Free svg site for free svgs

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [email protected]