Deploy your app in 5 minutes or less — a step by step tutorial.

Image for post
Image for post
How to Deploy a React App with Firebase Hosting

Getting Started

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

Install Firebase Tools

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.

Image for post
Image for post

Introduction

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. …


Use Geohashing to retrieve nearby locations in Google’s Cloud Firestore.

Image for post
Image for post

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.

The Problem

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. …


An illustrative introduction to the Geolocation API in React Native

Image for post
Image for post

To get started using the Geolocation API in React Native, you’ll need to ensure that you have created a React Native project using react-native-cli or 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

Installation

Now that we have a React Native project set up, we’ll need to install the React Native Geolocation module and link it to our native modules. …


Ensure your users are authenticated using modern technologies like Axios, JWT, and TypeScript.

Image for post
Image for post

Ensuring a user is authenticated is an essential part of creating a modern web application. Today, we’ll be looking at a common approach using JWT access and refresh tokens with Axios. The examples will be written in TypeScript but should also work in plain JavaScript. The example code can be accessed via this code sandbox link if you are interested: https://codesandbox.io/s/react-typescript-n8hmb?fontsize=14

Installing Dependencies

Simply run npm i jsonwebtoken axios -S and if you’re using TypeScript be sure to save as a dev dependency npm i typescript -D.

Setting Up the Auth Utility

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. …


Understanding the power of useCallback and useMemo

Image for post
Image for post

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. …


Forget let and var, just use const.

Image for post
Image for post

In JavaScript, we have 3 different keywords that we can use to declare variables: let, var, and const. Today, I am going to show you that you should only ever need to use const.

Why not var?

The var keyword has been around ever since the beginning of JavaScript. Variables declared with 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. …


Sharing my experiences and tips to help you get started.

Background

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.

Image for post
Image for post
Image by StartupStockPhotos from Pixabay

Before We Begin

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. …


How to model your data to work with Amazon Web Services’ NoSQL based DynamoDB.

Image for post
Image for post

Why NoSQL?

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.

Why DynamoDB?

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. …


How to set up analytics tracking in React.js with Google Analytics.

Image for post
Image for post

Overview

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.

Image for post
Image for post

About

Jake Richards

Hey, I’m Jake — a Software Engineer. My passion is transforming ideas into reality through coding.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store