Foodgram: Social content sharing
Last updated
Last updated
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:
Table Posts: Feed of photos & captions
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
Displays the photos and captions in a list.
Name | Type | Description |
---|---|---|
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) |
|
image |
|
caption |
|
Send (share icon) |
|
In the Figma file, the Home screen page includes these features:
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:
Under the Test Values panel, input this:
Key | Value |
caption |
|
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 |
|
**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
Related article: Connect to an API POST request
GET
https://api.airtable.com/v0/TABLE_ID/Comment?filterByFormula={Posts}='${caption}'
Displays the list of comments associated with each post.
Name | Type | Description |
---|---|---|
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 |
|
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) |
|
**caption |
|
In the Figma file, the Comments page includes these features.
POST
https://api.airtable.com/v0/TABLE_ID/Comment
Creates a new record of comment in the database.
Name | Type | Description |
---|---|---|
string |
Under the Body > JSON panel, input this:
Under the Test Values panel, input this:
Key | Value |
comment |
|
postid | Get the |
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) |
|
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! 🎉