šŸŽØ WDC #8 Can you re-create Victoria's Quote Gallery using Google Sheets?

Creator Lounge
1

Thanks again to everyone who participated in the weekend design challenge last week.

I went back to Twitter again this week for inspiration and found a fantastic tutorial by Victoria Lo about how to build a Quote Gallery using Google Sheets.

Screenshot_20210326-193227
Screenshot_20210326-1932271080Ɨ2027 198 KB

You can try out the app for yourself here:
https://quote-gallery.vercel.app/

Itā€™s a great step-by-step guide to using React to connect to Google Sheets and display some inspirational or motivational quotes in your app. Since Google Sheets integrate directly with Thunkable itā€™s also a great candidate for the Community to recreate.

From a design perspective you can decide how to style the quotes, but you can also choose which quotes you want to include in your app.

If you want to participate all you need to do is share your /projectPage/ link before Monday.

Ideally, in terms of functionality, to re-create Victoriaā€™s app your app should:

  • Pull quotes from Google Sheets
  • Display them in the app
  • Allow users to navigate through the quotes
  • [Advanced] filter by category
  • [OPTIONAL] Allow users to upload their own quotes.

Best of luck with the challenge, post any questions you have here and special thank to Victoria for permission to share her article with the Community.

Thanks,
Domhnall

cc: @codeswept @tatiang @catsarisky @eko.devs.apploroceo @luv.ak.tech @manyone @roumak-coder @kartik14 @thg

6 Likes
3

Really nice functionality in that sample web app. I like the tabbed approach and grid layout and my first thought was to have a feature that allows users to add a quote. But thatā€™s already there!

I donā€™t know that Iā€™ll have time to participate this time around but Iā€™m eager to see what people come up with.

2 Likes
5

Sounds interesting! Will definitely try to make my own version!
Itā€™s cool that youā€™re looking for apps that we can remake on Thunkable for WDCs.

Couple of questions:
1: Is it necessary that we use Google Sheets?
2: Does it have to be a quotes app or can we use different topic?

Thanks.

2 Likes
6

Thanks @codeswept!! :smiley:

Are you thinking of using Local DB or Airtable instead? Thatā€™s fine too!

No, not at all (I love seeing some creative re-interpretations of the brief!)

For example, hereā€™s the exact same idea (a spreadsheet powering a UI) but for Ikea furniture:

Really interested to see what you come up with now!

1 Like
7

Cool! Making my app and hoping it will work by tomorrow.

1 Like
8

@domhnallohanlon ok i give this thing a try

1 Like
9

Awesome! Best of luck with it - let us know if you have any questions

2 Likes
10

umm any dedline?

11

Need to be posted by Monday, I suppose.

12

You can work away at your own pace @eko.devs.apploroceo but Iā€™m going to share a sample app and post a round-up tweet about apps on Monday

2 Likes
13

For anyone who needs quotes, this looks pretty useful!: https://type.fit/api/quotes

(I might load them into a Google Sheet just to comply with the design challenge directions. Or I might notā€¦ Hmm.)

3 Likes
14

I donā€™t follow directions well. Iā€™ve done plenty of retrieving data from Google Sheets. So instead, when I found a big JSON-formatted quote collection, I built a quote gallery that uses the JSON file of quotes (linked above) and then retrieves the speakerā€™s image from Wikipedia (most of the time) using that API. Since Iā€™d never parsed JSON with Thunkable, nor done a WebAPI call, Iā€™m calling it a win, instructions be damned. :wink:

Oh, and I did my first ā€œswipingā€ navigation, too. :slight_smile: I mostly Thunk on my very small iPhone SE, so I didnā€™t implement the gridded display.

Hereā€™s my project link: Thunkable , but since it uses WebAPI to get the Wikipedia image, youā€™ll have to remix it if you want to see the fully functional version.

quotegen
quotegen640Ɨ868 56 KB

