The Gatsby Masterclass

Video description

Build blazing-fast, feature-rich, and overall stunning React apps with the Gatsby framework

About This Video

  • Covers the basics of GatsbyJS
  • Focuses on the basics of what Gatsby and GraphQL can do.

In Detail

Do you want to make the fastest and best React applications? Look no further than Gatsby. This course is the best guide you'll find to learn the Gatsby framework. In it, we will be making a complete blog and online store, from project start to deployment on the web.

Here's what we'll be making:

A complete blog/online store built entirely with Gatsby and GraphQL, user authentication with multi-factor authentication, content served from the Contentful headless CMS (with blog posts written entirely in markdown), and continuous deployment with Netlify

What will be covered?

  • How to use GraphQL in great detail, from the GraphiQL IDE to your React/Gatsby client
  • Using GraphQL variables, arguments, fragments, and many more related concepts
  • Sorting and filtering operations in GraphQL queries
  • Utilizing the cloud-hosted headless CMS called Contentful for dead-simple content management
  • Executing queries from Gatsby client with static queries and page queries
  • Amazingly responsive images with Gatsby Image
  • Fetching/managing Gatsby data with Gatsby source plugins
  • Transforming data using Gatsby Transformer plugins
  • Converting markdown data to HTML content with Gatsby
  • Programmatically creating site pages in Gatsby
  • Pagination in Gatsby (Prev/Next links, numbered pagination)
  • User authentication using Netlify Identity
  • Social login with Google, GitHub, GitLab, and Bitbucket providers
  • Multi-factor authentication with account confirmation emails
  • Shopping cart and user purchases with Snipcart
  • Continuous deployment through Git/GitHub with Netlify
  • Routing, nested routes, links, and active links in Gatsby
  • And much more...

Table of contents

  1. Chapter 1 : Getting Started
    1. What You Need for this Course 00:03:11
  2. Chapter 2 : Creating our Gatsby Project
    1. Using the Gatsby Docs 00:04:24
    2. Creating our Project with the Gatsby CLI 00:03:27
    3. Gatsby Starters to Easily Bootstrap New Projects 00:04:08
  3. Chapter 3 : Exploring our Gatsby Project
    1. Gatsby Project File Structure 00:06:14
    2. Gatsby API Files / Using Git for File Tracking 00:06:45
  4. Chapter 4 : Pages and Components in Gatsby
    1. Creating Pages, Routes and Nested Routes in Gatsby 00:04:06
    2. Adding App Structure with Layout Component / Links in Gatsby 00:05:02
  5. Chapter 5 : Querying Data with GraphQL / GraphiQL IDE
    1. Getting Site Metadata with GraphQL and Static Queries 00:02:55
    2. Using GraphiQL IDE to run our GraphQL Queries 00:06:38
    3. Executing GraphQL Queries in our Gatsby Components 00:04:15
    4. Adding / Querying for Custom Fields on Site Metadata 00:03:17
  6. Chapter 6 : Source Plugins and Static Queries
    1. Querying for Filesystem Data with the gatsby-source-filesystem 00:03:47
    2. Executing Static Queries from Scratch 00:04:33
  7. Chapter 7 : Transformer Plugins / Creating a Blog out of Markdown Files
    1. Transformer Plugins / Using gatsby-transformer-remark to Transform Markdown 00:08:16
    2. Displaying Preview of Markdown Posts in Blog Page 00:06:55
  8. Chapter 8 : Programmatically Creating Pages with Gatsby
    1. Programmatically Creating Slugs for Blog Posts with gatsby-node 00:06:03
    2. Programmatically Creating Pages with gatsby-node 00:09:02
  9. Chapter 9 : GraphQL Arguments, Variables, and Page Queries
    1. Using GraphQL Arguments and Variables to Get Individual Posts 00:04:14
    2. Fetching Individual Post Data by Slug with Page Queries 00:03:57
  10. Chapter 10 : Pagination in Gatsby
    1. Links to Blog Posts / Programmatically Creating Blog Pages 00:06:05
    2. Adding Pagination with Prev Page / Next Page Links 00:05:29
    3. Adding Numbered Pagination 00:08:30
  11. Chapter 11 : Sorting and Filtering with GraphQL Queries / Formatting Dates and Text
    1. Sorting, Filtering, Limiting, Skipping w/ GraphQL Arguments / Listing Blog Posts 00:06:44
    2. Formatting Dates in Gatsby / Format Function in Moment 00:04:57
    3. Formatting Excerpts 00:02:06
    4. Time to Read for each Post / Formatting Dates on our Blog Pages 00:02:29
  12. Chapter 12 : Images in Gatsby / Amazing Responsive Images with Gatsby Image
    1. Importing Images in Gatsby / Adding our Site Logo 00:05:50
    2. What is Gatsby Image / Why Use Gatsby Image 00:02:39
    3. Querying for Images in GraphiQL / gatsby-transformer-sharp Plugin in Action 00:03:31
  13. Chapter 13 : Advanced Image Concepts in Gatsby / GraphQL Fragments
    1. GraphQL Fragments for Easier Image Queries / Displaying Images with Gatsby Image 00:03:20
    2. Key Details about Images Served with Gatsby Image 00:03:02
    3. Embedding Images in Markdown Files with gatsby-remark-images 00:05:25
  14. Chapter 14 : Contentful as our Headless CMS / Creating and Managing Products with Contentful
    1. Intro to Headless CMS and Contentful / Creating Content Model for our Products 00:07:25
    2. Managing Environment Variables within Gatsby / Fetching Products from Contentful 00:06:17
    3. Creating our Individual Product Pages / Displaying Contentful Images 00:10:22
    4. Querying / Previewing all Products on Products Page 00:05:41
  15. Chapter 15 : Creating a Shopping Cart / Checkout Functionality with Snipcart
    1. Add Ability to Purchase Products with Snipcart 00:09:28
    2. Display Shopping Cart Summary in Header 00:05:17
    3. Adding Custom NavLinks in Header Component 00:07:08
  16. Chapter 16 : Deploying our Gatsby Sites with Netlify / Setting up Continuous Integration
    1. Using Netlify for Deployment / Continuous Deployment with Github 00:07:26
  17. Chapter 17 : User Authentication in Gatsby / Netlify Identity
    1. Using Netlify Identity for Multi-Factor Authentication in our Site 00:09:26
    2. Displaying Private Products for Auth Users 00:08:05

Product information

  • Title: The Gatsby Masterclass
  • Author(s): Reed Barger
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781839216596