Quickstart

Databutton is your one-stop shop for everything—from building to deploying. Get started with Databutton and publish your first full-stack app in minutes.

Getting Started

To begin, log in to Databutton. If you don’t already have an account, sign up for free here.

Create Your First App

With Databutton, your MVP starts taking shape from the very first prompt.

Simply click New App in the Databutton dashboard, describe your idea, and Databutton builds a complete full-stack app for you.

Here’s how it works:

• Frontend in React: Databutton generates your app’s user interface using React.

  You can choose between prebuilt components (Shadcn) for ease and default styling or Tailwind for full flexibility and control.

• Backend in Python: All backend logic is written in Python.

  Databutton automatically creates robust FastAPI routers for your app’s backend, ensuring scalability and performance.

• Seamless Integration: Databutton connects the frontend and backend, ensuring everything works together perfectly.

Feature Spotlight: If your app needs API keys, Databutton detects them, securely stores them as secrets, and integrates them into your app. Learn more about secret management in Databutton here.

---

Plan and Iterate Your App with Databutton Agent

Databutton Agent makes it easy to plan and refine your app through a conversational and iterative approach.

• Update with Text / Image Prompts:

  Want to add a feature? Just write a quick prompt!

• Organize your build with Task Planner:

  Got multiple updates in mind? Use the Task Planner to line them up. The Agent will take care of each task one by one, keeping you informed at every step.

• Get Help with Smart Suggestions:

  Stuck on what to do next? The Agent offers smart suggestions.

Feature Spotlight: Use images or screenshots to help design your app. You can also define your app’s structure easily with prompts. Learn more here.

For more tips on crafting effective prompts, check out the Prompting in Databutton section.

---

Adding Public Assets to Your App

Databutton workspace makes it easy to manage public assets like images and videos for your app. These assets are stored in the Media (Public) section and can be accessed directly within your app.

How to Add Public Assets within your app:

• Upload Your Files

  Use the upload button in the Media (Public) section to add your images or videos. Assets are automatically categorised into Image or Video folders for easy navigation.

• Reference them while prompting

  Once uploaded, you can use these files in your frontend

Feature Spotlight: Using Hashtags in Prompts. Reference your uploaded images or videos during prompting by using # hashtags.

Building Blocks of Your App

When you build with Databutton, the Agent structures everything for you.

How Your App is Structured in Databutton:

• Pages

  These are the main sections of your app. Pages can be routed, making it easy to create navigation between views.

• UI Components

  Reusable building blocks that can be used inside Pages or within other components.

• UI Files

  Assets or configurations that shape how your app looks and functions. These can be used across Pages and Components.

• Backend

  Handles the logic and APIs for your app, written in Python to power your app's functionalities.

• Media (Public)

  A dedicated space for publicly accessible files, such as images, videos, or GIFs.

• Internal Storage

  Used for storing private files like CSVs, PDFs, or binary data. Databutton provides a backend Python package to easily access these files, making prototyping efficient.

Feature Spotlight: Databutton provides built-in storage capabilities out of the box. All operations, such as storing and retrieving data, are managed by the Databutton Agent using Databutton's own Python SDK. Read more here.

One of the best practices the Databutton Agent follows is breaking down your app into Pages and UI Components for better organization and reusability. Read prompt tips here to learn how to collaborate effectively with the agent.

---

Publish Your App in Seconds

Deploying your app is quick and simple with Databutton. You can either deploy it manually or let the Databutton Agent handle it for you.

• Manual Deployment

  To deploy manually, click the Deploy button located at the top-right corner of your workspace (highlighted with an arrow in the image above).

• Agent-Driven Deployment

  Alternatively, you can ask the Databutton Agent to deploy the app for you.

The app typically get's deployed to a URL like username.databutton.com, making it instantly live and accessible.

Feature Spotlight: Open the Deploy Modal (marked with an arrow above in the image above) to restore your app to the last deployment or request a custom domain by submitting your domain name for setup.

You can test and make changes in the development workspace without affecting the deployed version. Any changes made during development won’t reflect on the live version until you redeploy.

---