đź“˝ WDC #15 "Show Thunkable"

Photo Journal

I usually wait to share projects until they’re farther along but this is a good excuse to get feedback and improve my app.

I don’t have a name yet for the app so I’m using the generic “Photo Journal” for now. I love photography, especially close-up nature photography. And it can be therapeutic to create a journal so why not make a photo journal where users can take or upload a photo and then add a description… maybe their mood or observations from their day or gratitudes for self or others.

!

Video Demo:

This has been a lot of work! But I’ve enjoyed getting to know some of the more complicated components and blocks in Thunkable.

Here are the components and services I’m using along with some comments:

1. Firebase - Users can sign up and then sign in to create private journal entries. I’m storing photo URLs, journal entries (text descriptions) and date/time stamps. I’ve given each Firebase journal entry node a name like 2021-05-10_21:06:33 which is formatted as [year-month-day_time] which allows me to use the List sorting blocks to sort all entries by date.

Firebase was a little intimidating at first but it’s actually very powerful and efficient.

2. Cloudinary - Using this to upload and store photos is a piece of cake with Thunkable. But it’s kind of an old stale cake because Thunkable only uploads images in full quality. So it’s a SLOW process and many of the photos I take on my iPhone 11 are too large and create an error when uploaded. Which is why I’m so excited that this feature request has been tagged as planned work. :clap:

When I pull the photos down from Cloudinary, I can resize them using Cloudinary’s API and that speeds up the display process in the app considerably.

3. Camera & Photo Library - I’m not going to spend time explaining these but they are integral to my app for obvious reasons.

4. Alerts - also self-explanatory, hopefully.

5. Web API The quotes that are generated randomly (once per day) come from here and require attribution. I’m actually technically not using the Web API at all. I generated quotes (50 at a time) and copied and pasted a bunch into a text block in Thunkable. (I’m not quite sure that’s ethical so I have to either ask permission or just use the API as intended if I publish this app.) Because it’s JSON, I can use my knowledge of JSON to parse the quotes and choose a random one each new day.

6. Any Component blocks I love these suckers! But they drive me a little crazy. I’m cloning the journal entry row for each Firebase journal entry node and then using Any Component blocks and List blocks to fill all of the cloned components with data.

This is probably the part of my app that needs the most work. Not because I haven’t figured out how to do everything (I have! :slight_smile: ) but because it’s slow to pull the data from Firebase. It takes several seconds to display the data in half a dozen “journal entry” rows. If I get several dozen, the wait is even longer. I’m not sure why. Maybe that’s just how cloud data works. It seems much faster than Google Sheets or Airtable but as you’ll see in the video above [coming soon!], it’s just not fast enough to feel like a professional app yet.

One thought I had was to have an overlay screen (a little tricky in Thunkable…) that shows until all of the Firebase data has been retrieved. I’m not sure what I would display… maybe a quote or an affirmation or a journal entry prompt (“Write about a time you felt seen.”).

7. Coolors - This website allows you to generate random color themes consisting of five or more complimentary colors. And you can lock in colors you like and then generate additional colors that match the locked ones. It’s great for figuring out colors for buttons, titles and other elements in a project.

Alright, that’s it. And that was a lot. Thanks for reading!

I welcome any suggestions you may have for UI, graphic design, or especially efficiently storing and retrieving photos and text. :smiling_face_with_three_hearts:

11 Likes