AndrewJBateman / angular-firebase-access

:clipboard: Angular with Firebase backend for CRUD operations on blog posts

⚡ Angular Firebase Access

• Angular app using Firebase tools to access a Google Cloud Firestore
• With a Google login or other auth setup it is possible to Create, Read, Update and Delete blog posts.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Allows access to create, read, update & delete Firebase posts

📷 Screenshots

• 

📶 Technologies

• Angular v16
• Firebase v9 Cloud storage and authentication. Do not update to v10.
• Firebase Tools v9 CLI used to manage a Firebase project
• Angular/fire v7 Angular library for Firebase
• RxJS v7 Reactive Extensions Library for JavaScript

💾 Setup

• Install dependencies using npm i
• 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 ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
• Run ng update to update Angular

💻 Code Examples

• functions from post.service.ts to get all posts and a selected post.

getPosts = async (): Promise<any> => {
    let postsArray = [];
    const postCollectionRef = collection(db, "posts");
    const querySnapshot = await getDocs(query(postCollectionRef));
    querySnapshot.forEach(doc => {
      alert;
      postsArray.push({ id: doc.id, ...doc.data() });
      postsArray.sort((a, b) => b.published - a.published);
    });
    return postsArray;
  };

  showFullPost = (post: Post): void => {
    this.currentPost = post;
    this.router.navigate(["/post-detail"]);
  };
  

🆒 Features

• HTML template uses the Angular async pipe to subscribe to the posts Observable and to unsubscribe automatically in the onDestroy lifecycle, avoiding memory leaks.

📋 Status & To-Do List

• Status: Working
• To-Do: Add tabs for posts categories

👏 Inspiration

• Blog post images from Unsplash - only key words used now

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [e-mail]