Merge pull request #26 from mongodb-developer/add-instruqt-instructions

Add instruqt instructions

Author: dfreniche

docs/30-quick-start.mdx

@@ -1,13 +1,79 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # 👐 Quick Start
 
+:::tip
+In this lab, we will be using Jupyter Notebooks, which is an interactive Python environment. If you are new to Jupyter Notebooks, use [this](https://mongodb-developer.github.io/vector-search-lab/docs/dev-env/jupyter-notebooks) guide to familiarize yourself with the environment.
+:::
+
+<Tabs groupId="setup options">
+<TabItem value="Instruqt" label="Instruqt">
+
+Instruqt is a lab platform that provides cloud-based sandboxes which come pre-configured with all the tools you need to run this lab.
+
+**Navigate to the Instruqt lab using [this](http://mdb.link/instruqt-jedee) link.** Fill out the form that appears and click **Submit and access**.
+
+<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/1-dev-env-setup/instruqt/3-submit-form.png" alt="Submit Instruqt form" />
+
+Click **Start** to launch the lab environment.
+
+<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/1-dev-env-setup/instruqt/4-start-sandbox-setup.png" alt="Start Instruqt sandbox" />
+
+You should see a screen with a purple progress bar indicating that Instruqt is preparing a sandbox with all the required libraries for this lab and a MongoDB cluster.
+
+Once this is done, you should see a Start button at the bottom right of the screen. Click this to enter the lab.
+
+<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/1-dev-env-setup/instruqt/5-start-lab.png" alt="Start Instruqt lab" />
+
+</TabItem>
+
+<TabItem value="GitHub Codespaces" label="GitHub Codespaces">
+
 1. Sign in to Github, and open this repository: [mdb.link/jedee](https://mdb.link/jedee)
 2. Click on `Code` > Click on `Codespaces` > Click on `Create a Codespace on Main`
 3. ⚠️ **Wait for the Codespace to load completely**
-4. Click on the MongoDB extension
-5. Click on the `Library DB` in the connections and then select the `library` database
-6. Open a playground into the `books` collection
-7. Write MongoDB commands in the playground
-8. Run MongoDB commands by clicking on the play icon :arrow_forward: at the top right corner
-9. Practice by trying out all the examples and exercises mentioned in the next 2 sections: CRUD ops and Aggregation Pipelines.
-
-![Quick start steps 4 to 8](/img/quick-start-steps-4-to-8.png)
+
+![Quick start steps 4 to 8](/img/jedee.png)
+
+</TabItem>
+
+</Tabs>
+
+### Connect to the MongoDB cluster
+
+Let's first connect to the MongoDB database that was created for you. This will allow you to view data we import into the cluster later in the lab, directly from the IDE.
+
+To do this, click the leaf icon in the left navigation bar of the IDE. This is MongoDB's VSCode extension.
+
+<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/1-dev-env-setup/instruqt/6-click-leaf.png" alt="Click leaf icon" />
+
+Under **Connections**, click the _Local MongoDB Atlas_ connection. This should automatically establish a connection to the local MongoDB cluster running on port 27017.
+
+<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/1-dev-env-setup/instruqt/7-connect-cluster.png" alt="Connect to the cluster" />
+
+If the connection was successful, you should see a green leaf and a "connected" message appear around the _Local MongoDB Atlas_ connection.
+
+You will also see the default databases in the cluster appear under **Connections**. Any additional databases we create during the lab will also appear here.
+
+<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/1-dev-env-setup/instruqt/8-connection-successful.png" alt="Connection successful" />
+
+### Jupyter Notebook setup
+
+You will be filling code in a Jupyter Notebook during this lab, so let's get set up with that next!
+
+Within the sandbox, click on the files icon in the left navigation bar of the IDE. In the Explorer menu, navigate to `jedee` > `javascript` > `01_connect_database.ipynb` to open the Jupyter Notebook for this lab.
+
+<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/1-dev-env-setup/instruqt/2-nav-notebook.png" alt="Navigate to the notebook" />
+
+Next, select the Python interpreter by clicking **Select Kernel** at the top right of the IDE.
+
+<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/1-dev-env-setup/instruqt/9-select-kernel.png" alt="Select kernel" />
+
+In the modal that appears, click **Python environments...** and select the interpreter that is marked as **Recommended** or **Global Env**.
+
+<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/1-dev-env-setup/instruqt/10-python-env-modal.png" alt="Select Python Environments" />
+
+<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/1-dev-env-setup/instruqt/11-select-recommended.png" alt="Select recommended interpreter" />
+
+That's it! You're ready for the lab!