Quick Start Guide
=================

This guide will get you up and running with BadGUI in minutes.

Your First BadGUI App
---------------------

Create a new Python file called ``hello_world.py``:

.. code-block:: python

    import badgui as bg

    # Create a page using context manager
    with bg.page("/", "HomePage", "Hello World"):
        bg.label("Hello, World!").classes("text-h2 text-primary")
        bg.label("Welcome to BadGUI").classes("text-body1 text-grey-7")
        
        with bg.row().classes("q-gutter-md q-mt-md") as row:
            bg.button("Primary Button").classes("q-btn-primary")
            bg.button("Secondary Button").classes("q-btn-secondary")
    
    # 🚀 INSTANT DEVELOPMENT MODE - One command does it all!
    bg.dev(port=3000)  # Creates temp build, installs deps, starts server!

Run the script::

    python hello_world.py

**That's it!** The server automatically starts at ``http://localhost:3000`` - no manual setup needed!

Development Modes
-----------------

**🚀 Instant Development (Recommended)**

BadGUI's ``bg.dev()`` method provides the fastest development experience:

.. code-block:: python

    # At the end of your script, use:
    bg.dev(port=3000)  # Automatic build + install + server start

**📦 Static Project Generation**

For deployment or manual development, use ``bg.build()``:

.. code-block:: python

    # Generate static project
    bg.build("hello-world-app")

Then manually run::

    cd hello-world-app
    npm install
    npm run dev

Adding Components
-----------------

BadGUI provides several built-in components:

.. code-block:: python

    import badgui as bg

    with bg.page("/", "ComponentsDemo", "Components Demo"):
        # Text components
        bg.label("Main Title").classes("text-h3")
        bg.label("Subtitle").classes("text-h6 text-grey-7")
        
        # Input components
        bg.input(placeholder="Enter your name").classes("q-mb-md")
        
        # Buttons
        bg.button("Click Me").props("push color=primary")
        
        # Navigation
        bg.link("Go to About", "/about").classes("q-btn q-btn-outline")

    bg.build("components-demo")

Using Layouts
-------------

Create structured layouts with row and column containers:

.. code-block:: python

    import badgui as bg

    with bg.page("/", "LayoutDemo", "Layout Demo"):
        bg.label("Layout Example").classes("text-h4 q-mb-lg")
        
        # Horizontal layout
        with bg.row().classes("q-gutter-md q-mb-lg"):
            bg.label("Left Column").classes("bg-blue-1 p-4 rounded")
            bg.label("Middle Column").classes("bg-green-1 p-4 rounded")
            bg.label("Right Column").classes("bg-red-1 p-4 rounded")
        
        # Vertical layout
        with bg.column().classes("q-gutter-sm"):
            bg.label("Row 1").classes("bg-grey-2 p-2")
            bg.label("Row 2").classes("bg-grey-2 p-2")
            bg.label("Row 3").classes("bg-grey-2 p-2")

    bg.build("layout-demo")

Multi-Page Applications
-----------------------

Create multiple pages with routing:

.. code-block:: python

    import badgui as bg

    # Home page
    with bg.page("/", "HomePage", "Home"):
        bg.label("Welcome to Home").classes("text-h3")
        bg.label("This is the home page content.")
        bg.link("Go to About", "/about").classes("q-btn q-btn-primary q-mt-md")

    # About page
    with bg.page("/about", "AboutPage", "About"):
        bg.label("About Us").classes("text-h3")
        bg.label("Learn more about our application.")
        bg.link("Back to Home", "/").classes("q-btn q-btn-secondary q-mt-md")

    # Contact page
    with bg.page("/contact", "ContactPage", "Contact"):
        bg.label("Contact Us").classes("text-h3")
        bg.input(placeholder="Your Name").classes("q-mb-md")
        bg.input(placeholder="Your Email").classes("q-mb-md")
        bg.button("Send Message").classes("q-btn q-btn-primary")

    bg.build("multi-page-app")

Next Steps
----------

- Learn about :doc:`components` for detailed component documentation
- Explore :doc:`styling` for advanced styling techniques
- Check out :doc:`examples` for complete application examples
- Review the :doc:`api/modules` for full API reference