Skip to main content

​
1. Setting Up the Foundation

The foundation of any Superun project is a clear prompt. For this tutorial, we’ll build an AI-powered travel planner. Example prompt
Create an AI travel planner web app with the following features:
• Landing page, trip dashboard, and an itinerary details page.
• Inputs for destination, dates, budget, and traveler preferences.
• AI-generated itineraries with hotel, activity, and restaurant suggestions.
• User accounts and saved trips powered by Supabase.
• Clean, mobile-responsive UI suitable for both desktop and mobile.
Once Superun generates the initial project:
  • Review the navigation (landing page → dashboard → trip details).
  • Make sure each page roughly matches the intent of your prompt.
  • Adjust your prompt if sections are missing or the tone feels off.
ℹ️ Tip
Be explicit about starting from the UI. Superun works best when you outline navigation, page types, and your target users early in the prompt.

​
2. Refinement Questions: Tuning Your Idea

After you submit your initial prompt, Superun will ask a short series of follow-up questions.
This step helps Superun translate your idea into a more precise product blueprint. You might see questions such as:
  • Which platforms inspire the experience you want to create?
    For example:
    • Linear (clean, fast dashboards)
    • Notion (intuitive, organized workspaces)
    • Airbnb (visual, user-friendly booking flow)
  • What makes your platform unique in the market?
    Options could include:
    • AI-powered planning or recommendations
    • Real-time monitoring or alerts
    • A comprehensive analytics experience
    • Tight integrations with tools your users already use
  • What features should this initial version include?
    For an AI travel planner, you might choose:
    • Dashboard + Trip list + Analytics
    • Dashboard + Multi-trip overview + Filters
    • Dashboard + Collaboration tools + Alerts
Your answers shape:
  • the tone and style of the UI
  • which core pages and modules Superun generates
  • what data models and backend structures are created
  • where AI and automation will show up in the product
ℹ️ Why this matters
Treat this step like a quick product interview. The more honestly you answer, the closer Superun’s output will match the product you have in mind.

​
3. Choosing a Direction with Branch Selection

Before you commit to a single layout, Superun helps you explore multiple visual directions. After you complete your prompt and refinement questions:
  1. Superun generates four design branches for your app.
  2. Each branch includes preview images showing the overall layout and style.
  3. Open each preview to compare typography, spacing, and hierarchy.
  4. Select one branch to continue with — this becomes your main design direction.
  5. If needed, regenerate branches later from an updated prompt.
Use branches to try different moods for the same app:
  • Minimal, productivity-focused layout
  • Friendly, consumer-style layout
  • Bold, marketing-driven layout
  • Compact dashboard-first layout
ℹ️ Tip
Keep your prompt mostly the same while exploring branches. That way you’re comparing visual style and layout, not completely different feature sets.

​
4. Designing and Editing the UI (Editable Design & Boxify)

Superun emphasizes a step-by-step approach to designing your app, similar to constructing a building. Start with scaffolding
  • Superun lays out the main structure:
    • Landing page hero, value propositions, CTA
    • Trip search & filters
    • Dashboard with saved trips
    • Itinerary details view
    • Account or settings pages
Add the first layer
  • Superun fills each page with basic elements:
    • Cards, buttons, forms, and navigation
    • Placeholder content for itineraries, destinations, and preferences
    • Consistent spacing and layout rules
Refine the details
  • Adjust fonts, colors, spacing, and imagery.
  • Edit copy so it matches your tone (e.g., “travel coach” vs. “business trip planner”).
When you’re ready to fine-tune specific areas, switch to Editable Design:
  • The page turns into an interactive canvas inside Superun.
  • You can click into headings, paragraphs, sections, and cards to edit content or structure.
Use Boxify for precise AI-powered edits:
  1. Draw a box around any region you want to change (for example, the hero area or a grid of trip cards).
  2. Enter a prompt such as:
    • “Make this hero more premium and travel-agency style.”
    • “Turn these cards into 3-day sample itineraries for different budgets.”
  3. Superun updates only the boxed region, keeping the rest of the page intact.
ℹ️ Best practice
Use Editable Design + Boxify for “surgical” changes. Update one section at a time instead of rewriting your entire prompt whenever you want to tweak layout or copy.

​
5. Feature List

Behind the scenes, Superun reads your prompt and your answers to the refinement questions and turns them into a feature list tailored to your app under build. For an AI travel planner, a generated feature list might look like:
  • ✅ Real-time trip search and filtering
  • ✅ AI-generated itineraries with hotels, activities, and restaurants
  • ✅ Saved trips and favorites
  • ✅ User authentication and profiles
  • ✅ Trip analytics (budget breakdown, time allocation, etc.)
  • ✅ Email or notification hooks for reminders
  • ✅ Integration hooks for future booking or calendar services
