Search Lessons, Code Snippets, and Videos
search by algolia

Lessons

You have unlimited access as a PRO member

You are receiving a free preview of 3 lessons

Your free preview as expired - please upgrade to PRO

Our collection of full lessons with videos covering various topics in app development, including Angular 5.x, Firebase, and API integrations.

Cloud Scheduler for Firebase Functions

Use the Google Cloud Scheduler to create cron jobs that run Firebase Cloud Functions on a time schedule.

148

Testing Firestore Security Rules With the Emulator

Learn how to use the new Firestore emulator to write unit test for your security rules.

147

How to Use Git and Github

Learn the basics of Git and Github (and some pro tips) by creating your first pull request.

146

Infinite Virtual Scroll With the Angular CDK

Build an Infinite Virtual Scroll with the Angular CDK

145

Build a Group Chat With Firestore

Learn how to model data for a Firestore group chat and build it from scratch with Angular.

144

Async Await Pro Tips

Write beautiful code with the async-await syntax for JavaScript Promises.

143

Sortable Drag and Drop Lists in Firestore

Use Angular and @shopify/draggable to build a sortable list with backend persistence in Firestore

142

Machine Learning Engine Tutorial

Learn how to build an machine learning API from scratch with Datalab, ML Engine, and Firebase.

141

Code This Not That - JavaScript Pro Tips

Top Ten Pro Tips for the Modern JavaScript Coder

140

Hold-to-Delete Angular Directive With RxJS and Firestore

Prevent accidental data deleting by implementing a hold-to-delete button with RxJS, Angular Directives, and Firestore.

139

Google Calendar API With Firebase

Retrieve and create Google Calendar events for your Firebase users.

138

Topic-Based Web Notifications With Ionic4 and Cloud Messaging

Send topic-based push notifications on the web with Firebase Cloud Messaging (FCM), Callable Cloud Functions, and Ionic 4

137

How to Structure a Large JavaScript Project

Strategies for structuring complex fullstack web apps with multiple NPM packages

136

Ionic 4 Routing and Navigation Guide

Learn routing and navigation basics in Ionic v4 using the Angular Router.

135

Deploy Multiple Sites to Firebase Hosting

Learn how manage multiple sites from a single Firebase project

134

Join Collections in Firestore

Learn how to leverage RxJS to perform SQL-like JOIN queries in Firestore on collections and documents

134 pro

Custom RxJS Operators by Example

Examples of custom RxJS Pipeable Operators that reuse code and perform advanced logic on Observable streams.

133

Introduction to RxFire - RxJS for Firebase

Take an early look at RxFire - A new official library from Firebase providing RxJS bindings for realtime streams.

131

How to Use Puppeteer With Firebase Cloud Functions

Use puppeteer in Firebase Cloud Functions to perform serverside rendering of web applications.

130

Ionic Intro Slider for New Users

Build a slider tutorial in Ionic 4 to educate new users how to use your app.

129 pro

Ionic 4 CSS Variables - Build a Dynamic Theme Generator

Build a dynamic theme generator and animation controller in Ionic 4 using CSS4 variables

128

Angular Console Quick Start Guide

Learn how to use the Angular Console to cut down development time in a CLI project.

127

Image Resizing With a Firebase Cloud Storage Function

Build a high-performance image thumbnail generator using a Firebase Storage Cloud Function and Sharp.

126

How to Manage Costs in Firebase

Learn how to minimize cloud computing costs in Firestore with both clientside and serverside strategies.

125

How to Query an Array in Firestore

Learn how query all documents that contain a specific value in an array.

snippet

Should You Use Ionic 4?

Learn about the changes and Ionic 4 and decide if it is suitable for building your mobile app.

123

Build Reactive Angular CDK Data Tables

Learn how to build powerful data tables that handle data reactively via the power of RxJS

122

Metered Stripe Subscription Billing

Build your own metered SaaS product with Stripe Billing and Firebase

121

Realtime GeoQueries With Firestore

Perform geospatial queries in Firestore based on a radius and visualize realtime updates with Angular Google Maps.

120

Apollo Angular Boost GraphQL Tutorial

Learn how to use Apollo Angular to make GraphQL queries and perform optimistic updates.

119

Redux From Scratch With Angular and RxJS

