Revampt quickstart

vebiolavanessa · Oct 10, 2023 · 57e8d0a · 57e8d0a
1 parent dff072c
commit 57e8d0a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 86 deletions.
diff --git a/docs-v2/images/quickstart/add-new-sync.png b/docs-v2/images/quickstart/add-new-sync.png
diff --git a/docs-v2/images/quickstart/nango-oauth-button.png b/docs-v2/images/quickstart/nango-oauth-button.png
diff --git a/docs-v2/images/quickstart/secret-key.png b/docs-v2/images/quickstart/secret-key.png
diff --git a/docs-v2/quickstart.mdx b/docs-v2/quickstart.mdx
@@ -1,106 +1,64 @@
 ---
 title: 'Quickstart'
-sidebarTitle: '🚀 Quickstart'
-description: 'See Nango in action in 5 minutes'
+sidebarTitle: '🚀 Quickstart (3mins)'
+description: 'Experience Nango in action in under 3 minutes'
 ---
 
-Experience Nango by syncing GitHub issues from your public repositories.
-
-In the next 5 minutes, we will:
-
-1.  Authorize an example API using Nango's built-in OAuth flow (GitHub)
-2.  Set up a continuous data sync for this API (for GitHub issues)
-3.  Demonstrate how to use the synced data in your app
+As an example, we will sync GitHub issues from your public repositories directly through the Nango webapp.
 
 ## Authorize an API (Github)
 
-First, create a free Nango account (no credit card required):
+Begin by creating a free Nango account (no credit card needed):
 <a href="https://app.nango.dev/signup" target="_blank">
   <img alt="Try Nango Cloud" src="/images/nango-deploy-button.svg" noZoom />
 </a>
 
-On the [Integrations tab](https://app.nango.dev), with the left bar environment toggle set to `Dev`, click `OAuth` next to the GitHub example integration:
+Head to the [Integrations tab](https://app.nango.dev) and select Auth adjacent to the GitHub example integration:
 
 <Frame>
   <img src="/images/quickstart/nango-oauth-button.png" />
 </Frame>
 
-On the `Add New Connection` page, keep the default values and click `Start OAuth Flow`.
+Within the `Add New Connection` page, retain the default settings and press `Start OAuth Flow`.
 
 Authorize GitHub and retrieve your credentials from the [Connections tab](https://app.nango.dev/connections) 🎉
 
-<Tip>
-  If you are using Nango to authorize APIs, you're all set 🙌 Check out the [API Authorization guide](/guides/oauth) to authorize users from your frontend and obtain credentials from your backend.
-</Tip>
-
-<Info>
-  If you encounter an error, visit the [Activity tab](https://app.nango.dev/activity). The logs there can provide useful information to debug the issue.
-</Info>
+Authorize your GitHub account and access your credentials from the [Connections tab](https://app.nango.dev/connections). Great work!
 
 ## Sync data from an API (Github issues)
 
-```bash
-npm install -g nango
-```
-
-In the root of your project, run:
-
-```bash
-nango init # Creates `./nango-integrations` with initial config
-```
-
-Next, we need to authenticate the CLI. Add the following environment variables (e.g., in an `.env` file in `./nango-integrations`):
-
-```bash
-NANGO_SECRET_KEY_PROD='<prod-secret-key>'
-NANGO_SECRET_KEY_DEV='<dev-secret-key>'
-```
+Go to the [Syncs & Actions tab](https://app.nango.dev/syncs) and click the `Add New` button.
 
-Retrieve your `prod` and `dev` secret keys from the [Project Settings tab](https://app.nango.dev/project-settings) (toggle between the `prod` and `dev` environment in the left navigation bar).
-
-### Configure a _sync_
-
-`./nango-integrations` initially contains two files:
-
-*   `nango.yaml`: the **configuration** to sync GitHub issues
-*   `github-issue-example.ts`: the **code** to sync GitHub issues
-
-Within `./nango-integrations`, run:
+<Frame>
+  <img src="/images/quickstart/add-new-sync.png" />
+</Frame>
 
-```bash
-nango dev # Continuously watches integration files for changes.
-```
+From the `Provider` dropdown menu, pick `github`. In the `Template` dropdown, opt for `github-issues` (sync). Lastly, click `Add Sync` located at the page's bottom.
 
-The remaining files (`models.ts`, `dist/*`) are automatically generated thanks to this `dev` command.
+Fantastic! Nango will now automatically sync your Github issues in the background.
 
-### Dry run the _sync_
+## Fetch the synced data
 
-Before deploying your _sync_ to your cloud account, you can test it locally.
+Transition to the [Project Settings tab](https://app.nango.dev/project-settings) to obtain the secret key essential for fetching the synced data:
 
-Open a new terminal tab, navigate to `./nango-integrations`. Dry run your _sync_ by executing:
+<Frame>
+  <img src="/images/quickstart/secret-key.png" />
+</Frame>
 
-```bash
-nango dryrun github-issue-example test-connection-id
-```
+Now, collect the continually updated data:
 
-This will use the _connection_ you created in the [Authorize an API section](#authorize-an-api-github) to run your _sync_ script. Since this is a dry run, the fetched data will not be stored in Nango.
+<Tabs>
 
-### Deploy the _sync_
+<Tab title="cURL">
 
-Finally, deploy your new sync to Nango Cloud:
 ```bash
-nango deploy dev # Deploys to your cloud "dev" environment.
+curl --request GET \
+  --url 'https://api.nango.dev/sync/records?model=GithubIssue' \
+  --header 'Authorization: Bearer <your-dev-secret-key>' \
+  --header 'Connection-Id: test-connection-id' \
+  --header 'Provider-Config-Key: demo-github-integration'
 ```
-
-Nango automatically adds your _sync_ to all GitHub connections and starts syncing data for them. 🎉
-
-Take a look at your new _sync_ in the [Syncs tab](https://app.nango.dev/syncs) and check the [Activity tab](https://app.nango.dev/activity) to see every sync run live as Nango fetches the data.
-
-## Retrieve the synced data
-
-Fetch the always-up-to-date data from the _sync_ in your backend with the [backend SDK](/sdks) or the [REST API](/api-reference):
-
-<Tabs>
+</Tab>
 
 <Tab title="Node SDK">
 
@@ -118,28 +76,17 @@ const result = await nango.getRecords<GithubIssue>({
 ```
 </Tab>
 
-<Tab title="cURL">
-
-```bash
-curl --request GET \
-  --url 'https://api.nango.dev/sync/records?model=GithubIssue' \
-  --header 'Authorization: Bearer <your-dev-secret-key>' \
-  --header 'Connection-Id: test-connection-id' \
-  --header 'Provider-Config-Key: demo-github-integration'
-```
-</Tab>
 
 </Tabs>
 
-
 ## Next Steps
 
-Check out the [Guides section](/guides) to:
-- [authorize APIs](/guides/oauth)
-- [sync data](/guides/sync)
-- [proxy requests](/guides/proxy)
-- [receive webhooks](/guides/webhooks)
+Delve into the [Guides section](/guides) to discover how to:
+- [Authorize APIs](/guides/oauth)
+- [Sync data](/guides/sync)
+- [Proxy requests](/guides/proxy)
+- [Handle webhooks](/guides/webhooks)
 
 ## Questions, problems, feedback?
 
-We are happy to help! Please reach out on the [Slack community](https://nango.dev/slack), we are very active there.
+We're here to help! Please reach out on the [Slack community](https://nango.dev/slack), we are very active there.