In the Bravo community, builders often push the boundaries of what’s possible and this time, Bravo Expert Juan Carlos took on a challenge straight from the feature request board:
“Can we build an interactive map with avatars and a dynamic list view?”
The result? A fully functional, AI-assisted prototype built using Figma Make, Cursor, Bravo Studio, and Xano — all working seamlessly together.
Every great app starts with design.
Juan Carlos used Figma Make to generate the base layout — a dark map view, user avatar markers, and bottom cards.
With a few text prompts, Make created a clean, editable Figma file ready for Bravo.
Next, he moved into Cursor, the AI-powered code editor, to convert that Figma design into a self-contained HTML, CSS, and JavaScript component.
In just a few prompts, Cursor generated a working prototype:
After perfecting the web component, he embedded it directly inside Bravo Studio as a custom web view and connected it to Xano for live data.
This setup allows the map to:
The final result is an interactive, dynamic map running inside a Bravo app.
Users can pan, zoom, and explore, while Bravo handles navigation and data flow.
Juan Carlos also shared how you could:
This project shows how far AI-assisted app creation can go:
Together, they make it possible to prototype advanced features without needing to build native apps from scratch.
Check out Bravo Studio and start building your own custom web components.
And if you want to see more builds like this or need help with your project, contact Juan Carlos, our Bravo Expert!
.svg){kind=logo}
