Lessons

Explore all newline lessons

Tags
Author
Pricing
Sort By
Video
Most Recent
Most Popular
Highest Rated
Reset
How to Build a React Booking UI That Blocks Booked Dates

lesson

How to Build a React Booking UI That Blocks Booked DatesTinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

In this lesson, we'll begin to work on the client-side to facilitate the booking of a listing. We'll begin by first disabling any dates in the listing page datepickers that have been previously booked by other users.

How to Store New Bookings and Resolve Overlapping Bookings

lesson

How to Store New Bookings and Resolve Overlapping BookingsTinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

In this lesson, we'll continue from the previous lesson and look to see how we can update the bookingsIndex of a listing document with the dates that have recently been booked by a tenant.

Build a Booking System With React, GraphQL, and Stripe API

lesson

Build a Booking System With React, GraphQL, and Stripe APITinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

Before we begin to implement the `createBooking` mutation resolver, we'll first create the utility function that will facilitate a Stripe charge with the help of Stripe's API.

CreateBooking GraphQL Fields

lesson

CreateBooking GraphQL FieldsTinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

For users to book a listing in our app, we'll need functionality to handle this as well as the capability to process transactions between the tenant and host. In this lesson, we'll establish the GraphQL fields in our API that will help achieve this.

How to Integrate Cloudinary With React and GraphQL

lesson

How to Integrate Cloudinary With React and GraphQLTinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

In this lesson, we'll pick up from what we've done in the previous lesson by modifying our server code to utilize Cloudinary to host listing images for our TinyHouse application.

Why Use Cloudinary to Host Images in the Cloud?

lesson

Why Use Cloudinary to Host Images in the Cloud?TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

In this lesson and module, we'll investigate to see if there's a better way of storing the newly created images for listings in our database. We'll discuss and investigate cloud-based image and video management services and see how we can use Cloudinary for our application.

Build a GraphQL Mutation to Store Listing Data and Uploads

lesson

Build a GraphQL Mutation to Store Listing Data and UploadsTinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

The majority of the work we've needed to do for the form shown in the `/host` page was completed in the last lesson. In this lesson, we collect the values a user is to enter in the form and when the user decides to submit the form, we'll trigger the `hostListing` mutation we have in our API and pass the relevant input along.

How to Build a Listing Form Interface in React and Stripe

lesson

How to Build a Listing Form Interface in React and StripeTinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

We'll now begin to work on the form on the client application where a user can create (i.e. host) a new listing. The form we'll build will essentially be the UI of the `/host` route of our application.

Building a GraphQL Resolver to Receive New Listing Data

lesson

Building a GraphQL Resolver to Receive New Listing DataTinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

We'll continue from what we've done in the previous lesson by having the `hostListing` resolver function we've created receive an input with new listing information which will then be added to the `"listings"` collection in our database.