Build a redux-style state management library in Angular from scratch with RxJS

118

Cypress.io - Angular End-to-End Testing Tutorial

Perform end-to-end testing in Angular with Cypress.io

117

Angular Components - Ten Basic Concepts

Top ten basics concepts to understand about components in Angular v6

116

Continuous Integration and Delivery for Angular Firebase Apps

Learn DevOps by setting up Continuous Integration and Deployment CI/CD for Angular and Firebase Cloud Functions with CircleCI

115 pro

Apollo Server and GraphQL on Node.js Tutorial

Learn how to build a GraphQL API using ApolloServer 2.0 and Firestore

114

Angular Router Basics

Everything you ever wanted to know about the Angular Router, Navigation, and Guards

113

Top Ten Visual Studio Code Pro Tips

Ten Ways to Boost Productivity with VSCode Extensions

112

How to Test Firebase Cloud Functions With Jest

Learn how to apply test-driven development to your Firebase Cloud Functions environment with Jest and TypeScript.

111 pro

Airtable Firestore Customer Relationship Management

Build a customer relationship management CRM Tool with Airtable and Firebase

110

Algolia Firestore QuickStart With Firebase Cloud Functions

Give your Firestore database the power of full-text search with Algolia and automatically index new data with Cloud Functions.

109

Advanced Reactive Forms Techniques With Firestore

Build reactive forms that preload and autosave data with Firestore

108 pro

Angular Reactive Forms Basics Guide

Master the basics of Reactive Forms in Angular by building five different forms from scratch.

107

Angular Universal SSR Prerendering With Firebase Hosting

Make your Angular v6 app SEO-friendly with server-side prerendering and deploy it to Firebase hosting, S3, or any static host.

106 pro

Google Assistant Developer Quick Start

Learn how to build apps and actions with Google Assistant, Dialogflow, and Firebase

105

Angular CLI Basics Guide

Master the basics of the Angular v6 CLI

104

Build an Angular Library With NgPackagr

How to build your own Angular library and publish it to NPM with NgPackagr

103 pro

Angular Elements Quick Start Guide

Get up started with Angular Elements by building an custom component with Firebase

102

Scheduled Cloud Function Tasks and Cron Jobs in Firebase

Build a task queue for scheduling recurring time-based background processes in Firebase.

101 pro

Ask Me Anything Episode 100

NgConf highlights and random questions for AMA April 2018

100

Server Side Rendering Firebase Angular Universal

Step-by-step server-side rendering guide for Angular Universal and AngularFire2

99

NGXS Quick Start Tutorial

Learn how to use NGXS to implement a redux-style state management system in your Angular app.

98

TensorFlow.js Quick Start Tutorial

Get started with TensorFlow.js by building machine learning models in an Angular app.

97

Capacitor - Five Apps in Five Minutes

Build a PWA, iOS, Android, Mac, and Windows Desktop app with a single codebase using Capacitor.

96

CSV to Firestore - Build a Firebase Admin Command Line Utility

Build your own Node CLI utility that will import data from a CSV file to Firestore

95 pro

Passwordless Authentication With Firebase for Web Apps

How to implement passwordless email-link authentication with Firebase and Angular

94

Ionic Native With Firebase FCM Push Notifications

Send push notifications with Ionic Native using Firebase Cloud Messaging (FCM).

93

Firestore Security Rules Guide

Learn how to hack a Firebase app, then protect your Firestore database with sophisticated security rules.

92 pro

The Ultimate Beginner's Guide to Firebase

In this episode we go back to the basics and play with Firebase using plain JavaScript.

91

Ionic Google Login With Firebase and AngularFire

Firebase Google OAuth login with Ionic 3 and Ionic 4 for iOS and Android.

90

Typeahead Autocomplete With Firestore

Build a typeahead autocomplete search form with Firestore by implementing advanced data querying methods.

89 pro

Ionic Splash Screen Animation

Learn how to customize and animate the Ionic splash screen for iOS and Android devices.

88

Angular Reactive Forms Async Validation With Firebase

Build a custom validator with Angular Reactive Forms that interacts asynchronously with the Firestore database to enforce uniqueness.

87

Advanced Data Modeling With Firestore by Example

