Onboarding v1 – Improving what you see when you first open the app

[drfarrell]

We need to make it clearer to the user what they can do with Onlook, and how to get up-and-running.

As of August 24, 2024, this is what we have:

But it was recommended by Sudeep MP (sharpshooter90) to automatically detect what is already running or available in localhost, see what framework it is on, and present that to the user. He mocked it up here: https://excalidraw.com/#room=e7bdab1e2068f2403533,vchMIF3jaGxLvYWtP8aQwQ

My questions for discussion:

1. How much information can we detect from a project? How may we go about detecting a framework?
2. If Installing Onlook on the project is a requirement, how may that change what goes on the first screen?
3. What are some empty-states / onboarding screens that you like from a design standpoint?
4. We are hoping to eventually design from scratch (which would mean we would start and create pre-configured files for you). How may we want to accommodate that in future onboarding screens?

[Kitenite]

How much information can we detect from a project? How may we go about detecting a framework?

Depends on if the project is running, if we have the folder location of the project. If so, we can pretty much tell anything.

If Installing Onlook on the project is a requirement, how may that change what goes on the first screen?

We'd have you set up your project URL. We would not let you put in a URL that is not localhost. We could even have a linkage screen where we initially detect the project framework, whether Onlook is installed, etc.

What are some empty-states / onboarding screens that you like from a design standpoint?

1. Create from existing
2. Continue existing
3. Start from template

We are hoping to eventually design from scratch (which would mean we would start and create pre-configured files for you). How may we want to accommodate that in future onboarding screens?

Let's just support one from scratch format for now