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. 1.
    Table Posts: Feed of photos & captions
  2. 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.
get
https://api.airtable.com
/v0/TABLE_ID/Posts?view=VIEW_NAME
Home feed
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:
post
https://api.airtable.com
/v0/TABLE_ID/Posts
Add new post
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
get
https://api.airtable.com
/v0/TABLE_ID/Comment?filterByFormula={Posts}='${caption}'
Comments list
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.
Selected data from the GET: Home feed request.
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.
post
https://api.airtable.com
/v0/TABLE_ID/Comment
Add new comment
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! 🎉