In this tutorial, I will be demonstrating how you can deploy your React app using Firebase Hosting. I will assume that you already have a Firebase project set up. If you do not, you can create one using the Firebase Console.
You will also need to ensure have a React app created. For this, I will use Create React App. You can create a new React app by running the following:
npx create-react-app firebase-hosting-demo
Next, you will need to install the firebase tools that will allow you to deploy your app. You can install the tools by running the following:
npm install firebase-tools…
Leveraging the power of React hooks to combine the real-time advantages of Cloud Firestore with the state management power of Redux.
In this post, I will dive into how you can connect Firebase, specifically Cloud Firestore, to your React + Redux application. I am also using TypeScript because it has a lot of advantages when used with React and Redux. If you are interested in learning how you could structure a React + Redux + TypeScript application, this post will be of great value to you.
The general idea and architecture behind this post is to set up subscriptions to documents and collections in our React components and register action creators to be fired when data is created, updated, deleted, etc. …
Querying for nearby places is an almost essential feature to many web and mobile applications. Let’s dive into how you could implement this feature with Google Cloud Firestore.
Typically when searching for nearby locations, you would need to create a range of latitude and longitude coordinates that could be used to capture a list of restaurants, stores, etc. However, Cloud Firestore queries can only perform range filtering on a single field. This means that we are unable to query on both latitude and longitude as separate fields. So, can we combine them?
Yes, and luckily an algorithm for this already exists! Someone else has already solved this problem for us — it’s called Geohashing. …
To get started using the Geolocation API in React Native, you’ll need to ensure that you have created a React Native project using
expo-cli. If you haven’t already, you can create a new app using the
react-native-cli by doing the following.
Installing the React Native CLI via npm:
npm i -g react-native-cli
Creating a new React Native project:
react-native init geolocation-project
npm i jsonwebtoken axios -S and if you’re using TypeScript be sure to save as a dev dependency
npm i typescript -D.
To create some reusable functions that interact with the browser localStorage API and our JWT logic we’ll set up an authentication utility file,
auth.ts. This will house the logic for determining whether or not a user is authenticated before we execute an API call. This file will also provide functions that give us access to retrieving and setting the access and refresh tokens when they need to be updated. …
When developing your React application, there comes a time when you need to start thinking about how to optimize for performance. For some smaller, less complex applications, performance may never become an issue. But for the vast majority of medium- to large-scale React apps, slow performance can be a serious problem. Let’s dive in and discuss the most common scenarios that may be bogging down the performance of your app.
There are two major reasons for slow performance in React — unnecessary re-renders and doing too much (computational) work in your components. …
const. Today, I am going to show you that you should only ever need to use
var have function scope. This means that they can be accessed anywhere inside of the function block.
This function will successfully log the animal noise to the console. Notice how we are able to access the
noise variable outside of the if/else block where it is declared. …
I created my first website about 7 years ago. I have been on and off web developing ever since then and I am sharing this post with you because these are the things that I wish I knew when I was just starting. I believe that these 3 things would’ve allowed me to become a better developer much more quickly than my slow 7-year progression.
It is important to note that even if you don’t understand any of what I’m about to talk about, it’s okay! Nobody does until they take the time to learn. …
Nowadays, storage is cheap and computational power is expensive. NoSQL leverages this fact and sacrifices some storage space to allow for computationally easier queries. Essentially, what this means is that when designing your NoSQL data model, you will need to always be thinking of ways to simplify your queries to your database. When used correctly, NoSQL can be a much more cost-effective solution than a relational database.
Amazon DynamoDB is a key-value and document database that is fully managed, multi-region, and autoscaling so that you don’t have to worry about the infrastructure or datacenter. DynamoDB also offers an “On-Demand Capacity” pricing model. …
Google Analytics provides a great dashboard with plenty of insights and reports on customer use in our applications. This information can be critical for monitoring performance, measuring growth, geolocation of users, and even user acquisition insights! It is simply one of the best, free to use website analytics tools out there. It just so happens that it is also tremendously easy to integrate with React.