Tutorials

Learn React, React Native, JavaScript and more with in-depth tutorials.

Next.js
awsserverless

Deploy a Next.JS App With Serverless to AWS Lambda

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.
Next.js
Reactreactstripe

Stripe Webhook Verification with NextJS

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.
Hasura
rdsaws

Setup Hasura Cloud with Amazon RDS

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.
React Native
componentrecipe

Create a Recipe Difficulty Component

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
recipescomponent

Build a Recipe Caloric Display

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.
React Native
Nodenodes3

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

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.
React Native
Reactreacthooks

Animated Color Palette Generator in React Native

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.
React Native
Reactreactreview

Create an Animated Product Review Display with 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.
React
customize-cracreate-react-app

Customize Create React App without Ejecting

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.
JavaScript
yupdates

Yup Date Validation with Custom Transform

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.