The only thing that has me stumped currently is how to programmatically figure out how long that quotes JSON is. I hard coded after flailing at it a bit, but Iā€™m probably missing something easy, right?

4 Likes
15

Impressive! This is some cool work, especially considering you did it in only a dayā€¦

1 Like
16

Yessssss! Awesome that you dove in head first into the world of APIs and JSON. Itā€™s not easy stuff. Great idea to pull the speakerā€™s image.

2 Likes
17

@catsarisky A little tricky but this will do it:

image
image1722Ɨ72 22.1 KB

Where app variable quotes_json is the raw JSON you entered:

image
image1276Ɨ72 16.8 KB

2 Likes
18

Thanks! Iā€™d swear Iā€™d tried that, but apparently not, because that works perfectly.

2 Likes
19

Really happy with how the functionality of my app is going so far, just wanted to share a quick sneak peak.

quotes
quotes1115Ɨ800 2.63 MB

Hereā€™s the spreadsheet Iā€™m using to power this project:

Iā€™ve just copied and pasted from this Hubspot blog post about famous quotes. My spreadsheet should be publicly viewable by everyone so feel free to make a copy if you want!

make_copy
make_copy2080Ɨ790 147 KB

Still have some additional functionality to add and will have a more detailed write up tomorrow.

4 Likes
20

@domhnallohanlon Great to see you participating in the challenge! Having staff visible on the forums in creative ways is a plus.

2 Likes
21

Iā€™m done with mine after a lot of struggle and help from @tatiangā€¦
Itā€™s a Book Suggestion App.
Hereā€™s the link:
https://x.thunkable.com/projectPage/605ec6dc78c5f90011f2b56a
WHAT THIS APP DOES
This app, Bookestions(still not sure about the name), is a app to let people from all around the globe recommend books, along with the author, rating and username of the recommender. This is perfect for bookworms(like me) who are always on the lookout for new books to add to their library.

FEATURES

1: THE STAR FUNCTION: This is essentially a ā€˜bookmarkā€™ feature, which allows users to view that book later in ā€˜Settingsā€™.

2: LATEST BOOKS: For people who donā€™t want to surf through all the books, Latest Books displayed the 10 latest additions to the app.

3: FILTER BY CATEGORY: You can filter books by 5 categories- Fiction, Non-fiction, Children, Drama, and Poetry.

4: VIEW STARRED BOOKS: This feature allows users to view their starred/bookmarked books.

5: ADD BOOKS: This feature allows users to recommend books they love, along with author name, rating, and their own username.

NOTES

Iā€™ve made this app in an unorthodox way. For starters, Iā€™ve used a top tab navigator inside a top tab navigator. But Iā€™m happy with the result.
There are a lot of bugs, and the app is pretty slow with bad UI, too.

KNOWN BUGS

1: Latest Books takes a lot of time to load.
2: All the category-filter screens take a lot of time to load, too.
3: The settings screen doesnā€™t automatically update your starred books.
4: You canā€™t un-star a book.

There are a lot more, but I did what I could in 2 daysā€¦ Of course, Iā€™ll be regularly updating the apps.

WHAT Iā€™M WORKING ON/WOULD LIKE TO WORK ON

1: Analyzing the userā€™s book preferences to display books the user will like.

2: Iā€™m working on improving the UI(itā€™s currently terrible).

3: Using DialogFlow and the Assistant component to interact with the user and carry out voice-controlled recommendations.

SCREENSHOTS

image
image499Ɨ863 41.2 KB

All Books: This is the screen where the users can view every single book uploaded in the app.

image
image501Ɨ866 36.9 KB

Categories: Here, users can filter books by their category.

image
image497Ɨ863 39.2 KB

Latest Books: This is the screen in which users can view the 10 most recent additions to the app.

image
image496Ɨ860 42.4 KB

Settings: The screen in which users can view their starred books and change their username.

image
image494Ɨ862 22.2 KB

Add: In this screen, users can enter information about the book to recommend it in the app.

4 Likes