Skip to main content

Tadabase powered moving & packing app

In this episode of Build it with Tim, we'll build a moving & packing app with the ability to manage items you are packing, print a packing list, and generate QR codes to track inventory.

Features Discussed:

  1. List Component (Time: 10:19)

    Sort and display containers by number, type, and location with custom view buttons.

  2. Submit Rule (Time: 12:22)

    Auto-populate linked fields after submission and redirect to container details.

  3. Links (Time: 15:01)

    Enhance UX with icon-based edit/delete buttons and visual styling for interaction.

  4. Search Component (Time: 19:17)

    Use search filters to transform values into custom HTML-based displays.

  5. Pipes (Time: 24:49)

    Generate QR codes using Tadabase's QR/Barcode Generator Pipe for each record.

  6. PDF Pages (Time: 36:48)

    Create printable sheets with QR codes, HTML layout, and print button integration.


Transcript Summary

Introduction

Hey everybody, welcome back to Build It with Tadabase. In today's episode, we're building a moving and packing app. Guess who is moving? I'll be moving in just a couple of weeks. As you can see behind me, I've already started clearing a lot of stuff out of the house, and I need a way to manage all of the items in the house—what bins, what boxes they are going into, and how to keep track of things through the moving process.

Overview of the Finished App

As usual, we're going to take a look at the finished application first and then dive into the Builder to get started.

Inside our moving and packing app, we have the ability to add containers, whether it's a bin, a box, or some bulk item. We can choose the container type and the location of the container—what room it came out of or is going to, or both.

  • Adding a New Container:
  • For example, we can add a new container, select "Box," and assign it to the living room.
  • After adding a new container, we can add items to it, such as books, toys, blankets, etc.
  • Once packed, we can manage and search for containers based on the container number or the items inside.
  • Packing List Page:
  • This page provides a list of all containers that have items and are at the location where we are loading the truck.
  • We can print the packing list as a PDF to mark off inventory when loading and unloading the truck.
  • QR Codes Page:
  • We have a page for QR codes where we can run a scheduled task to generate QR codes for each container.
  • These QR codes can be printed, cut out, taped onto the boxes, and scanned with a phone to see what's inside.

Building the App from Scratch

We're going to start from scratch for this app, meaning we'll create the data structure and the page structure ourselves, step by step.

Step 1: Building the Data Structure

  1. Containers Table:
  • Create a table for containers (bins, boxes, or large loose items).
  • Add a connection from items to containers.
  • Change the primary field to "Container Number" instead of "Container Name."
  • Add fields for container type, location, and room (e.g., garage, kitchen, master bedroom).
  1. Items Table:
  • Connect items to the container and keep the item name text field.
  • Add a roll-up field to concatenate the names of items inside each container.

Step 2: Building the Page Structure

  1. Containers Page:
  • Add a page to list all containers as cards.
  • Sort containers by their numbers in descending order.
  • Add a button to view items in each container.
  1. Add Container Page:
  • Create a form to add new containers and connect it to the "Container Details" page.
  1. Container Details Page:
  • Modify the detail components and add a form to add new items to the container.
  • Add a list component to display connected items with edit and delete buttons.

Step 3: Adding QR Code Functionality

  1. Generating QR Codes:
  • Create a pipe to generate base64 QR codes for each container.
  • Store the QR codes in a long text field.
  • Build a scheduled task to populate QR codes for all containers.
  1. QR Codes Page:
  • Add a page to display QR codes, formatted in three columns.

Step 4: Adding a Packing List PDF

  1. Packing List Table:
  • Add a packing list page to show all packed containers and their contents.
  • Filter data to show only containers that are packed and located at the house.
  1. PDF Generation:
  • Create a PDF layout and a packing list PDF page to print the inventory list for moving.

Conclusion

That's it for this week's episode of Build It with Tadabase. If you are moving, I hope you find this app useful. I know that I will when I move in a couple of weeks—it's certainly going to make our lives so much easier throughout the entire process. Thanks so much for watching, and we'll see you next time. Take care!