# 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. ![](/files/-MeeNiMpzwuXuVpT_3hT) ## ✨ 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 {% embed url="" %} ### ### **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 {% embed url="" %} {% hint style="info" %} **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. {% endhint %} ## 🏗 How to build it Follow the steps below or [watch](/get-started/help-and-tutorials/app-cases/bravo-app-kit-foodgram.md#webinar-walkthrough) 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. | {% tabs %} {% tab title="200 " %} ``` ``` {% endtab %} {% endtabs %} Under **Received Data**, select the following 4 data paths in the screenshot below. {% hint style="warning" %} **Note:** Select **"All"** next to **.data.records\[]** to select **all** the records of the table, rather than a specific row. {% endhint %} ![](/files/-Meed0Q4LQkg1j_QzCl_) 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](/bravo-tags/containers/container-top-bar.md) 2. [Text: Flexo](/bravo-tags/components/component-flexible-text.md) 3. [Container: Horizonal slider](/bravo-tags/containers/container-horizontal-slider.md) 4. [Open share dialog](/bravo-tags/mobile-actions.md) 5. [Refresh page](https://bravostudio.notion.site/7dae4abec25b441eac8044a73e000acc?v=04dc905954ff4103b3eb7279512a913b) 6. [Connect to API GET request for lists](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable.md) ## Add new post `POST` `https://api.airtable.com/v0/TABLE_ID/Posts` Creates a new record of photo and caption in the database. {% tabs %} {% tab title="200 " %} ``` ``` {% endtab %} {% endtabs %} Under the **Body** > **JSON** panel, input this: ```jsx { "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. ![](/files/-MeembAOVmssj34HfGFs) 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: \ | ### **🎨 UI setup** In the Figma file, the **New Post** page includes these features 1. [Form inputs](https://www.figma.com/community/file/981976861747536392) 2. [Page transitions](https://www.figma.com/community/file/981975323423403527) Related article: [Connect to an API POST request ](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/data-library-connect-to-any-api-post-request.md) ## 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 | {% tabs %} {% tab title="200 " %} ``` ``` {% endtab %} {% endtabs %} {% hint style="info" %} **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. {% endhint %} {% hint style="warning" %} 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. {% endhint %} ![Selected data from the GET: Home feed request.](/files/-Mef3fgJouKD4tNg1xn2) 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. {% hint style="warning" %} **Note:** Select **"All"** next to **.data.records\[]** to select **all** the records of the table, rather than a specific row. {% endhint %} ![](/files/-Mef4yVUvscmnPZOTFWt) 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](https://www.figma.com/community/file/981975323423403527/Bravo-Sample%3A-Page-Transitions) 2. [Refresh page](https://bravostudio.notion.site/7dae4abec25b441eac8044a73e000acc?v=04dc905954ff4103b3eb7279512a913b) 3. [Text: Flexo](/bravo-tags/components/component-flexible-text.md) 4. [Connect to any API: GET request for lists](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable.md) ## 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 | | {% tabs %} {% tab title="200 " %} ``` ``` {% endtab %} {% endtabs %} Under the **Body** > **JSON** panel, input this: ```jsx { "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. ![](/files/-Mef8CrapXZA8Mw0WB_j) 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: \ | ### ### **🎨** UI setup In the Figma file, the **New comment** page includes these features 1. [Form inputs](https://www.figma.com/community/file/981976861747536392) 2. [Fixed modal page](https://www.figma.com/community/file/967380255651810770) 3. [Connect to an API POST request](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/data-library-connect-to-any-api-post-request.md) ## **📺 Webinar walkthrough** {% embed url="" %} Happy Bravorizing! 🎉 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.bravostudio.app/get-started/help-and-tutorials/app-cases/bravo-app-kit-foodgram.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.