# My first App

Transloadit is versatile and there are many ways to leverage our API. To pick one happy path for demo purposes, we’ll default to a web browser integration with [Uppy](/docs/sdks/uppy.md)’s Transloadit Plugin.

We will create a simple web page that uploads images and resizes them to `1500x500` pixels. This first Template has one processing Robot, so you can get a result before configuring storage or a larger workflow.

## Our First Template

Please [create a new Template](/c/templates/new/) in your workspace naming it `my-first-template` and and save the following Assembly Instructionsinside of it:

```json
{
  ":original": {
    "robot": "/upload/handle"
  },
  "crop_thumbed": {
    "use": ":original",
    "robot": "/image/resize",
    "result": true,
    "width": 1500,
    "height": 500,
    "resize_strategy": "fillcrop"
  }
}

```

## Explaining the Assembly Instructions

Now, let's take a closer look at the JSON, which contains twoSteps:

1. `:original` invokes [🤖/upload/handle](/docs/robots/upload-handle.md), which will receive any file Uppy throws at it, and then make it available for otherRobots to consume. You could define a file size limit in this Robot among other things.
2. `crop_thumbed` is happy to take those files via `"use": ":original"`. It then invokes[🤖/image/resize](/docs/robots/image-resize.md) with parameters such as`resize_strategy`. This is the only processing Robot in the Template.

###### Note

Result files are temporarily hosted with us and removed after 24h. That keeps this first example focused on one conversion. The next guide adds permanent storage.

In our Uppy integration replace `YOUR_TEMPLATE_ID` with the ID of your Template. Add the following to a `test.html` file and then open it in your browser:

```html
<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
  href="https://releases.transloadit.com/uppy/v4.3.1/uppy.min.css"
  rel="stylesheet"
/>
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v4.3.1/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          template_id: 'YOUR_TEMPLATE_ID',
          // To avoid tampering, use Signature Authentication:
          // https://transloadit.com/docs/api/authentication/
          auth: {
            key: 'YOUR_TRANSLOADIT_KEY',
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to waitForEncoding:true this is fired after encoding is done.
      // Alternatively, set waitForEncoding to false and provide a notify_url
      console.log(transloadit) // Array of Assembly Statuses
      transloadit.forEach((assembly) => {
        console.log(assembly.results) // Array of all encoding results
      })
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

```

You'll notice that along with `YOUR_TEMPLATE_ID`, we'll also need to replace `YOUR_TRANSLOADIT_KEY`, the value for which can be obtained[by creating an Auth Key in your account](/c/template-credentials/).

And there you have it! ✨ If you were copy/pasting/replacing along, you now have a working prototype. The results are dumped in your browser's console log, but you can also see[Assemblies](/c/assemblies/) added to your account in real time. If you didn't type along, you can still try it live in this[image resize demo](/demos/image-processing/resize-to-twitter-cover-dimensions/).

The temporary result URLs are referenced in the console log. To keep those files permanently and send the results to your back-end, continue to the[Saving Result Files](/docs/getting-started/saving-conversion-results.md) page.