I built a quick moving inventory management tool in order to assist me in one of my recent moves. In previous moves, I had used a spreadsheet to track my moving inventory, but this time around I wanted a more efficient and fun way to manage my inventory when moving from one apartment to another. The box names are courtesy of the local liquor store, and the addresses are from TV shows—can you guess which shows they're all from? 😄
Features
- Make moves and display their address on a map
- Make an inventory list for every move
- Ability to search the list using your browser's search field to find items quickly
- Ability to check items off the list once you're moved in to see if all items are accounted for
- Mobile-friendly viewing and editing modes
Dynamic and static maps using the Google Maps API
In edit mode, you are able to find your destination address using the Google Maps API. You can load in a dynamic map and configure zoom and framing. Then, on the main page where your moves are listed, you can see a static map load for each of your move destinations. This static map loads using the configured zoom and framing specified in the editing mode. This feature utilizes two separate Google Maps APIs.
A moving inventory list for each move
The ability to have multiple moves scales better for people who have multiple moves going on at the same time, or who would like to keep historical data of their previous moves. You can specify the attributes for each item in the moving inventory list:
- Box identifier (e.g. Box 1, Red luggage, etc.)
- Description of the contents
- Destination room
- Markers for whether the contents are fragile or heavy
Keep track of your items using search and checklists
Since this results in having a moving inventory list displayed in your web browser rather than written on a piece of paper, you can easily search your list for items. Where did you pack that commonly-used item? Is the cutlery moved in yet? When you can search your list quickly, you can answer your questions quickly. You can also check items off one by one once you're moved into the new place to make sure everything is accounted for.
Mobile-friendly
We're always on the go, so ensuring that the tools you rely on are versatile and can be used wherever you need to use them. This prototype has mobile-friendly layouts for phones and tablets.
v1.1 – Feature roadmap
This app is just a prototype for now, but if there ever was a need for something more robust, an infinite amount of features could be built:
- Ability to search for specific items across multiple moves
- This feature can be useful for people who move a lot of furniture around between multiple properties and need to keep track, e.g. real estate agents and staging companies.
- Ability to create multiple user accounts with different permissioning models to allow selective access to moves and items
- This could be useful for larger teams where managing different roles is important
- Other attributes, e.g. weight, size, etc.
- This could be useful if you wanted to track the total size and weight of your inventory, either actually or historically
- Ability to add photos
- A picture paints a thousand words! This could be useful if you have a lot of inventory. Visuals can help make it easier to scan, as well as make usage more attractive and enjoyable.
The possibilities are endless, and depending on needs, a tool like this could be extended to provide more information and functionality.
Tech stack
Though this prototype was built using the ProcessWire content management system, should this be built out as a software as a service (SaaS) product, it would likely benefit from an overhaul of the tech stack. That said, here's what it's built with:
- PHP, MySQL
- ProcessWire content management system (v3.x)
- HTML/CSS
- Twitter Bootstrap
- Custom CSS
- JavaScript
- jQuery
- Custom JavaScript
- Google Maps API (JavaScript maps, Static maps)
If this wasn't a personal productivity tool and there was a budget to build this out correctly so that it can scale better, I would opt to build the front-end and back-end separately—the back-end would likely be built using Node.js or Ruby on Rails, and the front-end would be built with a JavaScript framework like React, Ember, Angular, or Vue.
Demo time!
If you'd like to try it out, visit the demo here
username: demo
password: demodemo123!
Have fun and be nice.
