Compra, which means “buy” in Spanish, is a shopping list app with a budgeting twist. I first created it in 2014 with the intention of learning to prototype with AngularJS.

Concept

I knew I learned best while working on a project. However, I wasn’t sure what to build yet. Taking out a pen and some paper, I began generating a list of ideas.

As a young person who was still recovering from the broke college student mindset, saving money was on my mind. Budgeting seemed like the most interesting idea on the list. I also wanted to experiment with mobile-first design.

The project goal became to make a different kind of shopping list app – one that could also estimate how much someone would spend on things they’d want to buy.

Prototype

After doing some initial sketches and figuring out the logic and structure of the project, I began coding. I managed to build an almost fully-functional, responsive web app in a few days. It even had a splash screen.

The splash screen.

Compra is different from other list apps because it allows users to enter a minimum and maximum price for each item. I wanted to create an app with many meaningful interactions. Using AngularJS, I was able to build in situational effects. Information and interactions change based on the state of the list.

In the process of adding an item.

Several items have been added.

Work on Compra was put on hold when I was unable to get local storage to work. I shared Compra’s code on GitHub and opened it to the public via a GitHub page.

App launch

After taking a break from working on Compra, I vastly improved my JavaScript development skills. Along the way, I learned more about local storage. One year later, I was able to successfully implement on-device storage and package Compra as an app. Slight interaction design tweaks were made, and minor visual design changes occurred. However, the majority of the app’s design stayed the same.

Screen recording of the app, done on a computer and placed in a phone. Wow!

I used Adobe’s PhoneGap Build to package Compra for mobile devices. After the official launch, reception was positive. The app was even featured on Product Hunt.

Compra is now available for Android via the Google Play Store.

View site