Neatenize is a simple, easy-to-use checklist website to help you reorganize, tidy up, and clean out. It’s loosely based on the Konmari method, which sorts items by category instead of room. While it’s a very thorough list, it’s not exhaustive; not all categories will apply to your needs, and you may have other categories not on this list. Use Neatenize as a starting point and framework.
It’s hard to feel like you’re making any progress when the to do list just keeps getting longer. To solve this, Neatenize takes the daunting task of cleaning and organizing your home and breaks it into bite-size sections. By sectioning each category into its own block in the page, Neatenize gives you achievable, measurable milestones.
While this particular project never took off as well as I hoped it would, I still use it for my own personal needs. A few of my friends also find it very useful, and I’ve had a few users find it through Google. Despite this, I have plans to eventually convert it to an iOS app.
Technologies used
- HTML & CSS
- JavaScript
- Bootstrap
- Firebase
Why I built Neatenize
Neatenize is a practice project. I never intended or expected it to be a widely used product; I’d be thrilled if it gets the same traction some of my other projects have, but at this point I’m happy with the learning experience.
Learning how to use Firebase
My goal with building Neatenize was to apply what I had learned developing Waypoint and the Living PokéDex Tracker in a new interface that integrated with Firebase to allow for cloud-synced data across devices. I actually used this as a sort of sandbox for the other two web apps; a checklist is one of the easiest data structures to work with, so it made for an excellent learning opportunity.
Designing the interface and data structure
I built Neatenize using the Bootstrap 5.1 framework, HTML, CSS, and vanilla ES6 JavaScript. It’s designed to be equally usable on mobile and desktop, with a responsive design that scales to the user’s device. The checklist data itself is stored in a JSON file that the code iterates through to create the user interface, for better maintainability.
I also created a fully printer-friendly version, for those that prefer paper checklists. This took some tweaking, to lay out all of the sections so that none of them were split between pages, and to make sure all the text was a logical and readable size.
Features
- Check off individual items in a category list
- When a category list is complete, a green check mark appears on the upper left as an overlay. This check mark disappears if a child checkbox is unchecked.
- Save and sync progress across devices
- Expand all category lists
- Collapse all category lists
- Collapse all completed category lists
Use case
Neatenize is intended to help anyone who wants to reorganize, declutter, clean out, or otherwise improve their living space. By breaking a home’s contents into primary categories, then smaller subcategories (clothing > shirts) it makes this process much more manageable and less overwhelming.
You can use Neatenizeon mobile phones, tablets and computers, as well as print it to use as a paper checklist. Unfortunately, I haven’t yet figured out a way to sync progress between the printed paper checklists and Neatenize’s web version ????
Screenshots
