> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatandbuild.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick start guide

> Transform your ideas into reality with ChatAndBuild. This comprehensive guide will take you from concept to deployment in record time, perfect for rapid prototyping and development. 

## Building your first app: step-by-step

<Steps>
  <Step title="Start With a Simple Prompt">
    Begin by describing your project idea in natural language. ChatAndBuild's AI understands context and can help you refine your concept.

    <Tip>
      *"I want to build a social media app for pet owners where they can share photos and connect with other pet parents in their area."*
    </Tip>
  </Step>

  <Step title="Watch the Magic Happen">
    Our AI analyzes your requirements and generates a complete application structure, including frontend, backend, and database components.

    <CardGroup cols={3}>
      <Card color="#7465FF" icon="code" horizontal title="Frontend Components">
        React, TypeScript, Tailwind
      </Card>

      <Card icon="message" horizontal title="API Endpoints">
        RESTful APIs, Authentication
      </Card>
    </CardGroup>
  </Step>

  <Step title="Iterate and Refine">
    Continue the conversation to add features, modify designs, or fix issues. The AI learns from your feedback and improves the application.

    <Icon icon="lightbulb-exclamation-on" color="#FFF5CD" /> "*Add a dark mode toggle to the navigation"*

    <Icon icon="lightbulb-exclamation-on" iconType="regular" color="#FFF5CD" /> *"Make the pet profile cards more colorful"*

    <Icon icon="lightbulb-exclamation-on" color="#FFF5CD" /> *"Add geolocation features for nearby pets"*
  </Step>

  <Step title="Deploy and Share">
    When you're ready, deploy your application by clicking 'Publish' and share your app with users or your team instantly.
  </Step>
</Steps>

## Next steps

Now that you have your docs running, explore these key features:

<CardGroup cols={2}>
  <Card icon="pen-to-square" href="/essentials/markdown" title="Write Content">
    Learn MDX syntax and start writing your documentation.
  </Card>

  <Card icon="palette" href="/essentials/settings" title="Customize style">
    * Select one of our app themes
  </Card>

  <Card icon="square-code" href="/essentials/code" title="Add code examples">
    Include syntax-highlighted code blocks.
  </Card>

  <Card icon="code" href="/api-reference/introduction" title="Integrate">
    Integrate Stripe for payments, Supabase for database and interact with GitHub.
  </Card>
</CardGroup>