No Code Mobile App Design and Development Bravo Studio + Figma + GraphCMS + CSS

Twittersphere - https://twitter.com/dravasps
Checkout my work on Adobe Behance Network - https://behance.net/dravasp

Read the Medium.com Documentation -  https://medium.com/@dravaspshroff/you-can-get-started-quickly-with-your-mobile-app-design-using-bravo-starter-kit-by-logging-in-to-609f8075a74e

00:00 BravoStudio - Importing UI Starter Kit
01:01 GraphCMS - Creating a Content Model
01:37 GraphCMS - Choosing Datacenter Location
01:58 GraphCMS - Creating a Content Model
03:38 GraphCMS - Adding Data to Newly Created Content Model
04:51 Enabling Permissions for API Access
05:15 Adding Generated Access Token to BravoStudio under Data Binding Tab
06:16 Copying Endpoint URL from GraphCMS to BravoStudio
06:43 Performing Query in API Playground with the help of Explorer
07:19 Opening Endpoint URL via a new tab that opens GraphiQL to make sure all Content Types (created at 03:38) are Referenced Correctly with expected Response on the right column
07:28 Copy the modified URI with the response in the browser address bar and add that to BravoStudio
07:32 Making a "GET Request" inside of BravoStudio to "fetch data" from GraphCMS - Alternatively, you can make "POST Request" as well to "add Data" (content type - New Restaurant) to your Content Model
07:42 Select Data generated from the API GET Request you just made & add Sample Values to the Selected Data as shown
07:58 Navigate to Projects Tab in BravoStudio and Open Screens to Select Element that will Bind to the Selected Data Step by Step
08:45 Search "BravoVision" for Android or iOS (Apple) & install it to view the ready app - You will have to reload the BravoVision Preview app after each change you make in the design - Repeating Data Binding Step isn't required as all changes are saved automatically in BravoStudio - unless, ofcourse, you are adding a new element that isn't mapped

GraphCMS is the Headless CMS allowing you to build digital experiences the way you envisioned them - with all your backends, frontends, and services, working together in harmony. GraphCMS is the ultimate content platform that enables you to deliver ambitious applications at scale, API first, using your preferred frameworks. GraphQL makes for the Best CMS - GraphCMS harnesses the power of GraphQL to radically decrease time-to-market. Choose from over 5 Regions to store and retrieve data via GraphQL endpoint
Docs - https://graphcms.com/docs
On the Web - https://graphcms.com/

BravoStudio - From Design to native iOS and Android app. No-code - Design & Import a Figma app prototype into Bravo and learn about ?️ Tags & ? Containers - Connect GraphCMS or any API Airtable data to your app - Request App Packages and publish your Bravorized app to Google Play or App Store - Any data changes that happen externally will reflect in your app, just like the real thing.

Get the BravoStudio UI Starter Kit - https://www.figma.com/file/j6fTAXR5iUOudM0cR4LwNz/Bravo-Sample%3A-Foodies-app?node-id=0%3A1

Download the Bravo Vision previewer app to view your app projects on your phone!

Download for iOS - https://apps.apple.com/app/bravo-vision/id1470931833?l=en
Download for Android - https://play.google.com/store/apps/details?id=com.appfoundry.previewer&hl=en

Sports App - https://www.bravostudio.app/resources-templates
Your all-about-football app with playable YouTube videos, virtual stadium tour, and share functionality.

Recipes App
App filled with healthy recipes to improve your daily nutrient gains.

Adventure App
Everything you need to see to plan your next adventure anywhere in the world.

Community - https://spectrum.chat/bravo-studio

Figma - Bring your ideas to life faster in animated prototypes that feel like the real thing. Get insights from users and test concepts earlier and more often.
Templates - https://www.figma.com/templates/
Plugins - https://www.figma.com/community/explore?tab=plugins
Lottie Animation and Community - https://www.figma.com/community/explore?tab=files

Resources for Making this Video -

Vimeo Screen Recorder - https://youtu.be/idbBmAdGWTw
Adobe Illustrator - https://www.adobe.com/in/products/illustrator.html
Adobe Premiere Pro - https://www.adobe.com/in/products/premiere.html
Figma Design - https://www.figma.com/

Audio - H5 audio DESIGN - Nostalgia _ - Future Chill bass
Link to Soundcloud - https://soundcloud.com/h5-audio-design/track-369

Imagery via Unsplash.com
Vector Art Sphere via Freepik.com - Invitation vector created by GarryKillian

Font - Kumbh Sans via Google Fonts

Hardware Dell Inspiron 15 3576 - https://www.dell.com/support/home/en-in/product-support/product/inspiron-15-3576-laptop/docs
Acer 31.5-inch (80.01 cm) 2560 x 1440 WQHD IPS Panel Monitor - Eye Care Features, Blue Light Filter, Flickerless - EB321HQU (Black) - https://www.amazon.in/gp/product/B077BSWLTL/ref=ppx_yo_dt_b_asin_title_o07_s00?ie=UTF8&psc=1
Windows 10 Pro OEM Global - https://www.vip-scdkey.com/sk/weskyprint

Drop in a comment down below!