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

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

2. Building the Canvas

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

3. Hiding the Nav Bar

2 min

4. Navigating using option sets

8 min, :star::star::star: one of my favorite concepts.

5. Setting the default nav state

3 min, :star: shows a benefit of using option sets

6. Adding a bit of color

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

7. Adding icons

3 min, :star: very handy

8. Distinguishing by user type

5 min, :star::star: another great use of option sets.

9. Hide nav bar when in mobile

1 min, ok to skip.

10. Creating reusables

5 min, :star::star: another key concept.

11. Passing data to reusables

7 min, :star::star:

12. Left-align the content

7 min, :star::star::star:

40 Likes

This looks like gold! Will feedback tmr!

2 Likes

Love it! Looks great!

2 Likes

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.

2 Likes

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.)

3 Likes

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.

5 Likes

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

Fantastic tutorials. :pray::pray::pray:

2 Likes

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.

1 Like

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

3 Likes

really smart @rico.trevisan

keep em coming

1 Like

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.

1 Like

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. :slight_smile:

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.

4 Likes

Wow, thank you! I’m honored.

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

6 Likes

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?

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

1 Like

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.

2 Likes

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?

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

2 Likes

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.

1 Like

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