M E
Case study
Lista del super
Frictionless grocery.
A cloud-synced, minimalist shopping engine that turns household needs into organized grocery lists in real time.
Overview
About the project
Lista del super is a lightweight, mobile-first web application designed to eliminate the friction of household inventory management. Built to replace the manual paper note ritual, it provides a shared digital space where multiple users contribute to one source of truth.
With high-end typography and a warm, notebook-inspired interface, the app prioritizes speed and organization. Users can categorize items instantly, sync changes across devices, and export structured lists to WhatsApp for a smoother in-store experience.
The problem
Fragmentation in household synchronization
Couples and roommates often face clutter friction when managing daily essentials:
- Scattered notes and duplicate purchasesShopping needs live across paper notes, chat messages, and memory, making it easy to miss items or buy them twice.
- No shared source of truthWhen one person updates a list, everyone else needs the change to be visible immediately and without another manual handoff.
- Too much friction for small tasksA household list must be faster than opening a complex productivity suite, especially from a phone in a store aisle.
The solution
A digital notebook with a cloud brain
I designed and developed a custom web app that combines the tactile, low-tech feel of a handwritten list with a robust Google Sheets backend.
The warm-white palette, high-contrast black buttons, logic-based categories, and instant syncing make the tool feel like a premium paper notepad while behaving like a real-time database.
Key features
- Real-time collaborative listGoogle Sheets acts as a shared backend so household updates remain synchronized across devices.
- Logic-based categoriesItems are assigned to useful grocery categories so a growing list remains scannable and easy to navigate.
- WhatsApp-ready exportStructured list output turns the final shopping plan into a message that can be shared in one step.
- Mobile-first interactionLarge touch targets, fast entry, and a focused layout support use while moving through a store.
- Notebook-inspired visual systemOnest typography, a warm-white palette, and solid black controls give a familiar daily ritual a polished product feel.
Engineering
Technical highlights
The GAS-to-DOM bridge
The browser communicates with the Google Sheets server through google.script.run. Asynchronous success handlers update the DOM after each action, giving the interface a Single Page Application feel without full page reloads.
Optimized list rendering
JavaScript uses Set objects to extract unique categories from the database and dynamically build the list structure, keeping the experience organized as the household inventory grows.
// Synchronizing local UI with Google Sheets Database
function add() {
const item = document.getElementById('item').value;
google.script.run.withSuccessHandler(render).agregarProducto(item, category);
}To bypass the browser-tab feel, the app also uses Apple and Android meta-tags, a custom favicon, and mobile-web-app-capable configuration. When added to a Home Screen, the result behaves like a focused standalone utility.
Result
Impact
The result is Lista del super : a tool that treats the mundane task of grocery shopping with the same design rigor as a high-end productivity app.
It gives households one dependable place to capture, organize, and share essentials, reducing the small moments of coordination that make everyday shopping feel harder than it should.