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

# AutoCoder.cc How-To Tutorials & Step-by-Step Guides

> Browse step-by-step AutoCoder.cc tutorials covering prompting, app generation, custom domains, source-code export, and earning credits — a how-to library for builders learning the AI development platform end-to-end.

<CardGroup cols={2}>
  <Card title="Tutorial #8 — Add Login and Payments to Your App" href="/blog/add-login-and-payments" img="https://mintcdn.com/aigc-c52a7338/tKf2ADzmiDvj8tZ3/images/blog/add-login-and-payments/cover.png?fit=max&auto=format&n=tKf2ADzmiDvj8tZ3&q=85&s=e688c0cb2ad3dd785552f191c98b0da2" width="1467" height="822" data-path="images/blog/add-login-and-payments/cover.png">
    Add Google Login, payments, order tracking, and analytics to an AI-generated app — turn a website into a business-ready product with AutoCoder.cc.
  </Card>

  <Card title="Tutorial #7 — Progressive Build: See. Edit. Build." href="/blog/progressive-build-tutorial" img="https://mintcdn.com/aigc-c52a7338/tKf2ADzmiDvj8tZ3/images/blog/progressive-build-tutorial/cover.png?fit=max&auto=format&n=tKf2ADzmiDvj8tZ3&q=85&s=4d8576e1d0cbdc2babe327081a8481d5" width="1467" height="822" data-path="images/blog/progressive-build-tutorial/cover.png">
    Review and edit your app across three stages — Draft, Requirements, and Full Project — with AutoCoder.cc's transparent Progressive Build workflow.
  </Card>

  <Card title="Tutorial #6 — Better Prompts, Better Products" href="/blog/better-prompts-better-products" img="https://mintcdn.com/aigc-c52a7338/qpQ_Dmg20xHi0xSQ/images/blog/better-prompts-better-products/cover.png?fit=max&auto=format&n=qpQ_Dmg20xHi0xSQ&q=85&s=a98b49e93a3afe829e10044172b76e90" width="1467" height="822" data-path="images/blog/better-prompts-better-products/cover.png">
    See how prompt quality shapes product outcomes in AutoCoder.cc — compare a simple vs optimized prompt building a wedding planning platform.
  </Card>

  <Card title="AutoCoder Visual User Flow: Why Blueprint-First Beats Prompt-to-Code" href="/blog/visual-user-flow-blueprint-first" img="https://mintcdn.com/aigc-c52a7338/e6UdRLNHQPp1cX7t/images/blog/visual-user-flow-blueprint-first/cover.png?fit=max&auto=format&n=e6UdRLNHQPp1cX7t&q=85&s=96b5090894a74b7afce5cc8161482fa2" width="1999" height="1079" data-path="images/blog/visual-user-flow-blueprint-first/cover.png">
    AutoCoder's Visual User Flow adds a planning layer between prompt and code: review an interactive map of your user journey before any code is generated.
  </Card>

  <Card title="Tutorial #5 — Multi-Role Systems: One App, Multiple Experiences" href="/blog/multi-role-systems" img="https://mintcdn.com/aigc-c52a7338/DgQMY-IadOXPjffA/images/blog/multi-role-systems/cover.png?fit=max&auto=format&n=DgQMY-IadOXPjffA&q=85&s=cb8f87532340d2b238a770ffa7568a1d" width="1467" height="822" data-path="images/blog/multi-role-systems/cover.png">
    Learn how AutoCoder.cc builds multi-role systems — give clients, trainers, nutritionists, and admins dashboards, permissions, and workflows in one app.
  </Card>

  <Card title="Tutorial #4 — SparkVibe: Discover, Remix, and Build Faster" href="/blog/sparkvibe-community-hub" img="https://mintcdn.com/aigc-c52a7338/q5QNj3HqKeK3h0MH/images/blog/sparkvibe-community-hub/cover.png?fit=max&auto=format&n=q5QNj3HqKeK3h0MH&q=85&s=a5b86f8675a3a05774d0b3ea29da5a92" width="1467" height="822" data-path="images/blog/sparkvibe-community-hub/cover.png">
    Explore SparkVibe, the AutoCoder.cc community hub — browse live demos, remix community projects, and turn other builders' ideas into your own apps.
  </Card>

  <Card title="Tutorial #3 — Easy Editing & Updates" href="/blog/easy-editing-and-updates" img="https://mintcdn.com/aigc-c52a7338/UTs7Uto73cAW_qUO/images/blog/easy-editing-and-updates/cover.png?fit=max&auto=format&n=UTs7Uto73cAW_qUO&q=85&s=72395cdcf11561cbd4b5cc0b12a71688" width="1467" height="822" data-path="images/blog/easy-editing-and-updates/cover.png">
    Turn a simple idea into a real, editable app on AutoCoder.cc — generate a working demo, then refine it with chat instructions, visual editing, and version history.
  </Card>

  <Card title="Tutorial #2 — How to Get Free Credits & Explore Plans" href="/blog/get-free-credits" img="https://mintcdn.com/aigc-c52a7338/DgQMY-IadOXPjffA/images/blog/get-free-credits/cover.png?fit=max&auto=format&n=DgQMY-IadOXPjffA&q=85&s=9c8a55a989e9773364bcbb261ce66592" width="978" height="548" data-path="images/blog/get-free-credits/cover.png">
    Start free on AutoCoder.cc, understand the plans, and unlock more credits through simple daily and beginner tasks.
  </Card>

  <Card title="Tutorial #1 — Build Your First App" href="/blog/build-your-first-app" img="https://mintcdn.com/aigc-c52a7338/DgQMY-IadOXPjffA/images/blog/build-your-first-app/cover.png?fit=max&auto=format&n=DgQMY-IadOXPjffA&q=85&s=1413b0c78daed827f7edb7b749bb6195" width="978" height="548" data-path="images/blog/build-your-first-app/cover.png">
    A complete video walkthrough of building a website or mobile app with AutoCoder.cc — from idea to launch.
  </Card>

  <Card title="How to Prompt AutoCoder.cc" href="/blog/how-to-prompt-autocoder" img="https://mintcdn.com/aigc-c52a7338/AzBnEoHlBfLlfAGe/images/blog/how-to-prompt-autocoder/bg.png?fit=max&auto=format&n=AzBnEoHlBfLlfAGe&q=85&s=26a6ef3f4f637454de012d032251d0f7" width="976" height="548" data-path="images/blog/how-to-prompt-autocoder/bg.png">
    Learn how to write effective prompts to get the most out of AutoCoder's AI-powered development platform.
  </Card>
</CardGroup>