Autoplay
Autocomplete
HTML5
Flash
Player
Speed
Previous Lecture
Complete and continue
Gatsby JS & Firebase: HYBRID Gatsby realtime + static sites
Introduction
Before you begin this course
Course introduction (2:03)
Gatsby + Firebase as a Headless CMS overview (5:36)
Creating the Gatsby book club project (1:56)
Setting up the firebase project & creating example data (4:46)
IMPORTANT! REQUIRED for next lecture: npm package changes
Configuring Gatsby to connect to firebase (7:47)
Building the Gatsby Book Club pages
Querying firebase data with the GraphiQL tool (4:08)
Querying firebase data from Gatsby with GraphQL (4:03)
Dynamically creating pages for each Book within Gatsby (7:11)
Recapping the code so far
How createPages works (2:59)
Insight into GraphQL queries (4:15)
Improving the Layout & BookTemplate styling
Updating the Layout component and rendering it for the BookTemplate (3:57)
Adding the book data to the BookTemplate (1:43)
Creating a common BookItem component with Styled Components (1:52)
Adding additional book data (2:26)
Refactoring the BookItem component (7:30)
Images with firebase cloud storage & rendering in Gatsby
Uploading images to firebase cloud storage & referencing in the database (2:32)
Rendering the book cover images in Gatsby (2:41)
Styling the book cover within the BookItem component (2:56)
Refactoring the rendering of the book cover images (5:23)
Use gatsby-image and GraphQL to query for specific image resolutions (7:46)
Refactoring gatsby-node.js and bookTemplate.js (7:42)
Real-time functionality with firebase
Installing dependencies and initial setup (2:52)
IMPORTANT! REQUIRED for next lecture: npm package changes
Overview of boilerplate & starting to implement login with React hooks & context (6:37)
Creating and hooking up the login form (9:12)
Displaying user email and login & logout links (9:33)
Cleaning up styling of the Header component (4:39)
Updating how pages are rendered using gatsby-browser.js and gatsby-ssr.js (7:07)
Creating Form, Input, & Button common components (6:06)
Building the registration functionality & UI
Build the register page (6:18)
Add state to the register page (2:56)
Finish up the registration functionality (3:41)
Handling validation errors
Validation in the login page (4:05)
Validation in the register page (3:40)
Implementing public profiles
Creating the publicProfiles collection in firebase (3:13)
Creating the getUserProfile query & intro to firebase rules (6:21)
Displaying the username in the header (4:55)
Adding the username field to the registration (4:02)
Building the comments section
Creating the comments subscription (6:07)
Creating example comments & finishing the comments subscription (7:31)
Displaying comments in the UI (4:34)
Creating the post comment form (4:16)
Firebase cloud functions
Introduction and setup (3:41)
Creating the createUserProfile cloud function (5:38)
Calling createUserProfile from Gatsby (9:49)
Sorting comments by latest to oldest (5:15)
Validation in firebase cloud functions (6:32)
Implementing the Admin features
Moving create profile to cloud functions (part 1) (8:12)
Moving create profile to cloud functions (part 2) (2:42)
Adding admin functionality to a user (3:46)
Querying if user is admin from Gastby (4:31)
Implementing create new author (part 1) (7:06)
Implementing create new author (part 2) (2:49)
Creating the add book page and querying authors (5:53)
Creating the add book form (8:45)
Create & implement the createBook firebase cloud function (7:56)
Finishing touches to the create book form (3:25)
FIX: Can't perform a React state update on an unmounted component (3:37)
Deploying on Netlify
Preparing our project for deploy part 1 (1:08)
Preparing our project for deploy part 2 (2:39)
Setup & deploy on Netlify (2:51)
Auto-rebuild site whenever new books are added (1:52)
Setting up the firebase project & creating example data
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock