> ## Documentation Index
> Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# App Framework Tutorials

Learn how to build powerful Domo apps through hands-on tutorials. These step-by-step guides walk you through creating complete applications using both React and vanilla JavaScript.

## What You'll Learn

Each tutorial provides:

* **Complete source code** with step-by-step explanations
* **Real-world examples** that demonstrate best practices
* **Integration patterns** for Domo datasets, APIs, and services
* **Deployment guidance** to get your app running in Domo

## Prerequisites

Before starting any tutorial, make sure you have:

1. Installed the [Domo Apps CLI](/portal/Apps/App-Framework/Quickstart/Setup-and-Installation)
2. Completed the [Setup and Installation](/portal/Apps/App-Framework/Quickstart/Setup-and-Installation) guide
3. Basic knowledge of JavaScript and web development

## React Tutorials

Build modern, component-based applications using React:

### [AI Book Recommender](/portal/Apps/App-Framework/Tutorials/React/AI-Book-Recommender)

Build a React app that recommends books with Domo's AI Service Layer. Learn how to:

* Scaffold a Vite + React + TypeScript app with the DA CLI
* Search a public API (Open Library) with debounced queries
* Call Domo's `/domo/ai/v1/text/generation` endpoint with a structured system prompt
* Parse a JSON response into a polished Ant Design results view

**Level:** Intermediate | **Time:** 2-3 hours

### [Mapbox World Map](/portal/Apps/App-Framework/Tutorials/React/Mapbox-World-App)

Render a world map powered by a Domo dataset. Learn how to:

* Scaffold a Vite + React + TypeScript app with the DA CLI
* Wire a Domo dataset to your app through `manifest.json` mapping and a proxy card
* Query mapped data with `ryuu.js` and render it as a GeoJSON circle layer in Mapbox GL JS
* Scale point radius and color by a numeric field (population)

**Level:** Intermediate | **Time:** 2 hours

### [Todo App with AppDB](/portal/Apps/App-Framework/Tutorials/React/Todo-App)

Build a shared task manager that stamps ownership on every todo. Learn how to:

* Scaffold a Vite + React + TypeScript app with the DA CLI
* Manage async state with Redux Toolkit slices and async thunks
* Persist data in AppDB with a typed `AppDBClient` service layer
* Load the current user's identity and avatar with `IdentityClient` / `UserClient`

**Level:** Intermediate | **Time:** 2-3 hours

## Vanilla JavaScript Tutorials

Build lightweight applications using vanilla JavaScript:

### [Hello World](/portal/Apps/App-Framework/Tutorials/javascript/HelloWorld)

Learn the basics by building a configurable accordion widget. Learn how to:

* Set up a vanilla JavaScript app
* Use third-party libraries via CDN
* Connect to and display Domo dataset data
* Deploy your first app to Domo

**Level:** Beginner | **Time:** 1 hour

### [Dynamic Infographic](/portal/Apps/App-Framework/Tutorials/javascript/DynamicInfographic)

Create a data-driven infographic that updates dynamically. Learn how to:

* Design with Canva and integrate with Domo
* Use templates and variable substitution
* Build responsive, data-driven visualizations

**Level:** Intermediate | **Time:** 2 hours

### [Return Flow](/portal/Apps/App-Framework/Tutorials/javascript/ReturnFlow)

Build a workflow app with form inputs and data submission. Learn how to:

* Create forms and handle user input
* Implement data validation
* Submit data back to Domo datasets
* Handle complex data flows

**Level:** Intermediate | **Time:** 2-3 hours

### [SugarForce](/portal/Apps/App-Framework/Tutorials/javascript/SugarForce)

Build an integration app connecting Domo with external services. Learn how to:

* Integrate with third-party APIs
* Handle authentication and data sync
* Build connector-style applications

**Level:** Advanced | **Time:** 3 hours

## Next Steps

After completing a tutorial:

1. Explore the [Guides](/portal/Apps/App-Framework/Guides/getting-data) section for deeper dives into specific topics
2. Review [Best Practices](/portal/Apps/App-Framework/Quickstart/Best-Practices) for production-ready apps
3. Check out the [Tools](/portal/Apps/App-Framework/Tools/domo-CLI) documentation to enhance your workflow

## Getting Help

If you get stuck:

* Review the [FAQ](/portal/Apps/App-Framework/Help/faq) for common questions
* Check [Troubleshooting](/portal/Apps/App-Framework/Help/Troubleshooting) for solutions to common issues
* Visit the [Community Forums](/portal/Apps/App-Framework/Other-Resources/Developer-Forum) to ask questions