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:
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!