fix: Rehaul tutorials

website/docs/getting-started/tutorials/build-your-first-app.md

@@ -0,0 +1,80 @@
+# Build Your First App
+
+In this tutorial, you will learn how to connect your app to a database, fetch data, and display it using a Table widget. By following these steps, you’ll gain a solid understanding of Appsmith’s core features, enabling you to build dynamic, data-driven applications.
+
+:::tip ⏳ Estimated Time: 10 minutes
+By the end of this tutorial, you will learn to:
+
+- Connect your app to a PostgreSQL database.
+- Fetch data using SQL queries.
+- Display data in a Table widget.
+:::
+
+
+<div style={{ position: "relative", paddingBottom: "calc(50.52% + 41px)", height: 0, width: "100%" }}>
+  <iframe
+    src="https://demo.arcade.software/N0DGhXCaYUFdtc4h8M2b?embed"
+    frameBorder="0"
+    loading="lazy"
+    webkitAllowFullScreen
+    mozAllowFullScreen
+    allowFullScreen
+    allow="fullscreen"
+    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
+    title="Appsmith | Connect Data"
+  />
+</div>
+
+1. Open the [Appsmith Home](https://app.appsmith.com/applications) to view all workspaces and applications. A workspace is a collection of applications where teams can collaborate on building and managing different apps.
+
+2. To create a new app, click the **Create New** dropdown in the top-right corner of the workspace and select **Application**.
+
+
+3. In your application and, from the sidebar, click the **Data** button. This section lists all the datasources configured in your app, where you can edit existing ones or add new datasources.
+
+4. Click the **+** icon next to **Datasources in your workspace** to add a new datasource.
+
+5. You’ll now see a list of APIs, databases, and SaaS integrations you can connect to. For this tutorial, select the **Sample Users** database. This is a PostgreSQL database that contains user-related data, such as names, email addresses, and user IDs, which will be used to display data in the app. 
+
+6. After selecting Sample Users, a page opens showing the database schema *(structure of tables and columns)*, tables, and configuration details.
+
+7. Click **+ New Query** from the top-right corner. This opens a query editor where you can write SQL queries.
+
+8. Click on the three dots next to the query name in the left pane and select Rename. Rename the default query name `Query1` to `getUsers`. 
+
+9. Update the query with the following to fetch records in ascending order of the `id` field:
+
+<dd>
+
+  ```sql
+  SELECT * FROM public."users" ORDER BY id LIMIT 10;
+  ```
+
+</dd>
+
+10. Click the **Run** button on the top right of the screen to execute the query and confirm that it returns data.
+
+11. Click the **UI** tab on the *Entity Explorer* to the left of the screen. The UI tab opens a list of available widgets in Appsmith, which can be used to display data and design the app.
+
+12. Click **+ New UI Element**. This displays a list of available widgets to choose from. Drag a **Table** widget and drop it onto the canvas to display the data in a structured format.
+
+13. When you add the Table widget, a *Property Pane* appears on the right. The Property Pane contains all the configurable settings for the widget, such as its name, datasource, appearance, and behavior. To rename the widget, edit the name at the top of the pane, changing it from `Table1` to `usersTable`.
+
+14. In the Property Pane, click on the [**Table Data**](/reference/widgets/table#table-data-arrayobject) property and select the `getUsers` query to connect the Table to the data fetched by the query. The Table Data property allows you to bind your query or JS data to the Table widget.
+
+15. Click on the **Deploy** button in the top-right corner. This allows you to publish your changes and make your app live, which you can then share with others. 
+
+:::tip 🎉 Great job!  
+You have successfully created your first app by connecting to a sample PostgreSQL database, fetching user details, and displaying them in a Table widget.
+
+Your app is now live! You can share it with others and continue enhancing it by adding more data-driven features and interactivity. 
+:::
+
+
+### What's next?
+
+Now that you've connected data and built a basic UI, here are some next steps based on what you want to do next:
+
+- [**Work with data:**](/getting-started/tutorials/the-basics/work-with-data-in-ui) Learn how to filter, sort, and manipulate data before displaying it. 
+- [**Build more UI interactions:**](/build-apps/how-to-guides) Add buttons, forms, and other widgets to create an interactive experience. 
+- [**Integrate APIs & databases:**](/connect-data/reference/overview) Connect your app to external APIs or a custom database. 

website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md

@@ -4,79 +4,75 @@ slug: /getting-started/tutorials/the-basics/connect-query-display-data
 description:  Connect a datasource on Appsmith
 ---
 
-# Lesson 1 - Bring in Data
+# Connect and Display Data
 
-This tutorial takes you through the process of connecting a datasource and querying data on Appsmith. 
+In this tutorial, you will learn how to connect your app to a database, fetch data, and display it using a Table widget. By following these steps, you’ll gain a solid understanding of Appsmith’s core features, enabling you to build dynamic, data-driven applications.
 
-## Connect datasource
+:::tip What will I learn? 📝
+By the end of this tutorial, you will learn to:
 
-1. In your application, go to the sidebar and click the **Data** button.
-
-2. Click the **+** icon next to **Datasources in your workspace** to add a new datasource.
+- Connect your app to a PostgreSQL database.
+- Fetch data using SQL queries.
+- Display data in a Table widget.
+:::
 
-3. Select **PostgreSQL** under the **Databases** section. This opens the page where you can configure the fields to connect to your PostgreSQL database. 
 
-<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
-  <iframe src="https://demo.arcade.software/fT4UI3z2O90bF6IKjdOj?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "100%", height: "100%", colorScheme: "light" }} title="Appsmith | Connect Data">
-  </iframe>
+<div style={{ position: "relative", paddingBottom: "calc(50.52% + 41px)", height: 0, width: "100%" }}>
+  <iframe
+    src="https://demo.arcade.software/N0DGhXCaYUFdtc4h8M2b?embed"
+    frameBorder="0"
+    loading="lazy"
+    webkitAllowFullScreen
+    mozAllowFullScreen
+    allowFullScreen
+    allow="fullscreen"
+    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
+    title="Appsmith | Connect Data"
+  />
 </div>
 
-4. Rename the default database name from **Untitled datasource 1** to `usersTutorialDB`. You may have to click the pencil icon next to the database name if it is not already selected. 
 
-5. Enter the following details in the connection parameter fields:<br/>
-  **Host Address**: `mockdb.internal.appsmith.com` <br/>
-  **Port**: `5432`<br/>
-  **Database Name**: `users`<br/>
-  **Username**: `users`<br/>
-  **Password**: `new-users-db-pass`<br/>
 
-6. Click the **Test Configuration** button to test the connection and ensure the database is valid.
 
-7. Click **Save** to create and save the database connection. You'll see the `usersTutorialDB` database page.
+1. Open your application and, from the sidebar, click the **Data** button. This section lists all the datasources configured in your app, where you can edit existing ones or add new datasources.
 
-## Query Data
+2. Click the **+** icon next to **Datasources in your workspace** to add a new datasource.
 
-<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
-  <iframe src="https://demo.arcade.software/4SP3OXtmLb0KUzOLFsbp?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "100%", height: "100%", colorScheme: "light" }} title="Appsmith | Connect Data">
-  </iframe>
-</div>
+3. You’ll now see a list of APIs, databases, and SaaS integrations you can connect to. For this tutorial, select the **Sample Users** database. This is a PostgreSQL database that contains user-related data, such as names, email addresses, and user IDs, which will be used to display data in the app. `UsersDB`
+
+4. After selecting Sample Users, a page opens showing the database schema *(structure of tables and columns)*, tables, and configuration details. Rename it to `UsersDB`.
 
-1. In the **Editor pane** click the **New Query/API** button and select the connected datasource. You will see the query editor with a default fetch query to pull ten records from the `usersTutorialDB` database table.
+6. Click **+ New Query** from the top-right corner. This opens a query editor where you can write SQL queries.
 
-2. Rename the query from **Query1** to `getUsers`. You may have to click the pencil icon if it is not already selected.
+7. Click on the three dots next to the query name in the left pane and select Rename. Rename the default query name `Query1` to `getUsers`. 
 
-3. For this tutorial, modify the query as shown below to fetch the records in the ascending order of the `id` field.
+8. Update the query with the following to fetch records in ascending order of the `id` field:
+
+<dd>
 
   ```sql
   SELECT * FROM public."users" ORDER BY id LIMIT 10;
   ```
 
-4. Click the **Run** button on the top right of the screen to execute the query and confirm that it returns data.
-
-5. Click the **Settings** tab. Switch on the **Run query on page load** option.
+</dd>
 
-You've created your first query to fetch the list of records in the database.
+9. Click the **Run** button on the top right of the screen to execute the query and confirm that it returns data.
 
-## Display data in Table
+10. Click the **UI** tab on the *Entity Explorer* to the left of the screen. The UI tab opens a list of available widgets in Appsmith, which can be used to display data and design the app.
 
-<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
-  <iframe src="https://demo.arcade.software/gCyRZIWRg9iw8IMpPYBq?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "92%", colorScheme: "light" }} title="User Management | Display Data">
-  </iframe>
-</div>
+11. Click **+ New UI Element**. This displays a list of available widgets to choose from. Drag a **Table** widget and drop it onto the canvas to display the data in a structured format.
 
-1. Click the **UI** tab on the *Entity Explorer* to the left of the screen.
+12. When you add the Table widget, a *Property Pane* appears on the right. The Property Pane contains all the configurable settings for the widget, such as its name, datasource, appearance, and behavior. To rename the widget, edit the name at the top of the pane, changing it from `Table1` to `usersTable`.
 
-2. Click **+ New UI element** and drag a **Table** widget and drop it to the left of the canvas.
+14. In the Property Pane, click on the [**Table Data**](/reference/widgets/table#table-data-arrayobject) property and select the `getUsers` query to connect the Table to the data fetched by the query. The Table Data property allows you to bind your query or JS data to the Table widget.
 
-3. A *Property Pane* appears to the right of the screen, which contains all the properties of the widget. On the top of the property pane, click on the default name **Table1** and rename it to `usersTable`.
-
-4. Connect the Table to the query **getUsers** to display the data. Additionally, you can use JavaScript by clicking on **JS** to write bindings for the table data.
+15. Click on the **Deploy** button in the top-right corner. This allows you to publish your changes and make your app live, which you can then share with others. 
 
-:::info
-The mustache template `{{}}` is used to write JS code inside widgets and queries on Appsmith.
+:::tip 🎉 Great job!  
+You’ve successfully connected to a sample PostgreSQL database, fetched user details, and displayed them in a Table widget. With your app now live, you can share it with others and continue enhancing it by adding more data-driven features and interactivity.
 :::
 
-You've displayed the results from the **getUsers** query on the Table widget.
 
 ## Next steps
-- [Lesson 2 - Work with data in UI](/getting-started/tutorials/the-basics/work-with-data-in-ui)
+
+- [Build UI Interactions](/getting-started/tutorials/the-basics/work-with-data-in-ui).