Single Page Application (SPA) Design - Bubble.io Tutorial

@neilryanpierce recently had a couple of great videos on how to design a Single Page Application ("SPA") in Bubble. I liked his approach so much that I decided to put together my own tutorial (which is basically a condensed version of what he's done)!

Single Page Applications are often make for a more pleasant user experience and are common-place in many modern SaaS apps. We can build SPAs in Bubble fairly easily using:

- Reusable elements
- Conditionals
- Option sets
- Navigation with arbitrary text

🎨 Check out our Templates and Plugins:

💼 Hire us to build your custom app

Timeline
00:00 Introduction
00:42 Building the side navigation
01:25 Setting up the dashboard
02:46 Building the "home" view section
04:15 Building the "inbox" view section
05:35 Option sets
05:59 Navigating to sections using arbitrary text/option sets
07:04 Showing views based on URL
08:46 Conditional formatting based on URL
14:17 Setting the default view

[jermainecallender]

Hi great video, thanks for your time, how do I pass data from one element to another, coming from a Group - post into a repeating group cell - home feed? I tried using unique ID but nothing as yet, limited videos on SPA's.

[crowdy]

ey! can you do a screenplay writer like the celtx one?

[BenLenzo]

Thanks for this. Just wondering if it's an SPA why use the reusable element for the sidebar vs just building it on the page? Is there an advantage in this instance?

[michalgala]

Hello, thank you for this tutorial, I am new to Bubble and your channel is helping a lot!

I have a question about this video.
I find it a little bit hacky to use the "get option", then item #2 ect.. Why couldn't we use "states" to do the reach the same goal? The buttons on the left sidebar setting a state, and the main view displaying something based on this state.
I discovered that the state of the resusable element 'sidebar nav" cannot be used outside of this context, maybe you know a hack to make it work with states?

[taciusa]

do you have any Demo example, of SPA which u have made on Bubble? Trying to convince my company to adopt it using bubble

[thestoneparadox]

Hi, I followed your tutorial but ran into a small problem I hope you can help me out with.
The dashboard page would be the 2nd page viewed in my app when a user logs into the app, the first page being the index page.

User logs in which normally would send current user data to the dashboard page. And normally the content of the dashboard page would be set to User.

I found that since I am using the arbituary text, I cannot set the dashboard content to user. Therefore, what do you suggest as a way to log the user in from index, and for the user to go to the dashboard with their specified data?

If I didn't explain that well enough:
Change your dashboard page content to user and you will see errors. How would you go about fixing those errors to allow the current page user to read their specified data, yet allow the the current arbitrary functionality to work in the manner you setup?

[stengilson]

hi there, ive copied your tutorial to a T but the tabs wont show when i click the tabs, i see them come up ats the top url but just not showing.
any ideas?

thanks

[maryamahmedseager]

Hi thank you so much for the tutorial. I really like the way you explained all the details and this video was foundational in helping me set up my social media web app. One question I have is similar to the person above.

You are probably familiar that when building multi-page apps in bubble there is the "current user" and "current page user". Setting a page's data type to user allows me to select current page user for that page to display another user's profile info like photo, bio, username etc.

Unfortunately when using the above reuseable views, I'm unable to use current page user since the "dashboard" view doesn't have a data type set and it is not a different page. Any advice on how to overcome this limitation would be greatly appreciated. Otherwise I would need to restructure my entire application 😔