Learn how to deal with the challenges of relational data modeling in NoSQL with advanced techniques in Firestore.

86 pro

Firestore NoSQL Relational Data Modeling

Structure your Firestore Database relationships with practical real-world examples aimed at SQL Developers

85

Advanced Cloud Vision OCR Text Extraction

Advanced Google Cloud Vision API techniques with Node.js Firebase Cloud Functions

84 pro

Google Cloud Vision With Ionic and Firebase - Not Hotdog App

Learn how to build the Not Hotdog app (Silicon Valley) using Ionic, Firebase, and Google Cloud Vision.

83

Firebase Storage With AngularFire - DropZone File Uploader

Learn how to upload and download files to Firebase Storage with AngularFire by building a drag and drop file uploader from scratch.

82

Payment Request API With Stripe Elements

Use the Payment Request API to eliminate checkout forms in your Progressive Web App.

81

Delete Firestore Collections With Angular and RxJS

Learn how to delete collections in Firestore with Angular and RxJS using recursive Observable calls.

80 pro

Shorten TypeScript Imports in an Angular Project

Learn how to use TypeScript path mapping to organize imports in your Angular Project to reduce annoying boilerplate code.

79

Mobile Touch Animation With HammerJS and Angular

Animate mobile touch gestures using HammerJS and Angular Animations.

78

Coinbase OAuth With Firebase - Build Bitcoin Apps

Authenticate Firebase users with Coinbase to manage crypto currency wallets like Bitcoin and Ethereum.

77

Material Data Tables With Firestore

Learn how build a realtime Angular Material data table with Firestore and edit data with a dialog modal.

76 pro

Role Based Authorization With Firestore and Angular

Manage role-based authorization with Firestore NoSQL and Angular 5. Learn how to secure specific user activities with router guards and database rules.

75

Angular Component Test Driven Development (TDD) Starter Guide

Use test driven development in Angular and simulate asynchronous Firebase data on the backend for component specs.

74

Angular PWA Performance Optimization and Analysis

Performance analysis and optimizations for Progressive Web Apps designed to improve the critical rendering path.

73 pro

Angular 5 Service Worker - Hacker News PWA Tutorial

Learn how to build a realtime Hacker News PWA from scratch with an Angular 5 Service Worker.

72

SendGrid V3 Transactional Email Cloud Function

Send transactional email with SendGrid v3 in a NodeJS environment like Firebase Cloud Functions.

71

AngularFire2 State Changes With NgRx

Take advantage of state changes in AngularFire2 with @ngrx/entity adapters and @ngrx/effects .

70

CSV Exports From Firestore Database With Cloud Functions

Learn how to turn database data into a CSV Excel Spreadsheet with Firebase Cloud Functions.

69 pro

Multi-Step Signup With Firebase Email Auth and Angular Reactive Forms

Take advantage of password auth in Firebase using a multi-step reactive form.

68

Angular SEO Part 2 - Firebase Cloud Functions Middleware for Rendertron

Configure Firebase Cloud Functions to serve as the middleware for Rendertron to make Angular apps SEO linkbot friendly.

67 pro

Angular SEO Part 1 - Full Search Engine Optimization Solution for PWAs

Learn how to use Rendertron to make Angular SEO and linkbot friendly.

66

Progressive Web App Content Management With Contentful

Learn how to create programmable content with Contentful in an Angular Progressive Web App.

65

Multiple Device Push Notifications With FCM and Firestore

Learn how to send push notifications to multiple devices with Firebase Cloud Messaging and Firestore.

64 pro

Faster Firestore With Cloud Functions Data Aggregation

Learn how to make faster queries in Firestore by aggregating data from a subcollection to its parent document via Firebase Cloud Functions.

63

Infinite Scroll and Pagination With Firestore and Angular

Learn how to perform infinite scroll pagination, both downwards and upwards, with Firestore and Angular.

62

Ngrx Effects With Firestore and AngularFire V5

Use a Firestore as a persistent backend with @ngrx/effects and @ngrx/entity.

61 pro

Ngrx Entity CRUD Feature Module Tutorial

Use @ngrx/entity to build a CRUD feature module in Angular from scratch.

60

Dialogflow With Firebase Cloud Functions and Firestore

