TutorialsCourses

Tutorials

Setup Hasura Cloud with Amazon RDS
Jason BrownJason Brown

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.

rdsawshasura
HasuraHasura
Create a Recipe Difficulty Component
Jason BrownJason Brown

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 nativecomponentrecipe
React NativeReact Native
Build a Recipe Caloric Display
Jason BrownJason Brown

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.

recipesreact nativecomponent
React NativeReact Native
Upload a File to an S3 Pre-Signed URL with React Native
Jason BrownJason Brown

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.

nodes3react nativeaws
React NativeReact Native
Animated Color Palette Generator in React Native
Jason BrownJason Brown

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.

reactreact-nativeanimatedhookshooksanimatedreact native
React NativeReact Native
Create an Animated Product Review Display with React Native
Jason BrownJason Brown

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.

reactreact-nativereviewanimated
React NativeReact Native
Customize Create React App without Ejecting
Jason BrownJason Brown

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.

reactcustomize-cracreate-react-appreact-app-rewired
ReactReact
Yup Date Validation with Custom Transform
Jason BrownJason Brown

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.

yupjavascriptdates
JavaScriptJavaScript
Unit Test Token Verification for Auth0 using Jest and mock-jwks
Jason BrownJason Brown

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.

jestauth0mockingunit testjwksauthentication
JestJest
Create a Multi-Step Animated Modal Depending on User Actions in React Native
Jason BrownJason Brown

Animations can be used to effectively communicate a users action. However many times the reverse animation is used for both a close, or success. We can do better, and we'll walk through how to use Animated to create 2 different animations with a single animated value.

react-nativeanimatedmodalmulti-step
React NativeReact Native