TinyHouse App

About this Project

TinyHouse is a Full Stack React Masterclass offered by newline and utilizes React, Node, TypeScript, and GraphQL. It is a production ready application inspired by AirBnb. Users can be authenticated through Google OAuth, create listings, search for available listings around the world, schedule bookings, and send/receive payments via Stripe.

React Node Typescript GraphQL Apollo Server Express Apollo GraphQL Apollo Rover Express MongoDB Google Maps Google Oauth 2.0 Google People Stripe Ant Design CSS Moment React Router Dom
Screenshot of the home screen displaying a search bar and four images of popular locations

Listings

Users can search for available listings based on location and filter the results by ascending or descending price.

Screenshot of listings within the United States
Screenshot of user's page when the viewer is signed in

User

Users are able to sign-up and login using Google OAuth. Users are able to book any listing and complete payment through Stripe. Users do not need to connect to Stripe in order to place a booking.

Screenshot of user's page when the viewer is signed in

Hosts & Stripe

Hosts must register with Stripe prior to adding a listing. If the host disconnects from Stripe then their listings will no longer be available for new bookings. Users that connect to Stripe will be connected to the TinyHouse Platform and receive payments directly from other users that book their listing.

Screenshot of the Stripe connection page
Screenshot of booking payment modal

Bookings

Bookings are created when the Stripe transaction is completed. Bookings will appear on the user page but only be visible for the user who is signed in. The hose will be able to view the bookings on the listing page of their own listing.

Screenshot of booking payment modal

What's Next

There are many great ways to continue to develop this app. Adding User reviews, Host specific analysis tools, and more criteria to filtering, just to name a few.