Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

_Note: this course is being published and released as it is recorded, and is still incomplete. It is slated to be around a dozen videos._

Learn how to build PlaylistHunt, a fully featured app with authentication, authorization, a GraphQL API, and more, using up and coming modern tools, including:

- Gatsby
- Hasura
- Heroku
- Auth0
- Chakra UI

[View the demo](https://playlisthunt.netlify.app/) live online!

Most tools used are open source, with the exception of Auth0 and Heroku, which offers a generous enough free tier for hobby apps to be developed without any problems.

## Modern techniques

In the process, implement techniques to make your app experience dynamic on some portions, and static in others. 

Learn to how to build for Gatsby's vast and powerful plugin ecosystem by creating 3 of your own custom plugins in the process.

Use the latest and greatest of Gatsby, like the brand new [file-system routing APIs](https://www.gatsbyjs.com/docs/file-system-page-creation/). 

## Who is this course for?

Intermediate developers with some existing knowledge of React and web development are best suited for this course. The pace is a little quicker and aims at showing how all the pieces connect together to make a modern JAMstack app.

Chakra UI provides a set of high level, accessible components for building with React. You can add support for Chakra UI to a Gatsby app by installing and configuring a plugin. By using these components you can get up to speed with some pre-built options for common needs without having to reinvent the wheel.

Additional resources:

- [Chakra UI guide on getting started with Gatsby](https://next.chakra-ui.com/guides/with-gatsby)
- [gatsby-plugin-chakra-ui Docs](https://www.gatsbyjs.com/plugins/gatsby-plugin-chakra-ui/)
- [gatsby-starter-hello-world](https://github.com/gatsbyjs/gatsby-starter-hello-world)

Add pre-built Chakra UI components to a Gatsby app

Create app like navigation that is shared across pages and will persist on the page (rather than re-rendering when you refresh or change pages) like you'd get in a traditional Single Page Application. This is useful for headers, sidebars, and navigation elements to preserve state and weird flashes of reloading content. 

This lesson utilizes a few React components that implement the Gatsby specific `wrapPageElement` which is used to wrap all pages in a Gatsby app with a set of components. A similar API called `wrapRootElement` is often used to wrap an app in context providers.

Additional resources:

- [wrapPageElement API doc](https://www.gatsbyjs.com/docs/browser-apis/#wrapPageElement)

Create persisted navigation for a page layout in a Gatsby app

Chakra UI provides style props which "save time by providing helpful shorthand ways to style components". They reference design tokens from your theme and let you style components with CSS like style props that are mainly borrowed from [styled-system](https://styled-system.com/).

Additional resources:

- [Styled System property shorthand list](https://styled-system.com/api/)
- [Chakra UI style props](https://chakra-ui.com/style-props)

Use Chakra UI style props with React components to make a clean layout design

Hasura's one click deploy can give you a production ready GraphQL API backed by a Postgres database. In this lesson we'll use it to set up initial configurations and database tables needed to support the app's needs. 

We'll make a user table, a playlist table, and an upvote table, which will show how primary and foreign key relationships, unique ids, and more function.

This example uses the Heroku one click deploy as the fastest way to get started.

## Additional resources:

- [Heroku/Hasura one click deploy docs](https://hasura.io/docs/1.0/graphql/manual/deployment/deployment-guides/heroku.html#deploy-heroku)
- [Heroku buildpack for the Hasura GraphQL engine](https://github.com/hasura/graphql-engine-heroku)

Generate a visually editable GraphQL API with Hasura, deployed to Heroku

Auth0 can handle the complicated server infrastructure required for authentication and authorization. Since Gatsby uses React, the same instructions for getting started with React apply to Gatsby. You can even isolate the functionality to a plugin.

Plugins exist for adding this kind of thing, but it helps to see how things work yourself as well, and it can be done surprisingly quickly. 

## Additional resources:

- [Auth0 React quick start](https://auth0.com/docs/quickstart/spa/react/01-login)

_Note: if you are following along with previous videos, I've [added several components and styles](https://github.com/gillkyle/playlisthunt/commit/3bdf91bacc888662df8787db918e66a7cc401ebd) between videos to speed up the flow of the content. Feel free to check out what's changed or [check out the code on the branch for this lesson](https://github.com/gillkyle/playlisthunt/tree/050-authentication)._

Provision an Auth0 app and add authentication to an app with a custom Gatsby plugin

When using Auth0, newly registered users will likely need to be stored somewhere in your own systems so that you can store more data about them. This means Auth0 needs to send data about users that register through its services to your own services.

Auth0 has what are called Rules, that allow you to write custom JavaScript that runs as a part of the authentication pipeline. These can be defined to send the user data to be stored in Hasura.

Auth0 will also provide the JWT that specifies exactly what roles a user has, like what they are permitted to see or update in the database. After configuring them, you can specify what roles can see or update what data inside of the Hasura console.

## Additional resources:

- [JWT Config Generation Tool](https://hasura.io/jwt-config/)
- [Auth0 Rules docs](https://auth0.com/docs/rules)
- [Sync Users from Auth0 to Hasura](https://hasura.io/docs/1.0/graphql/core/guides/integrations/auth0-jwt.html#sync-users-from-auth0)

Build a full-stack JAMstack application with Gatsby, Hasura, and Auth0

Kyle Gill

Modern techniques

Who is this course for?

Course Content