Run backend code via a Dialogflow chatbot using Firebase Cloud Functions and the Firestore Database.

59 pro

Chatbot in Angular With DialogFlow API.ai

Learn how to build a chatbot in Angular with the Dialogflow natural language processing library.

58

Build a Star Review System With Firestore

Learn how to build a five-star rating system from scratch with Angular and the Firestore NoSQL database.

57

Advanced Firestore Usage Guide With Angular

A variety of tips and snippets that make AngularFire v5 and Firestore much easier to use.

56 pro

Firebase OAuth Login With Custom Firestore User Data

Learn how to save custom user data in Firestore after authenticating with Google OAuth

55

Weather App With the Angular HTTP Client and Dark Sky API

Build a weather app from scratch using the Dark Sky API, Angular HTTP Client, and Firebase Cloud Functions

54 pro

Angular HTTP Client Quick Start

Learn how to use the Angular HTTP Client and start making requests to restful API endpoints.

53

Firestore With AngularFire5 Quick Start

Get up and running with Firestore and AngularFire5 in this quick start introduction.

53

Secure Firebase Cloud Functions for Authenticated Users

Learn how to make your HTTP and Database Cloud Functions only accessible to authenticated Firebase users.

52 pro

Stripe Subscription Payments With Firebase Cloud Functions and Angular

Learn how to manage subscription payments with Stripe, Firebase, and Angular.

51

Build Angular Desktop Apps With Electron

Learn how to build native desktop apps for Windows, macOS, or Linux using Angular 4+ and Electron.

50

Firebase Database Performance Profiling and Analysis

In this lesson, I will show you how to analyze speed and memory performance with the Firebase database profiler tool.

49

SMS Texting With Twilio and Firebase Cloud Functions

Send SMS text messages to Angular users with Twilio and Firebase Cloud Functions. Learn how to update users with a phone text when their order status changes.

48

RxJS Quick Start With 20 Practical Examples

Master the basics of RxJS quickly with 20 practical examples. Learn how Observables, Subscriptions, Operators, and

47

Ngrx With Firebase Auth Google OAuth Login

Learn how to use Google OAuth with Ngrx. In this lesson we manage the Firebase AuthState, login with Google, and logout.

46

Angular Progressive Web Application PWA With 100 Lighthouse Score

Make Angular project a progressive web app (PWA) that is installable on mobile devices with a manifest and a service worker.

45

Angular Ngrx Effects With the Firebase Realtime Database

Learn how to use NgRx Effects in Angular using the Firebase Realtime Database.

44

Angular Redux Quick Start With Ngrx

Get started building redux apps in Angular with ngrx. In this tutorial, we build a Redux app from scratch that will show you how to create, update, and debug a redux data store in Angular.

43

Location Queries With Firebase GeoFire and Angular Google Maps (AGM)

Use Firebase GeoFire to make location queries in Angular, then display the results in Google Maps.

42

User Presence System in Realtime - Online, Offline, Away

Learn how to show current user presence in realtime with statuses of online, away, or idle.

41

Role-Based User Access Control With Firebase

Give users specific permissions and roles with Firebase. Secure data on the frontend and backend with four different methods.

40

Realtime Charts With Plot.ly

Learn how to add realtime data to your Plot.ly graphs and charts with the Firebase database.

39

Use TypeScript and WebPack With Firebase Cloud Functions

Learn how to use TypeScript and Webpack in your Firebase Cloud Functions.

38

Infinite Scroll in Angular With Firebase Data

Build an infinite scroll feature with async Firebase data and the ngx-infinite-scroll package

37

Seven Methods for Debugging Angular Applications

Seven different methods for debugging angular apps, including RxJS and Firebase debugging methods.

36

Send Push Notifications in Angular With Firebase Cloud Messaging

Learn how to send Push Messages to users after they close an app with Angular 4 and Firebase Cloud Messaging (FCM)

35

Reactive Forms in Angular With the Firebase Database

Use Angular Reactive Forms to validate and update Firebase data asynchronously.

34

Build Realtime Maps in Angular With Mapbox GL

The basics of building realtime map features with Angular4, Firebase, and MapBox

33

Multi-Property Data Filtering With Firebase and Angular 4

The best options for filtering your data when you want to achieve something similar to using multiple WHERE conditions in a SQL database query.