Superun uses this feature list to:
  • Create the right UI modules (trip cards, itinerary timelines, analytics sections).
  • Define the initial database schema (tables for users, trips, destinations, and suggestions).
  • Configure basic backend endpoints and service bindings.
  • Decide where AI calls should happen and how results should be displayed.
ℹ️ Tip
If the feature list feels too heavy or too light, say so directly in your next prompt:
“Make a lightweight MVP with only trip search + AI itinerary + saved trips,” or
“Include billing, team workspaces, and collaboration for a Pro version.”

​
6. Integrating Supabase for Backend & Authentication

Once your UI and feature list feel right, you’re ready to connect the backend.
  1. Create a Supabase account and start a new project.
  2. In Superun, use the Supabase integration to connect your project.
  3. Superun generates SQL tables based on your feature list, for example:
    • A profiles table for storing user information and preferences.
    • A trips table tied to each user.
    • Optional tables like destinations, ai_suggestions, or favorites.
Superun can also wire up authentication flows:
  • Sign-up, login, and logout
  • Password reset
  • Protected routes for the dashboard and itinerary pages
ℹ️ Security tip
Enable Row-Level Security (RLS) in Supabase so users only see their own trips. Superun can help generate sensible default policies, which you can refine later.

​
7. Adding AI Features with Superun AI

The core value of this app is its AI-generated travel planning. To add AI features:
  1. Obtain an Superun API key from your account dashboard.
  2. Add this key to your Superun project as an environment variable or via the AI settings panel.
  3. Superun connects this key to the AI flows defined in your feature list.
Common AI flows for this app:
  • Trip creation
    • Input: destination, dates, interests, budget.
    • Output: structured itinerary with days, times, activities, and notes.
  • Itinerary refinement
    • Examples:
      • “Make this trip more kid-friendly.”
      • “Optimize for food experiences.”
      • “Shorten to a 3-day weekend trip.”
  • Summaries and sharing
    • Generate short summaries suitable for email, messaging apps, or internal trip notes.
For more reliable results, use structured responses:
  • Ask Superun to call OpenAI with a schema so itinerary data comes back as JSON with fields like day, time, location, and description.
  • Superun can then insert this data directly into your Supabase tables.
ℹ️ Testing
Start by testing a few simple prompts, such as a 2-day trip to a nearby city. Once the structure looks good, expand to longer trips and more complex requirements.

​
8. Implementing Payments with Stripe

If you want to monetize your travel planner, you can add subscriptions or paid tiers.
  1. Create a Stripe account.
  2. Set up a product, for example: "Superun Travel Planner Pro – $12/month".
  3. In Superun, add your Stripe API keys and product price ID.
  4. Connect the upgrade or pricing section of your app to Stripe Checkout.
  5. Limit access to certain features (e.g., unlimited AI trips or team workspaces) to paying users.
You can also enable Stripe’s built-in user tools:
  • Customer Portal for managing subscriptions
  • Email receipts and invoices
  • Test mode for safe trial transactions
ℹ️ Tip
Always test payments in Stripe’s test mode using the provided sample card numbers before enabling live charges.

​
9. Testing and Debugging

Errors are a natural part of shipping software. Superun is designed to help you debug quickly.
  • Use the “Auto Fix” button when a build fails. Superun will inspect the error and attempt a guided fix.
  • For backend errors, check Supabase logs and verify that your tables, policies, and environment variables match your configuration in Superun.
  • For deployment issues, review the logs from your hosting provider (for example, Netlify or Vercel) and feed key error messages back into Superun for targeted suggestions.
You can also:
  • Test core flows end-to-end: sign-up, create trip, generate itinerary, save and edit it.
  • Ask teammates or friends to run through the app and report any confusing steps.
ℹ️ Recovery tip
If a change breaks your app badly, roll back to a previous version. Superun’s versioning and revert tools help you return to a stable state and iterate safely.

​
10. Deploying Your App

Once you’re happy with the experience, it’s time to put your app in front of real users. You have two main paths:
  1. Deploy directly from Superun
    • Use Superun’s deploy option to host the app on a default domain.
    • This is ideal for quick testing, demos, and internal reviews.
  2. Deploy via a hosting provider (e.g., Netlify or Vercel)
    • Connect your GitHub repository to your chosen host.
    • Set build commands and environment variables (Supabase keys, OpenAI key, Stripe keys).
    • Configure a custom domain and update DNS records.
Before launching publicly:
  • Set a favicon and app name.
  • Configure meta tags and Open Graph (OG) images so shared links look good.
  • Double-check privacy, terms, and contact information if you plan to charge users or handle personal data.
ℹ️ Launch checklist
Make sure at least one full trip flow works perfectly: from landing on the homepage, creating an account, generating an itinerary, tweaking it with AI, and saving it. If that feels smooth, you’re ready to share your Superun-powered travel planner with the world.