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.
- 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
Duplicate this Figma file into your account and import it into Bravo directly.
Includes: containers, Bravo tags in layer names, prototype links for navigation
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.
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 |
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> |
In the Figma file, the New Post page includes these features
- 1.
- 2.
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 |
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> |
In the Figma file, the New comment page includes these features
Happy Bravorizing! 🎉