32

Animation Examples in Angular 4.3

Five basic animation techniques and examples based on Angular 4.3+

31

Top 7 RxJS Patterns for Angular Development

Seven patterns that solve common issues for realtime app developers using Angular and Firebase

30

Firebase Phone Authentication With Angular 4 Tutorial

We will use the firebase JavaScript SDK directly to implement Phone auth in Angular 4.

29

Angular Full Text Search With Algolia Backend - Part 2

Update your Algolia index after each database write with Firebase Cloud Functions.

28

Angular Full Text Search With Algolia Frontend - Part 1

Build a full text search feature using Algolia, Angular 4, and the InstantSearch.JS library.

27

Angular Stripe Payments Part 3 - Sell Digital Content

Now that we have the ability to collect Stripe payments from customers, we need a way to apply those payments in the app in the form of digital purchases.

26

Angular Stripe Payments Part 2 - Firebase Cloud Functions Backend

Send the Stripe payment token back to Stripe with a Firebase Cloud Function to charge the card.

25

Collect Payments With Angular, Stripe Checkout, and Firebase

Build a payment collection system that will enable users to make credit card payments with Stripe Checkout

24

How to Lazy Load Components in Angular 4 in Three Steps

Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated

23

A Simple Explanation of NgModule

NgModule explained in simple terms with use-case examples.

22

Facebook-Inspired Reactions From Scratch With Angular and Firebase

Build a Facebook-inspired reaction component to allow users to like or react to your content.

21

Angular Toast Message Notifications From Scratch

Send toast notifications to users with Angular and Firebase.

20

Associate Firebase Users to Database Records

Learn several different ways to associate database records with users who authenticated via Firebase

19

Simple Firebase Pagination With AngularFire2

Create a paginator with AngularFire2 for async realtime firebase data.

18

Twitter Inspired Follow System With Firebase and Angular

Create a twitter-inspired follow unfollow system with Angular and Firebase

17

Custom Usernames With Firebase Authentication and Angular

Give Firebase users custom usernames after and validate them asynchronously

16

Text Translator With Firebase Cloud Functions onWrite and Angular

Translate text in the cloud with Firebase Cloud Functions

15

Drag and Drop File Uploads to Firebase Storage

Build a drag-n-drop file uploading system in Angular from scratch

14

Reddit Style Upvoting in Angular 4 and Firebase NoSQL

Create a Reddit-Style Voting System from Scratch with Angular and Firebase

13

Autocomplete Search With Angular4 and Firebase

Create an autocomplete search feature that filters results asynchronously from the Firebase realtime database

12

Understanding Firebase Database Rules by Example

Learn how to protect your firebase data on the backend with database rules examples.

11

Angular4 Transactional Email With Cloud Functions and Sendgrid

Send transactional email in Angular with Sendgrid and Firebase Cloud Functions

10

Show Loading Spinners for Firebase Data

Learn how to show a loading spinner when loading async data from Firebase

9

Sharing Data Between Angular Components - Four Methods

Data sharing is an essential concept to understand before diving into your first Angular project. In this lesson, I provide four different methods for sharing data between Angular components.

8

Angular Firebase Authentication Tutorial - Email Password Signup

Learn how to implement Firebase email/password auth into an Angular app.

7

Angular File Uploads to Firebase Storage

Upload files to Firebase Cloud Storage from an Angular 4 app

6

Bootstrap 4 Collapsable Navbar With Angular and No Plugins

Code snippet for collapsing and animating Bootstrap's navbar in Angular 4.

Reactive CRUD App With Angular and Firebase Tutorial

Learn how to build a simple CRUD app with the Firebase realtime NoSQL database and Angular

5

Customize the Initial Loading Screen in Angular

Customize the Initial Loading Screen in Angular using only CSS

Router Guards to Redirect Unauthorized Firebase Users

Use Router Guards to Redirect Unauthorized Firebase Users from Specific Routes

4

Angular Firebase Authentication Tutorial - OAuth

This is part one of a three part series that covers how to implement OAuth Authentication in Angular 4.

3

Angular Firebase Authentication Tutorial - Anonymous Auth

Firebase anonymous authorization allows a user to start using your app with going through the typical registration process

2
You have reached the beginning of time...