Bravo Studio + Xano: Build a photo sharing app (similar to Instagram)

Are you ready to create a photo-sharing application similar to Instagram in just 20-30 minutes? In this step-by-step guide, we'll show you how to build a fully functional photo-sharing app using Xano, a no-code backend platform, and Bravo Studio, a front-end design tool that integrates with Figma. Let's get started!

Prerequisites

Before we begin, make sure you have the following:

• A Xano account (sign up for free at xano.io)
• Bravo Studio installed on your computer (download from bravodesignsystem.com)
• The Bravo Vision mobile app installed on your smartphone (available on iOS and Android)

Step 1: Install the Photo Sharing Template in Xano

1. Log in to your Xano account and create a new workspace. Name it "Photo Sharing App with Bravo Studio" and click "Continue."
2. On the "Start with Template" page, select the "Photo Sharing Social Media Platform" template. This will automatically install the backend for our photo-sharing app, similar to Instagram.

Step 2: Edit the "Add Photo" Endpoint in Xano

1. Navigate to the API group in your Xano workspace.
2. Open the "Add Photo" endpoint and click on the "Image" endpoint.
3. Hide the "Image" input by unchecking the "Show" option.
4. Add a new "Text" input and name it "Image URL." Mark it as "Required."
5. Go to the "Content" section and click on "Upload."
6. Create a new variable called "image" and set its value to the "Image URL" input.
7. Drag the "Create Image Metadata" function above the "Add Record to Photo Table" function.
8. Click on the "Create Image Metadata" function and ensure that the "Image" field is mapped to the "image" variable you just created.
9. Click "Save" to apply the changes.

Step 3: Import the Figma Design in Bravo Studio

1. Open the Figma file URL provided in the guide.
2. Copy the URL from your browser's address bar.
3. Open Bravo Studio and click on "New Project."
4. Paste the Figma file URL and click "Create Project."
5. Wait for Bravo Studio to import the Figma design as your application's front-end.

Step 4: Set Up APIs in Bravo Studio

Follow the steps in the guide to set up the APIs in Bravo Studio:

1. Go to the "Data Library" and create a new collection called "Photo Sharing with Xano."
2. Set up the following endpoints by copying the request URLs from Xano and adding any required parameters or request bodies:

• Sign Up
• Login
• Add Photo
• Get Photos
• Add Comment
• Get Photo Comments

Remember to name each endpoint appropriately and set the correct HTTP method (GET, POST, etc.).

Step 5: Bind APIs to the Design in Bravo Studio

1. In Bravo Studio, open the project with the imported Figma design.
2. Follow the guide's instructions to bind the APIs to the corresponding pages and UI elements, such as:

• Sign Up page: Bind username and password inputs, set success and error actions.
• Login page: Bind username and password inputs, set success and error actions.
• Home Screen: Bind the post list to the "Get Photos" API, displaying usernames, images, and captions.
• New Post Screen: Bind the image upload and caption inputs to the "Add Photo" API, set success and error actions.
• Comment Screen: Bind the comment list to the "Get Photo Comments" API, displaying usernames and comments.
• New Comment Page: Bind the comment input to the "Add Comment" API, set success and error actions.

Step 6: Test the Application with Bravo Vision

1. Install the Bravo Vision mobile app on your smartphone (iOS or Android).
2. In Bravo Studio, click "Preview the App on Your Phone" and scan the QR code with Bravo Vision.
3. Test the application by signing up, logging in, uploading photos, adding captions, and leaving comments.

Congratulations! You've successfully built a photo-sharing application using Xano and Bravo Studio in under 30 minutes. This demonstrates the power of combining no-code tools for backend development (Xano) and front-end design (Bravo Studio) to quickly bring your ideas to life.