Firebase – View Images in List/ Tile/ Fullscreen in Angular

In this tutorial, we will be discussing how to implement file upload in an Angular application using Firebase as the backend. We will also be covering how to create a gallery style view for the uploaded files, with the ability to toggle between list and tile view, and add a fullscreen view. Additionally, we will be implementing a feature to delete the uploaded files. This tutorial will provide a detailed guide on how to implement these features, with example code and explanations of how each component works. By the end of this tutorial, you will have a good understanding of how to implement file upload and gallery functionality in an Angular application using Firebase.

Read more

Angular + Firebase – Single or Multiple File Upload Drop or File Select

In this tutorial, we will be discussing how to implement file upload in an Angular application using Firebase as the backend. We will be covering both single and multiple file uploads, as well as the ability to upload files via drag-and-drop or by selecting them through a file dialog.

We will be using the AngularFire2 library, which is the official library for Firebase in Angular, to handle the communication between the Angular application and Firebase.

Read more

React Firebase Todo App & Deploy on Firebase Server – CRUD Action Tutorial with Example

In this guide, we are going to discuss how to create a real-time Todo application by combining React and Firebase. The React Firebase Todo App will allow users to add, list, update, and delete todos directly to the NoSQL database provided by Firebase.

Firebase is a popular platform which provides a number of cloud-based services and features like real-time databases, authentication services, crash analysis, and hosting. In this tutorial, we will focus on using the NoSQL database and hosting service provided by Firebase.

In our React Firebase Todo List application, we will enable users to perform CRUD (Create, Read, Update, and Delete) operations in real-time which will make our Todo App React Firebase highly interactive and user-friendly.

We will use the material UI and Icons in our Todo application. Material UI helps to quickly style the application and beautify the components like form fields, buttons, modals grids etc. This will make out Firebase React todo application not only functional but also visually good.

So, let’s dive into the world of React Todo Firebase and start building our interactive, real-time Todo application.

Read more

React Sign In using Firebase Google Authentication

ReactJs Sign-In forms Integration with Firebase services to enable a user to sign-in using Google Authentication. We are focusing on how to make them work with a perspective of a real-world large project.

Firebase is a group of powerful services that are provided by Google. It is consists of many awesome features that can be used for testing, no-SQL databases, Social and non-social authentication, machine learning, hosting etc.

In this tutorial, we will only have a look at Firebase integration with ReactJs application and Google Authentication.

Read more

How to Deploy Angular Project Production in Firebase Hosting

In this tutorial, we will discuss how to easily deploy Angular 9/8 production applications on Firebase hosting.

Firebase provides many cloud-based services which prove very helpful to optimize and standardize application development process including Authentication, Realtime Database, Storage, Analytics, Performance Quality, A/B Testing, Cloud Messaging, and Hosting.

The hosting is our target of discussion today on which we are going to host an Angular production version so that it can be available publically around the world. It is a  free as you go service with fair unlimited usages. We can easily host small applications and sample projects to share with others. Firebase operations can be done from its CLI tool, which makes it straightforward to use any of its services.

Read more

AngularFire2 + FireStore | Pagination with Next & Previous in Tabular Form Example

FireStore is a Firebase service which provides NoSQL Cloud Database solutions. We can easily use Firebase SDK’s to use a number of services on Android, IOS and even on We Application.

In this tutorial, we will learn how to integrate FireStore service in Angular 8 application and how to store data in the FireStore cloud database using Firebase JavaScript SDK. For Angular, we will use Firebase’s official package to use its services in Angular project known as AngularFire2.

Our tutorial example Application will have a form to submit values in FireStore and a Table to list items from the database. We will implement FireStore Query methods to load data in chunks from database using limit, there will be two buttons to load Next and Previous set of records.

Read more

Ionic 5 Image Upload in Firebase with Progress Percentage Bar Tutorial

In this Ionic 5/4 tutorial, we will integrate Firebase services and see how to upload images in Ionic application with a progress bar indicator on the Firebase database.

As we all know Firebase provides an awesome package of cloud services making the life of developers very easy. There is a wide range of tools available for next-level app development like Authentication, Testing, Analytics, Storage, Database, etc.

In this post, we will create an Ionic Application with Image Upload feature with the Progress bar. It will also list already saved of Images. This application will focus on the two most important services of Firebase

Read more

Angular 9|8 CRUD Operations using Firebase and Firestore Database in Angular Application Tutorial

In this post, we will implement the Firebase database in Angular 9 project. Firebase provides a cloud-based service Firestore, it is a NoSQL database that is very fast and easy to create and maintain.

In our example app, we will have Database CRUD operations which are commonly known as Create, Delete, Update, and Delete. These are the basic database operation which is used in most of the real-world application. To keep out app simple to understand we will not have routing.

Read more

Ionic 5|4 CRUD Operations Using Firebase with Firestore NoSQL Database Tutorial in Ionic Angular Application

In this Ionic 5 tutorial, we’ll integrate Google’s Firebase and use NoSQL database service Firestore to perform CRUD operation by creating a Student Resister application.

The Firestore is a cloud-based Realtime NoSQL database service provided by Firebase. We’ll integrate Firestore services in an Ionic application and build a Student Register application and perform CRUD (Create, Read, Update and Delete) operations.

In a traditional SQL based Relational Database Management system works with Tables and Rows, but in a NoSQL database like Firestore, we work with Collections and Documents. In a NoSQL, database information is saved and fetched in the form of JSON objects.

Read more

Ionic 3 Adding Bug and Crash Reporting System Crashlytics in Ionic Native 3.X

Firebase Crashlytics service is widely used these days by many developers, it helps in reporting crash, bug, and error reporting in your dashboard. This helps a lot to know the reasons behind application crashes and improving user experiences. Firebase Crashlytics is now only used in Native applications, In this tutorial, we will implement to Cordova plugin in Ionic 3 application providing close enough automation in Crash reporting.

Read more

Implement Realtime Firebase Database in a Webpage from Scratch

Firebase Real-time Databases use WebSockets to keep an eye on data changes on the server side and those changes are reflected in real time on the client side. Here we will create a simple example webpage using Firebase Real-time Database, this will be a “Hello World” type example explaining the basic method to read write and update methods available. Firebase real-time database service provides free of cost from firebase up to certain limits which you can check on their available plans.

Read more

Resolved! FirebaseInstanceIdService is deprecated

So after updating the version of firebase-messaging in the build.gradle file from v17.0.0 to v17.1.0, strange things started happening…

there was a line of horror in service I used to use for messaging in my application. After some research, I landed on this page.

Let’s quickly go to updates which we need to do to get it working like before.

Read more