We're going to take you from zero Hasura knowledge to building out permissions, authentication, and websocket magic! We'll start by exploring why Hasura is great, then jump into setting up local development. Next we'll deploy to Hasura Cloud with Amazon RDS as our database. Then with our local and production environments setup we'll dive into making tables, setting up permissions, and even setting up CI/CD on Github actions.

Finally we'll dive into some code and create Actions, which are webhooks that integrate into Hasura as graphql queries/mutations. Ending with a complete setup of real time chat interface including public messaging in channels, as well as private messaging!

Hasura

Hasura For Beginners

Jason Brown

In this course we're going to cover React Navigation v5 with React Native. We'll walk through the basic setup before any routes are added. Then walk through each different type of navigator including `Stack`, `Tab` and `Drawer`. Once you have an understanding of the basics we'll look at common patterns including authenticated/unauthenticated routes, buttons in headers, modal routes, and more.

React Navigation

React Navigation for Beginners

Forms are a very tricky topic in general. The React ecosystem has seen a an endless rise and fall of various form libraries. One such library that has stuck around is [Formik](https://formik.dev/). This course is only going to touch the the basics of forms as well as the basics of Formik. It'll be a good introduction if you're confused about how to get started.

We'll start with setup and then walk through different types of Field configurations Formik provides, as well as how to simplify fields with hooks. Then we'll walk through the one-off form types like checkbox and radio fields. Following up with errors and validation.

Then we'll dive into building a login form and a registration form, and end the course with building custom fields.

React

Formik for Beginners

We'll explore how to build out a difficulty recipe display. Using a combination of flex direction column, and row. With selected prop to override styles on a custom badge component.

React Native

Create a Recipe Difficulty Component

Build a caloric display for a recipe component. Learn to convert SVGs to React Native SVG components, and line everything up in a row. Finally learn to render shadows in iOS.

Build a Recipe Caloric Display

To create an animated color palette generator we're going to use the `Animated` library supplied by React Native. Some external libraries for generating consistent colors. Also we will use `useLayoutEffect`, `useEffect`, and `useState` hooks to automatically respond to changes in state to cause our animations to trigger.

Animated Color Palette Generator in React Native

Create an animated customer review display. We'll explore how to use basic React Native styles to accomplish the layout. Then wrap up adding some polish with `Animated` to animate our percentage bars from `0` to the percentage.

Create an Animated Product Review Display with React Native

We'll examine how we can use Emotion, Tailwind and Babel to build out string validated Tailwind classes but leverage the power of Emotion.

Emotion

Setup Emotion to use Tailwind classes in Next.js

Getting setup with drag and drop can be complicated, especially with multiple lists. We'll explore how to use react-beautiful-dnd to create multi-list drag and drops. We'll also use Immer and useReducer to create immutable data structures to simplify and improve the performance of our code.


react-beautiful-dnd

Multi List Drag and Drop With react-beautiful-dnd, Immer, and useReducer

The defacto standard for drag and drop in React is `react-beautiful-dnd`, however there are some caveats when it comes to using with a server side rendering library like Next.js. One call to `resetServerContext` in the custom `_document` will take care of all the issues.

Next.js

Using react-beautiful-dnd with Next.JS

Description: Next.js can be deployed anywhere, and the @sls-next/serverless-component component from Serverless makes it easy to deploy AWS. Using a serverless.yml config and a few environment variables you can deploy to multiple environments like staging, production, or even one off feature branches.

Deploy a Next.JS App With Serverless to AWS Lambda

Securing your stripe webhooks is essential for preventing bad actors from bypassing payment. NextJS provides an easy way to create API routes, however there are few nuances to get them to play together. Like disabling the body parser and converting the req to a buffer.

Stripe Webhook Verification with NextJS

We'll start by creating a new Hasura Cloud project. Then setup a new Security Group in AWS for a secure connection from Hasura Cloud to our RDS PostgreSQL database. Then we'll create our RDS PostgreSQL database, and setup the connection string in our Hasura Cloud project.

Setup Hasura Cloud with Amazon RDS

First we'll write an endpoint to create S3 pre-signed upload URLs. Next we'll setup a React Native Camera, and show how to save a captured photo. Finally we'll use `fetch` and `getBlob` to get our image contents and upload them directly to s3.

Upload a File to an S3 Pre-Signed URL with React Native

Create React App has been the standard choice for building React applications. With standards comes inflexibility. With `customize-cra` and `react-app-rewired` you can customize your build without ejecting.

Customize Create React App without Ejecting

In this lesson we'll examine how yup validations are setup. Also we'll show some of the builtin helpers like `email`, `required`, and `min/max` for dates. Then using `date-fns` we'll setup a custom transform so our validation system can handle different formatted dates.

JavaScript

Yup Date Validation with Custom Transform

Testing authentication can be difficult, especially with many 3rd party providers like Auth0. We'll show how to use Jest and mock-jwks to test out your authentication to create fast unit tests with out hacks.

Latest Courses

Latest Screens

Latest Tutorials

Subscribe to Code Daily