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

A) Setup Xano

1.Signup with Xano

B) Edit photo API to work with Bravo Image upload

1.Click on API on the left hand side

  • Click on SAVE
  • Click SAVE
  • In create image from file block change value to ‘image_url’ in the drop down list
  • Click SAVE

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

We need to add all the api requests that we need from Xano in Bravo:

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}"
}
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}"
}
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" : ""
}
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
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}"
}
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

Now that we have the APIs in Bravo the last step is to connect them to the app design. Go into the Foodgram with Xano app so you can see all the screens.

  • 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’
  • 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’
  • 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.
  • 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’
  • 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.
  • Change Response Actions — on success to Go to Page — Comments.
  • Change Response Actions — on failure to Show Alert with the text ‘Comment Failed’

Testing

You should now be able to test your app in Bravo Vision, signup and then login and add images and comment on them.

--

--

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