Cookie Tin

Inspiration

Christmas holiday shopping often leads to "Holiday Amnesia" -- where we lose track of the cumulative effect of multiple purchases and spending sprees. Cookie Tin helps people become more transparent, accountable, fiscally responsible.

What it does

Cookie Tin tracks overconsumption and overspending during the happy holiday season. Built for speed and transparency, it turns the "stress of shopping" into a manageable and interactive experience. Anyone shopping for the holiday season would find this app useful.

How we built it

This app was built using TypeScript, Tailwind CSS and Lucide React for a mobile-friendly and user-friendly interface and experience. Since this is a web app, users don't need to install anything. The database relies on the browser-based LocalStorage for a privacy-focused experience. No user data is collected or stored, and no account creation is needed. Food barcodes are scanned using the Html5-QRCode API. And feedback and haptics are implemented using Canvas-Confetti and Vibration API.

Challenges we ran into

Working solo on this app meant I had less time to brainstorm and plan out the app's concept and features, compared to the time needed for building it out. One of the features, the food barcode scanner, would allow users to scan the foods they purchased to update the spending tracker and the calorie counter. However, since Cookie Tin could also be used on the web, I tried to build an alternative option where users could upload images of the food labels, and have the app isolate and scan the barcodes from these images. More work needed to be done here. Planning any other features for this app also required more time than I had available, so I focused on making the interactivity and responsiveness of Cookie Tin more intuitive.

Accomplishments that we're proud of

I think the app is a cute and fun way to track your overspending and overconsumption, in a way that won't violate your privacy or store your user information. Cookie Tin also looks good on mobile browsers. I am especially happy about implementing the little "Puzzle" warning/confirmation for when users reach their spending limits while trying to add a new item. Making users complete a small confirmation task before spending adds friction, which slows down impulsive purchases and encourages more careful thinking. It also reinforces commitment: they either decide not to spend, or they consciously accept that confirming means they are choosing to overspend (with the mini-task forcing users to think mathematically/financially).

What we learned

There are a whole bunch of other features and UI/UX choices I could've and should've planned out, to give me more flexibility in how the app would function and feel. Some ideas I had considered was making the app more gamified, while ensuring the focus stayed on the budgeting-and-tracking core aspect. I also considered building Cookie Tin to be more intrusive but more useful, such as linking it to platforms, cards and accounts, for greater accountability and restraint. But I quickly dismissed that idea, as it would require much stricter ethical safeguards around privacy, data security, and financial consent than I was prepared to guarantee. I also realized that these considerations are generally applicable and crucial in building any app that interacts with user data.

What's next for Cookie Tin

Some ideas I had considered was making the app more gamified, while ensuring the focus stayed on the budgeting-and-tracking core aspect. I also planned on working on the social-media sharing aspect of Cookie Tin, since it could be a fun way for users to show off their holiday spending/budgeting, and hold themselves and others accountable. Other features included Shared Tins to sync group & family spending budgets between multiple members or individuals (which could involve using a cloud database and storing some amount of user information, which I want to avoid).

Built With

• canvas-confetti
• html5-qrcode-api
• lucide-react
• next.js
• tailwind-css
• typescript
• vercel
• vibration-api