Improve the Java flavor

Author: sis0k0

docs/50-demo-app/2-start-app.mdx

@@ -21,21 +21,6 @@ To start the application in a codespace, click "Code." Then, look for the *Codes
 
 <Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/50-demo-app/2-start-app/1-codespace.png" alt="Create codespace button" />
 
-</TabItem>
-
-<TabItem value="java" label="☕️ Java Spring Boot">
-
-Open the [repository on the `java-server` branch](https://github.com/mongodb-developer/library-management-system/tree/java-server).
-
-To start the Java application in a codespace, check that you are in the `java-server` branch and then click "Code." Then, look for the *Codespaces* tab. Click "Create Codespace on java-server." This will create a new codespace for you and start the application.
-
-<Screenshot url="https://github.com/mongodb-developer/library-management-system/tree/java-server" src="img/screenshots/50-demo-app/2-start-app/1-codespace-java.png" alt="Create codespace button" />
-
-</TabItem>
-</Tabs>
-
-
-
 Let it run for a few seconds as it prepares your environment. It will clone the repository, prepare the containers, and run the installation scripts. Once it's ready, you'll see an IDE, with a preview window that shows the running application.
 
 :::note
@@ -58,9 +43,6 @@ Right now, you should see a big error message in the console, as we haven't conf
 ```
 :::
 
-<Tabs groupId="server">
-<TabItem value="node" label="🚀 NodeJS/Express">
-
 ### Expose the server port
 
 To get the application working in that environment, there is one small change you need to make to the codespace. You need to expose the port where the server is running.
@@ -77,8 +59,30 @@ You'll see the text in the *Visibility* column change to `Public`.
 
 That's it! You're now ready to move to the next section.
 
+
 </TabItem>
+
 <TabItem value="java" label="☕️ Java Spring Boot">
+
+Open the [repository on the `java-server` branch](https://github.com/mongodb-developer/library-management-system/tree/java-server).
+
+To start the Java application in a codespace, check that you are in the `java-server` branch and then click "Code." Then, look for the *Codespaces* tab. Click "Create Codespace on java-server." This will create a new codespace for you and start the application.
+
+<Screenshot url="https://github.com/mongodb-developer/library-management-system/tree/java-server" src="img/screenshots/50-demo-app/2-start-app/1-codespace-java.png" alt="Create codespace button" />
+
+
+Let it run for a few seconds as it prepares your environment. It will clone the repository, prepare the containers, and run the installation scripts. Once it's ready, you'll see an IDE, with a preview window that shows the running application.
+
+:::note
+Again, this might take a few minutes. It's a great time to grab a coffee. ☕️
+:::
+
+<Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/50-demo-app/2-start-app/2-codespace-java.png" alt="The codespace" />
+
+:::warning
+Right now, you should see an error message in the console, as we haven't configured the app yet. Don't worry, you'll get it up and running in a few minutes.
+:::
+
 ### Set the MongoDB connection
 To run the application in GitHub Codespaces, you now need to set the MongoDB connection string before starting the server.
 In the terminal of your Codespace, run:
@@ -89,12 +93,32 @@ After setting the environment variable, start the application again with:
 ```Java
 mvn spring-boot:run
 ```
-<Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/50-demo-app/2-start-app/5-set-environments.png" alt="The Port Visibility menu" />
+
+<Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/50-demo-app/2-start-app/5-set-environments.png" alt="Set environment variable" />
 Once the command finishes, the application will be up and running on port 5000.
-<Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/50-demo-app/2-start-app/6-app-started.png" alt="The Port Visibility menu" />
+
+<Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/50-demo-app/2-start-app/6-app-started.png" alt="App is started on port 5000" />
+
+### Expose the server port
+
+To get the application working in that environment, there is one small change you need to make to the codespace. You need to expose the port where the server is running.
+
+Look for the *Ports* tab at the bottom of the IDE.
+
+<Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/50-demo-app/2-start-app/3-ports.png" alt="The Ports tab" />
+
+Once you click on the tab, you'll see a list of ports. Right-click on the port `Server (5000)` row. Then, select "Port Visibility" and "Public."
+
+<Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/50-demo-app/2-start-app/4-port-visibility.png" alt="The Port Visibility menu" />
+
+You'll see the text in the *Visibility* column change to `Public`.
+
+That's it! You're now ready to move to the next section.
+
 
 </TabItem>
 </Tabs>
+
 ## 🦸 Option 2: Run locally
 
 If you prefer to run the application locally, you can do so by following these steps. Keep in mind that the following steps of this lab will be using the codespace, so you might need to adapt some of the commands.

docs/50-demo-app/3-configure.mdx

@@ -4,12 +4,12 @@ import TabItem from '@theme/TabItem';
 
 # 👐 Configure the Application
 
-Now that your environment is set up, you can configure the application.
-There should already be a file open in the IDE. If not, look in the file explorer on the left, and open the file below. This file contains the configuration for the application.
-
 <Tabs groupId="server">
 <TabItem value="node" label="🚀 NodeJS/Express">
 
+Now that your environment is set up, you can configure the application.
+There should already be a file open in the IDE. If not, look in the file explorer on the left, and open the file below. This file contains the configuration for the application.
+
 File: `server/.env`
 
 ```
@@ -39,7 +39,7 @@ In the *Terminal* tab at the bottom, look for the `Server is running on port: 50
 </TabItem>
 
 <TabItem value="java" label="☕️ Java Spring Boot">
-Everything is set up correctly. You can proceed to the next step.
+Verify that your server application is running and the server port is set to "Public".
 
 <Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/50-demo-app/3-configure/1-running-java.png" alt="The terminal panel" />
 </TabItem>

docs/70-indexing/1-create-compound-index.mdx

@@ -11,7 +11,7 @@ In this exercise, you will build a compound index following the ESR rule, compar
 <Tabs groupId="server">
 <TabItem value="node" label="🚀 NodeJS/Express">
 
-1. Open the file `server/src/indexing/borrowed-books-index.ts` [file](https://github.com/mongodb-developer/library-management-system/blob/main/server/src/indexing/borrowed-books-index.ts) in your GitHub Codespace.
+1. Open the file `server/src/indexing/borrowed-books-index.ts` file in your GitHub Codespace.
 
 2. Examine the code to build a compound index on the `issueDetails` collection.
 
@@ -81,7 +81,7 @@ In this exercise, you will build a compound index following the ESR rule, compar
 
 <TabItem value="java" label="☕️ Java Spring Boot">
 
-1. Let’s start with our [`IssueDetail`](https://github.com/mongodb-developer/library-management-system/blob/java-server/java-server/src/main/java/com/mongodb/devrel/library/domain/model/IssueDetail.java) record. Right now, it looks like this:
+1. Let’s start with our `IssueDetail` record. Right now, it looks like this:
     ```java title='src/main/java/com/mongodb/devrel/library/domain/model/IssueDetail.java'
     @Document(collection = "issueDetails")
     public record IssueDetail(
@@ -140,16 +140,19 @@ To double-check that the index was created, you can run the following command in
 db.issueDetails.getIndexes()
 ```
 
-:::info
-Optional: If you’re using the MongoDB for VS Code extension
-, you can also open the issueDetails collection in the VS Code sidebar and inspect the Indexes tab directly.
-:::
-
-<Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/70-indexing/2-index-vscode.png" alt="VS Code Playground" />
-
 </TabItem>
 </Tabs>
 
+## Verify that the index is created
+
+1. Open the **VS Code extension** from the sidebar on the left.
+1. Click **Add Connection**.
+1. In the welcome screen, click **Connect** under the **Connect with Connection String** section.
+1. Enter the MongoDB connection string from your Atlas cluster, making sure to replace the **password placeholder**.
+1. Press **Enter**.
+1. In the sidebar, you should now see your database. Expand the **library** database, then the **issueDetails** collection, and finally select **Indexes**.
+
+<Screenshot url="https://github.com/mongodb-developer/library-management-system" src="img/screenshots/70-indexing/2-index-vscode.png" alt="VS Code Extension showing the collection indexes" />
 
 ## 🦸‍♀️ Try different indexes