What to expect when you run VibeFast for the first time and where to find key features.

Once you have the VibeFast app running on your simulator or device, here’s a quick tour of what you'll see and where to find everything.

The Onboarding Flow

The first time you launch the app, you will be greeted with a multi-step onboarding flow.

What it is: A series of welcome screens that introduce the app's value propositions.
Where to find it: The logic and UI for this are located in src/features/onboarding/.
How it works: This flow is designed to show only once to new users. The useIsFirstTime hook manages this state, and upon completion, it flags the user as having completed onboarding.

Guest Sessions & Authentication

After completing the onboarding, you are automatically signed in with a Guest Session.

What it is: A temporary, anonymous account that allows users to explore the app without creating a permanent account. This is a powerful feature for user retention, handled by @convex-dev/auth.
What to do next: Navigate to the Profile or Settings tab to find the "Sign Up" and "Login" options. Creating a permanent account will allow you to test the full authentication flow.

Exploring the Main Tabs

The app is organized into four main tabs, configured in src/app/(tabs)/_layout.tsx.

🏠 Home

This is the central dashboard where you can access all the feature demos, such as the AI Chatbot, Image Generator, and more.

🎨 Style

A live UI component library. This screen showcases all the custom components from src/components/ui, allowing you to see them in both light and dark modes.

👤 Profile

Displays information for the currently logged-in user (or guest). In local development (APP_ENV=local), this screen also includes a Developer Debug Info section.

⚙️ Settings

Contains options for managing the app, such as changing the theme (light/dark/system), switching the language, and toggling push notifications.

Explore the Settings

The Settings screen is a great place to see how theming (useThemeConfig), internationalization (i18next), and push notification hooks are implemented in a real-world scenario.

What's Next?

You now have a running app and know your way around. The next step is to dive into the Core Concepts to understand how to start building and customizing.

Learn about Authentication to see how the login system works.
Check out the Styling Guide to learn how to use NativeWind.

A Tour of the App