Photo sharing app (like Instagram) in 30 minutes using Bravo Studio and Xano

A) Setup Xano

B) Edit photo API to work with Bravo Image upload

  • In right sidebar click on the toggle to make it hidden from the API
  • Click on SAVE
  • Click on Text to add text field
  • Name the text field ‘image_url’
  • Set required to ‘Yes’
  • Click SAVE
  • Click on content upload
  • Click on create image metadata
  • Highlight the create image from file block and use the 4 arrows icon on the block to reorganize the blocks so this one is above the add record block.
  • In create image from file block change value to ‘image_url’ in the drop down list
  • Click SAVE
  • Set image to Var_1 from the dropdown the output from the create image block

C) Setup the Design in Bravo

  1. Signup for Bravo
  2. Click on Import Figma File
  3. Import this figma file — https://www.figma.com/file/OjR388TcU5ESIhngTEILVP/Foodgram-with-Xano?node-id=0%3A1

D) Setup the APIs in Bravo

  • Signup
Name: Signup
Type: POST
Request URL: <Base Request URL>/auth/signup
Headers : None
Parameters:
Key = email, Value = test@test.com
Key = password, Value = passw0rd
Body:
{
"email" : "${email}",
"name" : "${email}",
"handle" : "${email}",
"password" : "${password}"
}
  • Login
Name: Login
Type: POST
Request URL: <Base Request URL>/auth/login
Headers : None
Parameters:
Key = email, Value = test@test.com
Key = password, Value = passw0rd
Body:
{
"email" : "${email}",
"password" : "${password}"
}
  • Add photo
Name: Add photo
Type: POST
Request URL: <Base Request URL>/photo
Headers : Key = Authorization, Value = Bearer ${auth-token}
Parameters: None
Body:
{
"caption" : "${caption}",
"image_url" : "${image_url}",
"tags" : ""
}
  • Get all photos
Name: Get all photos
Type: GET
Request URL: <Base Request URL>/photo
Headers : Key = Authorization, Value = Bearer ${auth-token}
Parameters: Key = auth-token, Value = <Auth Token from step (B)8>
Body: None
  • Add comment
Name: Add comment
Type: POST
Request URL: <Base Request URL>/comment
Headers : Key = Authorization, Value = Bearer ${auth-token}
Parameters:
Key = auth-token, Value = <Auth Token from step (B)8>
Key = comment, Value = Test Comment
Key = photo_id, Value = 1
Body:
{
"comment" : "${comment}",
"photo_id" : "${photo_id}"
}
  • Get photo comments
Name: Get photo comments
Type: GET
Request URL: <Base Request URL>/comments/${photo_id}
Headers : Key = Authorization, Value = Bearer ${auth-token}
Parameters:
Key = auth-token, Value = <Auth Token from step (B)8>
Key = photo_id, Value = 1
Body: None

E) Bind the APIs to the design in Bravo

  • In the Select Visual Elements list Click on the username element and connect it to email in the binding panel on the right hand side in the Content Destination section. This will bind the input field to this variable which will be used in the request.
  • Click on the password element and connect it to thepassword in the binding panel on the right hand side
  • Change Response Actions — on success to Go to Page — Login.
  • Change Response Actions — on failure to Show Alert with the text ‘Signup Failed’
  • In the Select Visual Elements list Click on the username element and connect it to email in the binding panel on the right hand side in the Content Destination section. This will bind the input field to this variable which will be used in the request.
  • Click on the password element and connect it to thepassword in the binding panel on the right hand side
  • Change Response Actions — on success to Go to Page — Home Screen.
  • Change Response Actions — on failure to Show Alert with the text ‘Login Failed’
  • In the Select Visual Elements list Click on the Post list element and connect it to Items in the binding panel on the right hand side. This will repeat this container element for all the items in the list, so we can bind the content for each item.
  • Click on username element and connect it to Items user handle in the content binding in the right hand panel.
  • Click on **image element and connect it to Items image urlin the content binding.
  • Click on **caption element and connect it to Items captionin the content binding.
  • In the Select Visual Elements list Click on the **image upload element and connect it to image_url field in the binding panel on the right hand side in the Content Destination section. This will bind the input field to this variable which will be used in the request.
  • Click on the **caption element and connect it to thecaption in the binding panel on the right hand side
  • Change Response Actions — on success to Go to Page — Home screen.
  • Change Response Actions — on failure to Show Alert with the text ‘Upload Failed’
  • In the Select Visual Elements list Click on the Comment list element and connect it to Items in the binding panel on the right hand side. This will repeat this container element for all the items in the list, so we can bind the content for each item.
  • Click on username element and connect it to Items user handle in the content binding in the right hand panel.
  • Click on **caption element and connect it to Items commentin the content binding.
  • In the Select Visual Elements list Click on the **comment element and connect it to the comment field in the binding panel on the right hand side in the Content Destination section. This will bind the input field to this variable which will be used in the request.
  • Change Response Actions — on success to Go to Page — Comments.
  • Change Response Actions — on failure to Show Alert with the text ‘Comment Failed’

Testing

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

4 Bit Use-Cases: Build Micro Frontends and Design Systems

Top JS Data Visualization Libraries for Small Business and Startups

.So Files in Android

Understanding the JavaScript call stack

My reading system in Notion

Writeup- VULNHUB -Infovore

Building SPA using React.js and Contentful

JavaScript à la ML

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Toby Oliver

Toby Oliver

More from Medium

Voltura: A Marketing Workshop 05/09/22

Did you know? It’s almost impossible to remain broke while having a smartphone.

Why a Pristine Lamborghini Huracan Was Blown Up to Create 999 NFTs

Quorahub — The Best Free Website for Online Discussion With Industry Expert