Foodgram: Social content sharing

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

โœจ 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, Bravo tags in layer names, prototype links for navigation

Data source: Airtable

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

Database structure:

  1. Table Posts: Feed of photos & captions

  2. Table Comment: comments of every photo

Tip: Even though we use Airtable in this tutorial as our data source, you can use any third-party backend tool you want to store the data.

๐Ÿ— How to build it

Follow the steps below or watch the tutorial to learn how to build it! In this tutorial, we'll cover how to set up the connection between the Airtable and the app UI.

Home feed

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

Displays the photos and captions in a list.

Query Parameters

NameTypeDescription

view

string

Display the photo feed list in the same order as the table.

Under Received Data, select the following 4 data paths in the screenshot below.

Note: Select "All" next to .data.records[] to select all the records of the table, rather than a specific row.

Change the Name of these two data paths. They will need to match the variables used later in the app page for creating a new post.

Data Path

Name

.data.records[].fields.Caption

caption

.data.records[].id

postid

Go to the app project and select the home screen to open data binding mode. Bind the following UI elements with the respective data.

UI element

Data

Post list (container)

Records[]

image

Records[]Fields.Image[0].Url

caption

caption

Send (share icon)

Records[]Fields.Image[0].Url

๐ŸŽจ UI setup

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

Add new post

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

Creates a new record of photo and caption in the database.

Under the Body > JSON panel, input this:

 {
   "records": [
     {
       "fields": {
         "Caption": "${caption}",
         "Image":[
                {
                   "url":"${url}"
                }
             ]
          }
       }
    ]
 }

Under the Test Values panel, input this:

Key

Value

caption

test

url

https://cdn.shopify.com/s/files/1/2994/0144/files/header_default.jpg (or any image URL)

Hit Send to send the request. Under Received Data, select the following 2 data paths in the screenshot below.

Go to the app project and select the New post page to open data binding mode. Bind the following UI elements with the respective data.

UI element

Data

**image upload

url

**caption

caption

Under Response Actions, configure the following:

Event

Response action

โœ… On success

Go to page: Home screen

โŒ On error

Show alert: <input your own alert>

๐ŸŽจ UI setup

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

Related article: Connect to an API POST request

Comments list

GET https://api.airtable.com/v0/TABLE_ID/Comment?filterByFormula={Posts}='${caption}'

Displays the list of comments associated with each post.

Query Parameters

NameTypeDescription

filterByFormula

string

Filters data based on specific field values




filterByFormula explained

  • {Posts} = name of the table linked to this table

  • ${caption}= the input variable that determines which data from the Comments table is displayed.

In this case, we want to display the comments specific to each post - and the "caption" column is how we differentiate each post.

This input variable "caption" must match the "Name" (under "Selected Data") of the corresponding data path in the Home feed request - this way the two requests link together.

As we have an input variable in the request URL, we need to input a test value in order to retrieve data. Under Test Values panel, input this:

Key

Value

caption

Bread matters (or any existing caption from the table)

Hit Send to send the request. Under Received Data, select the following 2 data paths in the screenshot below.

Note: Select "All" next to .data.records[] to select all the records of the table, rather than a specific row.

Go to the app project and select the Comments page to open data binding mode. Bind the following UI elements with the respective data.

UI element

Data

Comment list (container)

Records[]

**caption

Records[] Fields Comment

๐ŸŽจ UI setup

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

Add new comment

POST https://api.airtable.com/v0/TABLE_ID/Comment

Creates a new record of comment in the database.

Path Parameters

NameTypeDescription

string

Under the Body > JSON panel, input this:

 {
   "records": [
     {
       "fields": {
         "Comment": "${comment}",
         "Posts": [
           "${postid}"
         ]
       }
     }
   ]
 }

Under the Test Values panel, input this:

Key

Value

comment

test

postid

Get the postid from the Home screen request, it's an id string that starts with rec...

Hit Send to send the request. Under Received Data, select the following data path in the screenshot below.

Go to the app project and select the Comments page to open data binding mode. Bind the following UI elements with the respective data.

UI element

Data

**comment (input text area)

comment

Under Response Actions, configure the following:

Event

Response action

โœ… On success

Go to page: Comments

โŒ On error

Show alert: <input your own alert>

๐ŸŽจ UI setup

In the Figma file, the New comment page includes these features

๐Ÿ“บ Webinar walkthrough

Happy Bravorizing! ๐ŸŽ‰

Last updated