Basic Setup Instructions (#1486)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
Update ReadMe with some basic setup instructions. These will need to be fully fleshed out and expanded once we have a better picture of how the frontend integrates with the backend in local dev.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Documentation update

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

README.md

@@ -1,16 +1,12 @@
-# Tangle app
+# Tangle app (Frontend)
 
 Tangle is a web app that allows the users to build and run Machine Learning pipelines using drag and drop without having to set up development environment.
 
 [![image](https://github.com/user-attachments/assets/0ce7ccc0-dad7-4f6a-8677-f2adcd83f558)](https://tangleml-tangle.hf.space/#/quick-start)
 
-<!--
-## Video
+This is the frontend repo. It contains the entire user interface portion of the app. It is built primarily on Typescript + React + Tailwind CSS, and powered by NodeJS + Vite.
 
-Please take a look at the short video demonstrating the first version of the visual pipeline editor.
-
-[Cloud Pipelines Editor - Build machine learning pipelines without writing code](https://www.youtube.com/watch?v=7g22nupCDes)
--->
+> Go to the [backend repo](https://github.com/TangleML/tangle).
 
 ## Demo
 
@@ -20,21 +16,64 @@ The experimental new version of the Tangle app is now available at <https://tang
 
 Please check it out and report any bugs you find using [GitHub Issues](https://github.com/TangleML/tangle/issues).
 
-The app is under active development, so expect some breakages as I work on the app and do not rely on the app for production.
+The app is under active development and supported by Shopify Engineers.
+
+## Installation
+
+**tangle-ui** can be operated and developed independently of the backend.
+
+### Standalone Web App - Instructions
+
+1. Install [Node Package Manager](https://www.npmjs.com/) (`npm`) & `node`
+2. Fork the `tangle-ui` repo - we recommend colocating the repo with the backend
+3. Navigate to the forked repo and install dependencies with `npm i`
+4. You are now ready to go! Run the app with `npm run start` 🚀
+
+You can now run tangle-ui as a standalone web app! Pipelines and data will be stored in browser storage. If you want to make use of backend features, such as executing runs you will need to connect to a backend.
+
+### Integrated Web App - Instructions
+
+1. Complete the steps above
+2. Complete the installation steps for the backend as specified in the [backend repo](https://github.com/TangleML/tangle)
+3. Create a `.env` file at the root of `tangle-ui`
+4. Add an env variable `VITE_BACKEND_API_URL` with the url where your backend is hosted (most likely `http://127.0.0.1:8000`)
+5. Run the backend & restart the frontend app
+
+<!-- todo: CORS -->
+
+You should now be running Tangle in its entirety and can enjoy its full suite of features!
+
+If you find you are blocked by CORS, you will, for now, need to use the manual steps below.
+
+#### If all Else Fails
+
+1. Complete the installation steps for the backend as specified in the [backend repo](https://github.com/TangleML/tangle)
+2. Co-locate your local `tangle-ui` repo inside your local `tangle` repo
+3. Run `npm run build` inside `tangle-ui`
+4. Start the backend using the provided instructions in the `tangle` repo
+
+If you complete these steps the app will launch on `127.0.0.1:8000` with the latest build you've created on the frontend.
 
-### App features:
+## App features:
 
-- Build pipeline using drag and drop
-- Edit component arguments
-- Submit the pipeline for execution. (Follow the [backend installation instructions](https://github.com/Cloud-Pipelines/backend?tab=readme-ov-file#installation).)
+- Build and edit pipelines using drag and drop visual editor
+- Configure component arguments
+- Submit the pipeline for execution. (Follow the [backend installation instructions](https://github.com/TangleML/tangle?tab=readme-ov-file#installation).)
 - The ComponentSpec/`component.yaml` format used by Cloud Pipelines is fully compatible with the Google Cloud Vertex AI Pipelines and Kubeflow Pipelines v1. You can find many components here: [Ark-kun/pipeline_components](https://github.com/Ark-kun/pipeline_components/)
 - Preloaded component library
 - User component library (add private components)
+- Remote component library
+- GitHub-based libraries
 - Component search
 - Import and export pipelines
+- Create subgraphs and nested pipelines
+- In-app component editor
+- Disable cache
+- Cancel executions
+- Clone pipelines and review ongoing executions (logs, artifacts, run status)
 
-There are many features that I want to add, but I want to prioritize them based on your feedback.
+Feel free to provide feedback, flag and issue or make a suggestion: [issues](https://github.com/TangleML/tangle-ui/issues).
 
-### Credits:
+## Credits:
 
 This app is based on the [Pipeline Editor](https://cloud-pipelines.net/pipeline-editor) app created by [Alexey Volkov](https://github.com/Ark-kun) as part of the [Cloud Pipelines](https://github.com/Cloud-Pipelines) project.