Building a Rental Marketplace App

In this episode, we'll build a Rental Marketplace app from scratch using the List Component, Form Component, Detail Pages, and Stripe Payments.

Features Discussed:

1. Data Builder (Time: 01:00)
   Learn how to set up a rental marketplace from scratch. This includes creating and organizing data tables for users, rental properties, bookings, and reviews. For example, users are connected to properties via a booking table, allowing them to create reservations.
2. Complex Formulas (Time: 05:08)
   Learn how to calculate booking dates and total costs using pipes and formulas. For example, calculate the checkout date based on the check-in date and duration of stay, and compute the total cost by multiplying the price per night by the number of days booked.
3. List Component (Time: 18:39)
   Learn to design a card layout using the list component, displaying rental properties with an attractive "Book Now" button that links to the booking details.
4. Calendar Component (Time: 21:56)
   Learn how the calendar component is used to display booking availability, with a status equation that labels dates as "Unavailable" based on the booking status.
5. Stripe Payment (Time: 28:18)
   Learn how Stripe payments enable users to securely pay for bookings. The form automatically updates the booking status to "Completed" after payment.

---

Transcript Summary

Introduction

Hey everybody, welcome back to another episode of Build It with Tadabase. On today's episode, we are building a rental marketplace with Tadabase.

Starting the App

For this app, we are starting from scratch. We're going to start with a brand new app, name it "Rental Marketplace," and let Tadabase create the initial structure of our application. The first thing we’ll do is delete some of the sample components that come with the app, like the sample table and sample page, because we’re starting from scratch. We’ll keep the users table, and the only thing we’ll add is a phone number field for users.

App Structure Overview

Before diving into building, let's discuss the structure. We have users who are booking rental properties. We will create a table for rental properties and a join table for bookings, connecting users and properties. Additionally, we'll have a reviews table for users to leave reviews on the properties they rent. So, we'll have four tables: Users, Rental Properties, Bookings, and Reviews.

Setting Up Tables and Fields

Users Table

We’ll keep the default users table and add a phone number field.

Rental Properties Table

We’ll create the Rental Properties table to track:

• Name: Name of the property.
• Description: A rich text field for a detailed description.
• Photos: Attachments field to upload multiple images.
• Price per Night: A number field for the rental price.

Bookings Table

We’ll create the Bookings table with:

• Booking ID: Auto-incremented ID.
• Booked By: Connection to the user who made the booking.
• Rental Property Booked: Connection to the property being booked.
• Check-in Date: Date of stay.
• Check-out Date: Calculated based on the length of stay.
• Days Booked: Number of days the property is booked.

We'll also use Tadabase's Date Utilities Pipe to calculate the check-out date based on the check-in date and days booked. Additionally, we’ll set up a date range field for displaying availability on a calendar.

Property Reviews Table

The Property Reviews table will include:

• Review Title: Title of the review.
• Review: A long text field for the review content.
• Rating: A rating field.
• Reviewer: Connection to the user who left the review.
• Property Reviewed: Connection to the rental property.
• Booking: Connection to the specific booking being reviewed.

Adding User Roles

We’ll create user roles to differentiate between regular users and administrators. We’ll add an admin layout with specific pages for property management and bookings.

Building the Admin Interface

Admin Layout and Pages

We’ll set up the admin layout with pages for managing properties and viewing bookings. The property management page will allow admins to add and view rental properties. Similarly, the bookings page will enable admins to view and manage bookings, including adding bookings on behalf of users.

Property and Booking Details

On the property detail page, we’ll display all bookings for the property and allow navigation to the booking details page. From the booking detail page, admins can view user details and navigate back to the property detail page.

Building the User Interface

User Layout and Pages

We’ll create a user layout with pages for viewing available rentals and managing bookings. Users will have a rental detail page where they can book a property, see descriptions, and view reviews.

Displaying Rentals

The rental listing page will feature a clean design with a three-column layout, displaying the property name, price per night, and average rating. Users can click a "Book Now" button to navigate to the rental detail page.

Calendar and Booking Form

On the rental detail page, we’ll add a calendar to show current availability and a form for users to book the property. The booking form will allow users to select a check-in date and the number of days they wish to stay.

Payment Processing

We’ll integrate Stripe payments into the booking process, allowing users to pay for their booking directly through the app. We’ll set up rules to disable the payment form once a booking is marked as completed.

Leaving Reviews

On the booking detail page, users can leave a review for their stay. The review form will automatically connect the review to the correct booking and property.

Role-Based Access

We’ll ensure that only logged-in users can book properties by setting visibility rules on the booking form. We’ll also secure the admin layout so that only administrators can access it.

Final Touches

We’ll make some final adjustments, such as setting default booking statuses, adding redirect rules after login, and customizing the app’s theme.

Conclusion

And here we are with our finished rental marketplace. We’ve built an app that allows users to book and pay for rentals, leave reviews, and manage bookings, all with a secure and intuitive interface. That’s it for today’s episode of Build It with Tadabase. Thank you very much for watching. We’ll see you next time. Take care!