Single-page application framework: App Shell [free tutorial]

[rico.trevisan]

One of my biggest struggles when building an app was how to organize the damn thing. Over the years, I’ve scrapped together a single-page application framework that I refer to as App Shell.

It has worked wonders for my apps and those of my customers. Hopefully it can help you out.

---

1. Intro and Key Concepts

2 min

Bubble.io App Shell tutorial. 1: Intro and key concepts

2. Building the Canvas

18 min, a bit ranty, skip if you’re advanced

Bubble.io App Shell tutorial. 2: Building the canvas

3. Hiding the Nav Bar

2 min

Bubble.io App Shell tutorial. 3: Hiding the nav bar

4. Navigating using option sets

8 min, one of my favorite concepts.

Bubble.io App Shell tutorial. 4: Navigation in single-page apps using options

5. Setting the default nav state

3 min, shows a benefit of using option sets

Bubble.io App Shell tutorial. 5: Setting the default nav state

6. Adding a bit of color

5 min, skip if you’re not into design stuff.

Bubble.io App Shell tutorial. 6: Adding a bit of character to the navigation bar

7. Adding icons

3 min, very handy

Bubble.io App Shell tutorial. 7. Adding icons to the navigation bar

8. Distinguishing by user type

5 min, another great use of option sets.

Bubble.io App Shell tutorial. 8: Different menu items by user type

9. Hide nav bar when in mobile

1 min, ok to skip.

Bubble.io App Shell tutorial. 9: Nav bar moves away when in small format

10. Creating reusables

5 min, another key concept.

Bubble.io App Shell tutorial. 10: Creating the first reusable

11. Passing data to reusables

7 min,

Bubble.io App Shell tutorial. 11: Passing data to reusables

12. Left-align the content

7 min,

Bubble io App Shell tutorial. 12: left align the content group

[lucas.ar]

This looks like gold! Will feedback tmr!

[chris.williamson1996]

Love it! Looks great!

[eLPDev]

Thanks for sharing, @rico.trevisan! What was that cool color popup that you kept using during the design video? It slid up from the bottom of your screen.

[rico.trevisan]

It’s Paste. Over the years I’ve copied a bunch of the TailwindCSS colors to it.

I get Paste via the app subscription service, Setapp. I cannot recommend it highly enough.
(use this referral link. and we both get a free month.)

[rico.trevisan]

Thanks for all the feedback and questions (I got some DMs here and on Twitter). I’m gonna groom my beard, iron some shirts, set up my camera, and embody my inner @gregjohnkeegan and remake these tutorials.

OK, I gotta go buy some beard oil first.

[timgarrett111]

Awesome! thank you very much! I’m just wondering how secure it is passing parameters through the url?

Fantastic tutorials.

[rico.trevisan]

That’s a good question. I don’t think so, but I haven’t pushed the edges of this. I’m passing around unique IDs which don’t “leak” much information by themselves.

I guess that as long as your privacy settings are properly set up, you should be good.

[rico.trevisan]

Added a new chapter to left-align the content group.

Bubble io App Shell tutorial. 12: left align the content group

[MattDot]

really smart @rico.trevisan

keep em coming

[mav]

Great video.
How to see the “dimentions: responsive” change in the top bar of the browser?
EDIT: Found it. “F12” the second left phone/tab icon.

Bubble.io App Shell tutorial. 2: Building the canvas

[Perfect]

You have opened my eyes and completely changed the course of my startup! From the bottom of my heart, I would like to thank you.

I started transitioning my app into a single page via the use of conditionals which was messy & flawed. 20 different “don’t show when” conditionals per every group page is just bad programming, though, I didn’t know any other ways to accomplish it.

Using options sets & parameters has made eveything 100x easier and faster. It’s even inspired me to do a complete UI overhaul now that the entire app is on a single page, and I can have these elements talking to each other.

I started Bubble last year in HS, and this is the most excited I’ve ever been. Good design finally meets good performance!!!

Seriously I might name my firstborn after you bro.

[rico.trevisan]

Wow, thank you! I’m honored.

That newborn will have a place to stay anytime he/she swings by Belgium!

[mav]

Hi Rico, Wonderful tutorial.

I have a small problem.
I think the problem is in two places.

1. The video in the second tutorial is blurry so maybe I’m missing something there.
2. I’ve used an open/close in one menu image (yes/no) instead of two links, and I think that’s causing the problem.
   I’ve tried to make the _nav options go from group content to another and it’s not working.
   I don’t get the automatic options you get in the tutorial like in here.
   Do you know what I’m doing wrong?

[mav]

Fixed it somehow.
Some groups were seen and some were not.
I think the problem was with the layout visibility.
Made all groups hidden.

[rico.trevisan]

I’ve gotta make some space for a refactoring of that video - you’re not the only to mention it. Also, I need to “port it” to the new engine.

[mav]

Cool.
For some reason it now shows me one issue “Go to page index must be the last action in the workflow”.
When I move it to the end, it won’t show me the moves of the groups when I click on the nav options.

I’ve made the menu close automatically when clicking on the options in the nav, I don’t know if that made the problem or not.
If I delete the “go to page index” it won’t show moves of the groups.

What’s wrong?

[rico.trevisan]

I found it more efficient to close the menu on the page load instead.

[privatesoap59]

Hi, Im a total beginner in Bubble. Can you please share how do you create the preview page as shown in your videos? As in it allows you to drag and resize the screen to test out different screen resolution.

[robin_rob96]

Hi, I’ve used your videos to switch from a MultiPageApp to a SPA with the tricks showed.

Now I realised, that if i want to have a native App, I can’t use Go to page: index (With additional page parameters of course).

So, what is the best way? Don’t using page parameters at all and using only states for managing current visible group/ reusable component?

(You might have additional tipps for going full native support)
Thx