🎹 WDC #22 Can you create an app for CafĂ© Thunkable?

Welcome to :coffee: Café Thunkable!

Image credit: Stacy on dribbble

Hi everyone, and welcome to CafĂ© Thunkable! We’ve got a delicious range of hot and cold beverages for our customers to choose from and we need your help to design an app for them to simplify the ordering process here at our store.

Requirements:

  • Customer education: We want our patrons to be able to learn a little bit about each drink in the app
  • Drinks Categories: Ideally, customers should be able to choose from Popular, Hot, Cold, and Favourity drinks
  • Add to Favourites: Customers should be able to save drinks to their favourites
  • Order Confirmation: The app should allow users to email their order directly to the store

Resources:

6 Likes

Summary of entries

Here’s a starter project for anyone that might need it. It shows how to parse the API JSON data and how to avoid the empty and “null” values in the JSON:

Project Link (drag-and-drop interface)

4 Likes

Coffee Me

This is a first draft of my app. I didn’t focus on the look of it so it’s sloppy but you’ll get an idea of the functionality from this video:

Edit: design update


8 Likes

Here’s the web app so far:

https://thunkable.site/w/ifLiiKGWs

8 Likes

Looks Great @tatiang!

2 Likes

Nice one

3 Likes

very nice!

2 Likes

Hi everyone I have a question.
I have taken coffee images from unsplash so is it necessary to give credit on every photo or can I give it in the credits page only

The images on the Unsplash site have different attribution requirements. You have to read them for each image you use. You can’t just credit “Unsplash” for all of the images you use. But you could have a credit page where you list each specific one.

So Can i make a credit page where i credit all the images like this
image

I think that would be acceptable attribution. I’m not a lawyer but it seems reasonable to me!

2 Likes

Thanks :grinning:


Hi there Now I am also working I will take part In WDC#22

3 Likes

here’s my version - it’s almost a button-per-button copy of @tatiang’s design (i can’t go wrong with duplicating a good design) with a few differences - my favorite list is also a list you can select from, just like hot drinks and cold drinks, and i haven’t implemented the order completion (mailing) yet so i just put up an alert panel in its place. pardon the simplicity - i don’t have a lot of experience in UI design.

(the gif below is in a loop - sorry about that!)
cafesimple

here’s the link to the project
https://x.thunkable.com/copy/1501ae04c97f6d45a014bd8987cf045a

6 Likes

Awesome! Every time I look through your code, I feel that you have managed to master the art of variable-naming😂 Any tips for a noob at that?

4 Likes

master of variable naming? on the contrary! i use too much abbreviations that don’t make sense!

4 Likes

well i am late and that is a lot cool
 i think i can make clone ui of it 
 time for me to sleep i will do it tommorow

1 Like

Okay, I have two doubts. Once the order is placed through email, to which email will it go? And what is the phone number for check out?

That’s up to you. I just used “filler” information such as 1-800-555-1234. If you wanted to share/publish the app and have users actually use it, you’d need to figure out where to have them email or text their orders.

4 Likes