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

Bravo Sample: Foodgram appFigma

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

Name	Type	Description
view	string	Display the photo feed list in the same order as the table.

200

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:

1. Container: Top bar

2. Text: Flexo

3. Container: Horizonal slider

4. Open share dialog

5. Refresh page

6. Connect to API GET request for lists

Add new post

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

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

200

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

1. Form inputs

2. Page transitions

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

Name	Type	Description
filterByFormula	string	Filters data based on specific field values

200

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.

1. Page transitions

2. Refresh page

3. Text: Flexo

4. Connect to any API: GET request for lists

Add new comment

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

Creates a new record of comment in the database.

Path Parameters

Name	Type	Description
	string

200

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

1. Form inputs

2. Fixed modal page

3. Connect to an API POST request

📺 Webinar walkthrough

Happy Bravorizing! 🎉