RemixFast 
Learn
Docs
Blog

InventoryTracker App

InventoryTracker is an application to keep track of office inventory. It allows user to view list of inventory items and manage them.

In this tutorial, you will learn RemixFast basics like, adding list-detail routes, adding nested routes, and get familiar with different type of layouts by creating a simple inventory management app.

Let’s get started!

Content

Create Test App

  • Click Editor tab
  • Click Add to add a new test app
  • Select Create Test App with a test db

This will show list of available App Templates. Find Inventory Tracker App, and click Create. This will create app and per populate model definitions.

Select the newly added Inventory Tracker App, this will open Visual Editor.

Models

App has for models

  • Catalog
  • Inventory
  • Order
  • Item

For this tutorial, we will be using the following models:

Catalog

Is used to categories and group like equipments and let employees request items from catalog. Catalog helps to keep inventory organized and lets employee request equipment based on type and not have it tied to the actual equipment.

Inventory

Tracks computing equipments in office. Has fields to identify equipment using asset tag and show if equipment is available or if it has been assigned.

Select Model tab in the and explore Catalog and Inventory models. Check relation between Inventory and Catalog model.

Routes

Select Route tab and click Add Route button. This will open Add Route dialog open, enter following

Template: Select > 'Table - Detail'
Model: Select > 'Catalog'
Label: 'Catalog'
Template: Select > 'Table - Detail'
Model: Select > 'Catalog'
Label: 'Catalog'

This will add new Catalog routes, one to get list of catalogs and other for catalog details. Route template also auto created table (list) and form (detail) views. Views are pre-populated and fully functional, with integration to backend.

Click Preview to see running Catalog route. Explore around. Click a row and see catalog details.

Click Add to add new catalog entry and enter following

Catalog name: 'MacBook Pro'
Catalog Number: 'MB'
Catalog name: 'MacBook Pro'
Catalog Number: 'MB'

Click Add on dialog

Select newly added catalog entry and update it with

Catalog Number: 'MBP'
Catalog Number: 'MBP'

Behind the scenes

When you selected Table-Detail Route template and paired it with Catalog model, RemixFast automatically created two routes, base \catalog.tsx to get list of catalog items and \catalog\$catalogId.tsx for catalog detail.

In addition to loaders and actions, RemixFast also created views for the routes. List/Table view quick search, advance search and sort. An Add button to create new Catalog entry and paging UI using usePager hook.

A Form view was also added to see Catalog details. FormView is fully functional with functionality to Save new record, update existing record and to delete a record.

All of this just by creating model and adding a route!

You might have noticed that there was no search box. Lets fix that.

Exit out of Preview by clicking Done

  • Click on Quick Search and in Properties panel, select Catalog Number. This will let user quickly find an item using catalog number.

  • Now click Advance search and select Catalog Name and Catalog Number. Advance search lets power user search for specific record by combining multiple filters.

  • Next click on Sort and select Catalog Name and Catalog Number. With this user can sort using name or number.

Click Preview Type in M and see quick search results. Also try out advance search (try Mac and MBP) and see result. Try out sorting as well, all of it works without you having to write any code!

Exit out of Preview by clicking Done

You now have a fully functioning Catalog page with ability to search, auto paging and edit functionality.

Add Nested Route

Hopefully you have an idea of what it takes to create a route in RemixFast. Let enhance it by linking Catalog with Inventory. This will let user see inventory of equipments we have for a given catalog entry.

Back in Editor, ensure you have Catalog selected and are on List route.

Click on Components Panel and find Table component

Drag Table component to an area just below table in List route. When you are over drop target, it will change color, drop the table component there.

This will bring up Add Related Item dialog. In that dialog select Inventory and click Add.

Inventory is now linked to Catalog. Two new nested routes have been add below Catalog Detail route, Inventory List route and Inventory Detail route, to show Inventory list and its details.

  • Click Preview
  • Scroll Catalog list till you see Inventory > column with header View Inventory
  • Click on Inventory >

This will bring up Inventory List showing inventory for selected catalog entry. You can see actual inventory details by clicking on particular inventory row.

Exit out of Preview by clicking Done

Behind the scenes

When you added Table to an existing List route, RemixFast understood that you are trying to create nested route.

Because RemixFast knows shape of your data and relationship between your models, is able to show dialog with related model, in this case Item and Inventory.

When you selected Inventory, RemixFast created nested routes to link each catalog entry to corresponding inventory items using $catalogId.inventory.tsx route and inventory detail using $catalogId.inventory\$inventoryId.tsx route.It also created inventory list and details views.

There are different kind of nested routes, one we just created can be categorized as a Related nested route. A Related nested route allows you to work with items that are related using foreign key, but are not tightly coupled. In our example, you can choose to view inventory independent of catalog, each can exists on its own. Other kind of nested route is parent-child one, we will cover it in next tutorial!

We now have a Catalog route with functionality to see just the related inventory. You should now have good grasp of what it takes to create model and route with RemixFast.

Let finish out the app build by quickly adding an independent view for Inventory list.

Stand alone Inventory List

We already have a way to view catalog and related inventory. But sometimes it is useful to just see inventory and be able to quickly local a particular item. This is will be really useful for our fulfillment team when they are servicing employee requests for items

Back in Visual Editor, click Add Route. Enter following on Add Route dialog

Template: Select > 'Card List-Detail'
Model: Select > 'Inventory'
Label: 'Inventory'
Template: Select > 'Card List-Detail'
Model: Select > 'Inventory'
Label: 'Inventory'

This will add new Inventory route. You should have Card List view side-by-side with Details Form view.

Click on Fields panel and find Asset Tag field. Drag Asset Tag field and drop it below Catalog Name in Card.

Click Preview, select Inventory tab and explore around. You can also configure search functionality and let user find exact items!

Hopefully you now have an idea of what it takes to build an app in RemixFast.

Export Code

Click on Export Code, to generate codebase for the app.

This will open Export Code dialog. Enter following

Version: 1.0.0
Version: 1.0.0

Click Export Code button. This will start code export. Once completed, select Code tab and view generated code

  • \prisma\schema.prisma to view generated Prisma Schema
  • \app\models\catalog.ts to view additional model details
  • \app\models\catalog.server.ts to view Prisma CURD functionality
  • \app\routes\__app\catalog.tsx route to view loader for getting data list
  • \app\routes\__app\catalog\$catalogId.tsx route to view action methods for catalog model
  • \app\routes\__app\catalog\$catalogId.inventory.tsx route to view loader for inventory list for selected catalog
  • \app\routes\__app\catalog\$catalogId.inventory\$inventoryId.tsx route to view action methods for inventory model

Also check out various views as well as independent inventory routes.

click on Download Code to continue development in local editor!

Next Steps

Continue to build your app by adding Employee Order Portal and a Kanban Board to manage tickets. ->

< Back to Learn

By using RemixFast, you agree to our Cookie Policy.