πŸ“±

Bravo App Kit: Foodgram

A social app for food lovers! This app has a feed of food photos and caption, the ability to create new post and share existing, and comment on each post.

image

✨ Features

  • Feed (list of posts)
  • Share image on other apps
  • Add new post
  • List of comments for each post
  • Add new comment
  • Horizontal scroll of "stories"
  • Stories using Google Web Stories

πŸ’Ž Resources

Design file: Figma

Duplicate this Figma file into your account and import it into Bravo directly!

Includes

  • Containers setup
  • Bravo Tags in layer names
  • Prototype links for navigation
Data source: Airtable

Open the Airtable and click Copy Base to duplicate to your account.

Includes

πŸ’‘

Even though we'll use Airtable here as our data source, you can use any other third-party tool you wish to store the data.

πŸ— How to build it

Read or watch the tutorial to learn how to build it!

Written step-by-step tutorial

Duplicate the Figma file in the app kit to see how the file is set up.

In this tutorial, we'll cover how to set up the connection between the Airtable and the app UI.

πŸ›  Set up in Bravo

1️⃣ Home feed

🎨 Figma setup

In the Figma file, the Home screen page includes these features:

🏷 Refresh page

🚚 Workflow setup

  1. Request URL
  2. Type: GET

    https://api.airtable.com/v0/TABLE_ID/Posts?view=VIEW_NAME

  3. Select the following data
  4. πŸ’‘

    Select All next to data records

    Change the Name for these two data path (to be used in the request to create new post):

    1. Caption β†’ caption
    2. Data records ID β†’ postid
    3. image

  5. Bind app page to selected data
    1. Post list (container) = Records[]
    2. **image = Records[]Fields.Image[0].Url
    3. **caption = caption
    4. Send (share icon) = Records[]Fields.Image[0].Url
    5. image
2️⃣ Add new post

🎨 Figma setup

In the Figma file, the New Post page includes these features:

🏷 Form inputs

🚚 Workflow setup

  1. Request URL
  2. Type: POST

    https://api.airtable.com/v0/TABLE_ID/Posts

  3. Parameter
  4. Test image URL:

  5. Body
  6. {
      "records": [
        {
          "fields": {
            "Caption": "${caption}",
            "Image":[
                   {
                      "url":"${url}"
                   }
                ]
             }
          }
       ]
    }

  7. Selected data
  8. image

  9. Bind page to selected data
    1. **image upload = url
    2. **caption = caption
    3. image

  10. Response Actions
  11. On success: Go to page: Home screen

    On error: Show alert

3️⃣ Comments list

🎨 Figma setup

In the Figma file, the Comments page includes these features:

🏷 Refresh page

🚚 Workflow setup

  1. Request URL
    1. Type: GET

      https://api.airtable.com/v0/TABLE_ID/Comment?filterByFormula=%7BPosts%7D%20%3D%20%27${caption}%27

      This may look like gibberish. It is an URL encoded. If you put it in an URL decoder, it is: https://api.airtable.com/v0/TABLE_ID/Comment?filterByFormula={Posts} = '${caption}'

    2. The blue part denotes the URL of your table data
    3. The orange part denotes how you want to display the data
      1. Posts = name of the table linked to this table
      2. caption = the input variable that determines which data from the Comments table is displayed.
      3. In this case, we want to display the comments specific to each post - and the "caption" column is how we differentiate each posts.

        ⚠️

        This input variable must match the "Name" of the corresponding data path in the "Posts" request - this way the two requests link together.

        Selected Data from the
        Selected Data from the Posts request.

  2. Parameter
    1. As we have an input variable in the request, we need to input a sample value to retrieve data.

    2. Key = caption (your input variable)
    3. Value = any existing caption from the table
    4. image

  3. Selected data
    1. Data records
    2. Comment
    3. πŸ’‘

      Select All next to data records

      image

  4. Bind page to selected data
    1. Comment list (container) = Records[]
    2. **caption = Records[] Fields Comment
    3. image

4️⃣ Add new comment

🎨 Figma setup

In the Figma file, the Comments page includes these features:

🏷 Form inputs

🚚 Workflow setup

  1. Request URL Type: POST
  2. https://api.airtable.com/v0/TABLE_ID/Comment

  3. Body
  4. {
      "records": [
        {
          "fields": {
            "Comment": "${comment}",
            "Posts": [
              "${postid}"
            ]
          }
        }
      ]
    }

  5. Parameter
    1. Get the postid from the Home screen request
    2. image

  6. Selected data
  7. image

  8. Bind page to data
    1. **comment (input text area) = comment
    2. image

  9. Response Actions
  10. On success: Go to page: Comments screen

    On error: Show alert

Webinar walkthrough

Happy Bravorizing! πŸŽ‰