This Smart Organizer Provides a Web Interface for All of Your Components

Upgrading the humble drawer organizer

The situation is all too common. A hobbyist, after several years of building incredible projects and showcasing them to the world, has realized they have purchased so many components that they now require a large set of drawers to contain everything. Furthermore, having to remember where each bin is located is tough, and worse yet is needing to search through every single one in order to find that vital part for a new project. Fed up with this system, Tomasz, who goes by Mellow_labs, wanted to make a clean and searchable web interface to find them more easily, complete with the extra hardware to improve the drawers.

The lighting system

After seeing an ad on Instagram for a smart bin lighting setup, Tomasz realized he could build one of his own using open source hardware for far cheaper. To accomplish this, he started by arranging a total of 60 individual NeoPixel LEDs and arranged them in a 6-by-10 grid on a piece of cardboard before soldering them together. From here, he purchased a NodeMCU D1 module which is based on the common ESP8266 microcontroller. And rather than programming his own LED control system from scratch, he instead went with the WLED project that presents a web interface and API for controlling all kinds of LED types with a wide variety of microcontrollers, such as the ESP8266 and ESP32. This meant that any device on his home network could simply transmit an HTTP request to the ESP8266 and change the colors of the LEDs.

Creating a web interface

Apart from the interface of the LED controller itself, Tomasz also needed one for the organization system. The entire stack is based around the Python Flask package, which is a web framework for creating interactive pages and APIs, and the application presents a variety of endpoints for working with organizer. All items are stored in a human-readable comma-separated values (CSV) file that is written to or read from upon each request regarding an item.

Adding and modifying components

To add an item, the user only needs to enter data for the name, link to an online product page (such as Digikey or Amazon), an image link, and where it is positioned within the drawer set. Below this form is a text input for performing a search based on the item's name, while modifications to any aspect of the part's data and deletions are done in the item card directly.

Showing a part

Once everything had been populated in the item list, Tomasz was able to click the "Locate" button for each component and watch as the associated bin was illuminated in green. To see more about this smart organizer project, you can watch his video here on YouTube or visit his GitHub repository.