🎨 WDC #19 Can you rebuild the "Out of Milk" app?

#wdc is a democracy now :tada: Thanks for casting your votes for the topic for this weekends challenge - it ended in a tie, so I’m going to use my vote to tip the scales for the grocery list app. Let us know in the comments below if you want to try another community vote for the next one.

Grocery List App

I think one of the oldest and best know apps in this space is Out of Milk

You can keep track of what you have at home, what you need to buy or you can just use it as a good old fashioned to-do list app.

The Challenge

Create an app that allows users to add items to a grocery list and then tick those items off.

That’s it - you could theoretically complete this challenge with a listview, a text input and a button (and obviously spend a bit of time crafting a really nice UI too!) For some optional extras read on:

You can layer on complexity and additional functionality here by having shared lists for family or room-mates, or you might want a saved list of frequently bought items. For longer lists you might want search functionality or you could add support for recipes by bulk-adding all the ingredients to the list with a single click.

The are plenty of other ideas that you could add too - if you have any, please leave them in the comments or if you have a favourite list making app let us know what it is and what are the features that keep you using it.

Good luck!

6 Likes

Summary of entries

ToDo List App by @muneer

https://x.thunkable.com/projectPage/60e0b592fa97f80011cc89e9

What’s Needed by @tatiang

Practice Liszt by @codeswept

https://x.thunkable.com/projectPage/60e000bbaa6f750012a5394c

Listing Master by @overturner

4 Likes

I use AnyList for iOS. It has a clean interface and shared grocery lists so my wife and I can shop separately and our lists will always be in sync. I probably only use 25% of the features. I’ve never imported recipes (although that would be cool) or used the meal planner, for example.

1 Like

Well some things always change

1 Like

Hey , If we’ll participate in this #WDC 19 So we have to submit our project by tomorrow ??

OK, I decided to make a very simple app that fulfils the basic functions

  • You can add to the list
  • The system will check if already exists
  • You can mark it as done
  • You can remove from the list

Check ToDo List app

I thought it would be better to consume my thoughts in this instead of the new pricing of Thunkable.

9 Likes

Well, darn. I like to use the drag & drop interface for WDC but I’m realizing I need a custom data viewer list so I won’t be able to. Gonna go re-make the app I started.

3 Likes

Nice one @muneer !

1 Like

Couldn’t you make the dvl in the legacy interface and use it in dnd?

1 Like

Maybe My app does same thing:

It is not specifically designed for grocery but its a to do list. So, I think it can be used for this purpose.
:smile: :smile:

2 Likes

Correct! (Was just about to suggest the same thing!)

1 Like

That’s great Sir @muneer

What is the meaning of DND

1 Like

DnD = Drag and Drop which is the new UI.

4 Likes

Ok Thank You Sir

1 Like

What’s Needed

This is my attempt to re-create the AnyList app.

Features:

  • Add new item & category
  • Items are sorted by category
  • New items without a category are added to an “Other” category
  • Double-click to remove an item (item blinks 3 times; not shown in video below)

Known Issues:

  • If you delete the last item from a category, it doesn’t remove the category

Blocks used:

  • 114

Special components used:

  • Data Viewer List
  • Custom Data Viewer Layout

Try it yourself:
https://thunkable.site/w/964OxaqDl

Demo (no sound):

Features I’d like to add:

  • Select existing category from drop-down menu
  • Edit existing item name and category
  • When deleting last item from a category, category should auto-delete
  • Save data to Firebase
  • Share list with another user
  • Create multiple named lists
5 Likes

@tatiang This is a wonderful app! I like that it adds foods under OTHER even when they don’t have any specified category. It works amazing, but I found a bug:
I added Tomatoes under the category Vegetables. When I clicked thrice on the purple band reading Vegetables, I expected it to delete everything under vegetables as I was deleting a category. Instead, it deleted just the band and shifted Tomatoes to the previous category (desserts). But other than that it works perfectly, and I absolutely love it. It would come in very handy for someone as forgetful as me :sweat_smile:

3 Likes

Thank you! I rushed a bit to post… didn’t really test everything so thank you for finding that issue.

The tricky thing is that I wanted the category titles to show up in the list so I made them Data Viewer List (DVL) items. So they act the same as other items in that you can delete them. You really shouldn’t be able to although your idea of deleting an entire category and its items isn’t something I’d thought of.

4 Likes

I’ve updated the web app to prevent deletion of categories. Although, if you delete the last item from a category, it allows you to delete the category after that (which should be automatic… still need to add that).

5 Likes

Hello Sir @tatiang You always make best apps !!

3 Likes

Thank you! I appreciate it.

4 Likes