Code Daily
Modern JavaScript for web and mobile
Start Learning Now

Latest Courses

Hasura For Beginners
16 Lessons
React Navigation for Beginners
3 Lessons
Formik for Beginners
11 Lessons
See all courses...

Latest Screens

React Native
Create a Recipe Difficulty Component
react nativecomponentrecipe
React Native
Build a Recipe Caloric Display
recipesreact nativecomponent
React Native
Animated Color Palette Generator in React Native
hooksanimatedreact native
React Native
Create an Animated Product Review Display with React Native

Code Daily Discord

Join our community and get help with React, React Native, and all web technologies. Even recommend tutorials, and content you want to see.

Join the community

Latest Tutorials

Getting Started with Hasura Locally
Jason Brown
Jason Brown

Getting started with Hasura locally on your development machine can be accomplished in a few short minutes. It requires Docker, the Hasura CLI, and a docker-compose.yaml file provided by Hasura.

A few commands later and you have a full fledged GraphQL engine running connected to a Postgres database.

hasura
Hasura
Hasura
Setup Emotion to use Tailwind classes in Next.js
Jason Brown
Jason Brown

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

tailwindbabelemotion
Emotion
Emotion
Multi List Drag and Drop With react-beautiful-dnd, Immer, and useReducer
Jason Brown
Jason Brown

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.

drag-and-drop
react-beautiful-dnd
react-beautiful-dnd
Using react-beautiful-dnd with Next.JS
Jason Brown
Jason Brown

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.

nextjsdrag and drop
Next.js
Next.js
Deploy a Next.JS App With Serverless to AWS Lambda
Jason Brown
Jason Brown

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.

awsserverlessnextjs
Next.js
Next.js
Stripe Webhook Verification with NextJS
Jason Brown
Jason Brown

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.

reactstripenextjs
Next.js
Next.js
Setup Hasura Cloud with Amazon RDS
Jason Brown
Jason 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
Hasura
Hasura
Upload a File to an S3 Pre-Signed URL with React Native
Jason Brown
Jason 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 Native
React Native
Customize Create React App without Ejecting
Jason Brown
Jason 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.

React
React
Yup Date Validation with Custom Transform
Jason Brown
Jason 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.

JavaScript
JavaScript