diff --git a/docs/10-intro.mdx b/docs/10-intro.mdx index d6664a8..c803969 100644 --- a/docs/10-intro.mdx +++ b/docs/10-intro.mdx @@ -22,8 +22,11 @@ In the navigation bar, you will notice some icons. Here are their meanings: ## Requirements * Google Chrome installed -* GitHub account -* Ensure your laptop can access GitHub and GitHub Codespaces (sometimes corporate VPNs block these sites!) +* For GitHub Codespaces + * GitHub account + * Ensure your laptop can access GitHub and GitHub Codespaces (sometimes corporate VPNs block these sites!) +* Alternatively, for Instruqt + * Ensure your laptop can access the [Instruqt lab environment](https://mdb.link/instruqt-library). ## Hardware requirements diff --git a/docs/20-mongodb-atlas/1-what-is-mongodb.mdx b/docs/20-mongodb-atlas/1-what-is-mongodb.mdx deleted file mode 100644 index 83858bd..0000000 --- a/docs/20-mongodb-atlas/1-what-is-mongodb.mdx +++ /dev/null @@ -1,26 +0,0 @@ -# πŸ“˜ What is MongoDB Atlas? - -MongoDB comes in many different flavors. The most common is the open-source version that you can download and install on your computer. However, there is also a cloud-based version of MongoDB that you can use. This cloud offering is called MongoDB Atlas. - -In this lab, you will learn how to create a MongoDB Atlas account and a cluster. You will also learn how to connect to your cluster from an application that runs in the cloud. - -## Why use MongoDB Atlas? - -There are many reasons why you might want to use MongoDB Atlas, but most of all, it's by far the easiest way to get started with MongoDB. - -On top of that, MongoDB Atlas offers a lot of features that you would otherwise have to set up yourself. For example, MongoDB Atlas offers: -* Atlas Search β€” a powerful search engine that allows you to search through your data. -* Atlas Data Federation - a way to query data that is stored in AWS S3 or Google Cloud Storage. -* Atlas Vector Search - a way to augment your data with AI/mostly. - -## Where is MongoDB Atlas deployed? - -You can choose the cloud provider and the region where your MongoDB Atlas cluster is deployed. MongoDB Atlas is available in all major cloud providers, including AWS, Azure, and Google Cloud. - -It is also available in many regions around the world. You can choose the region that is closest to you or the region that is closest to your users. - -You can also use MongoDB Atlas directly from your cloud provider of choice by installing it from the marketplace. This will simplify all the billing and management of your MongoDB Atlas cluster. - -## How much does MongoDB Atlas cost? - -MongoDB Atlas is free to use for learning and development. You can create a free cluster and use it for as long as you want. You can also create as many free clusters as you want. diff --git a/docs/20-mongodb-atlas/2-create-account.mdx b/docs/20-mongodb-atlas/2-create-account.mdx deleted file mode 100644 index dbd63cd..0000000 --- a/docs/20-mongodb-atlas/2-create-account.mdx +++ /dev/null @@ -1,63 +0,0 @@ -import Link from "@site/src/components/Link"; -import Screenshot from "@site/src/components/Screenshot"; - -# πŸ‘ Create Your Account - -To use MongoDB Atlas, start by creating an account. - -
- πŸ¦Έβ€β™€οΈ If you already have an Atlas account, you can use it by creating a new project - - First, log into MongoDB Atlas using your existing credentials. - - - - ## Create a new Atlas project - - Once you're in Atlas, open the dropdown on the left-top corner of the page and select **New Project**. - - - - Enter a name for your project and click **Next**. - - - - On the next page, you can leave the current user as the project owner, and click **Create Project**. - - Once the project is ready, continue the workshop **deploying a Database Cluster** -
- -## Sign up for MongoDB Atlas - -:::tip -Creating a MongoDB Atlas account is free and does not require a credit card. -::: - -:::caution -Some corporate email accounts have restrictions on their use with Atlas. Consider using your personal account instead. -::: - - -Go to the MongoDB website and create your account. You will be greeted by a form similar to the one below. - - - -:::info -If you are doing this lab at an event, you should use the same email address you used to register for the event. -::: - -Complete the form and click the "Create Your Atlas Account" button. - -### Verify your email address - -You will receive an email from MongoDB asking you to verify your email address. Click the link in the email to verify your email address. - - - -:::caution -If you haven't received the email within two minutes, check your spam folder. -::: - -### Finish the onboarding - -You will be redirected to the MongoDB Atlas onboarding wizard. Fill in the form and click "Finish" to continue. diff --git a/docs/20-mongodb-atlas/3-create-cluster.mdx b/docs/20-mongodb-atlas/3-create-cluster.mdx deleted file mode 100644 index 9bcce24..0000000 --- a/docs/20-mongodb-atlas/3-create-cluster.mdx +++ /dev/null @@ -1,67 +0,0 @@ -import Screenshot from "@site/src/components/Screenshot"; - -# πŸ‘ Deploy a Database Cluster - -Now that you have a MongoDB Atlas account, you can create your first cluster. A cluster is a group of at least three servers that store your data. Using a cluster ensures that your data is always available, even if one of the servers fails. - -You can create your first database cluster for free. It won't expire, and you will have a 500 MB storage limit. This is enough to get started with MongoDB Atlas. - -## Create a new cluster - -From the overview page, click on "+ Create." - - - -:::note -If you just created your account, you will automatically be redirected to the cluster creation page and can skip this step. -::: - -You will be redirected to the cluster creation page. Here you can choose the cloud provider and region where your data will be stored. You can also choose the type of cluster you want to create. For this tutorial, we will use the free tier. - -1. For the cluster tier, pick **M0**, which is the free tier. In the **Name** input box, put the name "DeveloperDay" (one word, no spaces). -1. Uncheck the *Automate security setup* box. You will set up security manually in the next steps. -1. Uncheck the *Preload sample dataset* box. You will import a dataset later in this tutorial. -1. Select your favorite cloud provider and the region closest to you. -1. Finally, click on "Create Deployment." - - - -Once you're done with the hardest part of the process (the captcha), you will be redirected to the security quickstart. - -## Security quickstart - -By default, your MongoDB Atlas deployment is completely locked down. You need to configure the network settings and create a user to access your database. - -While your deployment is being provisioned, you will see the security quickstart dialog. - -### Network access - -First, you need to **Allow Access from Anywhere**. You will see a field prepopulated with the IP address `0.0.0.0/0`. This means that you can connect to your database from any IP address, including the virtual environment you will use for this lab. Click **Add IP Address** to add it to the network allowlist. - -:::note -If you don't see a button to allow access from anywhere, you should close the dialog and go to the **Network Access** tab under the **Security** section in the left sidebar. Click on **Add IP Address**, add `0.0.0.0/0`, and click **Confirm**. -::: - -:::caution -It is dangerous to expose your database to the entire world. Never do this in a real production environment. -::: - -### Database user - -Next, you need to create a database user. Pick any username and password you want. They will be used when you want to connect to your database. Click "Create Database User" to create the user. - -Atlas might create the user automatically for you if you have just created your account. In this case, the username and password will match your Atlas account credentials. - -:::tip -Make sure to remember your username and password. You will need them later. - -For the sake of this workshop, it might be preferable to use a simple password that you'll remember over a more secure one. - -Don't use any special characters in your password. Even though MongoDB allows some special characters, they might not work well with the tools you'll use later in this workshop. -::: - -## That's all! - -You have a new database cluster, and you can now connect to it from your application. If everything goes well, you should see your newly created cluster in the database deployment screen. - - diff --git a/docs/20-mongodb-atlas/_category_.json b/docs/20-mongodb-atlas/_category_.json deleted file mode 100644 index cf64a5b..0000000 --- a/docs/20-mongodb-atlas/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "MongoDB Atlas", - "position": 20, - "link": { - "type": "generated-index", - "description": "Learn how to create a MongoDB Atlas account and deploy a free cluster." - } -} diff --git a/docs/30-importing-data/1-intro.mdx b/docs/30-importing-data/1-intro.mdx deleted file mode 100644 index b909cfb..0000000 --- a/docs/30-importing-data/1-intro.mdx +++ /dev/null @@ -1,4 +0,0 @@ -# πŸ“˜ Library Management System Dataset - -This dataset contains over 6,700 documents for books and approximately 6,250 associated authors. The data is structured using some of the most common data modeling techniques in MongoDB. Those techniques are covered in the "Data modeling hands-on session" delivered as part of Developer Days. - diff --git a/docs/30-importing-data/2-get-connection-string.mdx b/docs/30-importing-data/2-get-connection-string.mdx deleted file mode 100644 index 268c899..0000000 --- a/docs/30-importing-data/2-get-connection-string.mdx +++ /dev/null @@ -1,29 +0,0 @@ -import Screenshot from "@site/src/components/Screenshot"; - -# πŸ‘ Get Your Connection String - -To load the dataset into your cluster, you will need to get the connection string for your cluster. - -In the Atlas UI, navigate to the **Overview** page. In the **Clusters** section, click "Connect." - - - -A modal will display several ways to connect to your database. - - - -Select "Compass." While we won't be using Compass to import the data, it's an easy way to see your connection string. - - - -Look for your connection string. It should look something like this: - -``` -mongodb+srv://:@/ -``` - -Click the copy button next to your connection string to copy it to your clipboard. Paste the connection string somewhere safe. You will need this connection string several times throughout this training. - -:::tip -Don't forget to replace `` with the password you set when you created the cluster. -::: diff --git a/docs/30-importing-data/3-import-data.mdx b/docs/30-importing-data/3-import-data.mdx deleted file mode 100644 index 342365a..0000000 --- a/docs/30-importing-data/3-import-data.mdx +++ /dev/null @@ -1,35 +0,0 @@ -import Screenshot from "@site/src/components/Screenshot"; - -# πŸ‘ Importing the Library Data - -Now that you have your connection string, you can import the library data into your project. - -To do this, we've built an importer app that will copy the data from our database, into your cluster. You'll need to provide the importer app with your connection string. - -:::caution -You should never share your connection string with anyone. It contains your database credentials, and anyone with access to it can read and write data to your database. -::: - -To import the data, start by going to the [importer application](https://mdb.link/import-library-data). - -You will be greeted by this minimalistic interface. - - - -Paste your connection string into the input field, and click "Import Library Data." - -You should see a message saying that the import has started. - -``` -Starting data import -``` - -:::note -Importing the data might take a few minutes. It's a good time to stretch or get a coffee! β˜• -::: - -After a few minutes, you should see that the import job was successful. - - - -Once the data is copied to your cluster, you are ready to start building your application. diff --git a/docs/30-importing-data/_category_.json b/docs/30-importing-data/_category_.json deleted file mode 100644 index 093137f..0000000 --- a/docs/30-importing-data/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Importing Data", - "position": 30, - "link": { - "type": "generated-index", - "description": "This sections shows you how to import the data required for the subsequent labs." - } -} \ No newline at end of file diff --git a/docs/50-demo-app/2-start-app.mdx b/docs/50-demo-app/2-start-app.mdx index e9e7522..2f0bebf 100644 --- a/docs/50-demo-app/2-start-app.mdx +++ b/docs/50-demo-app/2-start-app.mdx @@ -6,11 +6,25 @@ import TabItem from '@theme/TabItem'; You have two options to start the application. -## Option 1: Run in a codespace +## Option 1: Run in Instruqt -By far, the easiest way to start the application is to run it in a codespace. A codespace is a cloud-hosted, containerized development environment that you can connect to from Visual Studio Code. It comes pre-configured with all the tools you need to build and run the application. +Instruqt is a lab platform that provides cloud-based sandboxes which come pre-configured with all the tools you need to run this lab. -In the case of this application, you can even use the online IDE to edit the code and see the changes reflected in the running application. +Navigate to the Instruqt lab using [this link](https://mdb.link/instruqt-library). + +Fill out the form that appears and click **Submit and access**. + +Click **Start** to launch the lab environment. + +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 database. + +Once this is done, you should see a **Start** button at the bottom right of the screen. Click this to enter the lab. + +## Option 2: Run in a codespace + +If Instruqt is not working for you, you can also use GitHub Codespaces. A GitHub Codespace is a cloud-hosted, containerized development environment that you can connect to from Visual Studio Code. It comes pre-configured with all the tools you need to build and run the application. + +Similar to Instruqt, you can even use Codespaces as an online IDE to edit the code and see the changes reflected in the running application. @@ -21,44 +35,17 @@ To start the application in a codespace, click "Code." Then, look for the *Codes -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. +Let it run for a few minutes 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. β˜•οΈ ::: - - -:::warning -Right now, you should see a big 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. - -``` - ####### ###### ###### ####### ###### - # # # # # # # # # - # # # # # # # # # - ##### ###### ###### # # ###### - # # # # # # # # # - # # # # # # # # # - ####### # # # # ####### # # -``` -::: - -### 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. - - - -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." +Once the command finishes, the application will be running on port 5400. - - -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. +In the *Terminal* tab at the bottom, look for the line `Server is running on port: 5400`. If it appears, the Node.js API for the library application is up and ready to serve requests. + @@ -77,55 +64,41 @@ Let it run for a few seconds as it prepares your environment. It will clone the Again, this might take a few minutes. It's a great time to grab a coffee. β˜•οΈ ::: - +Once the command finishes, the application will be up and running on port 5400. -:::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: -``` -export MONGODB_URI="" -``` -After setting the environment variable, start the application again with: -``` -mvn spring-boot:run -``` + - -Once the command finishes, the application will be up and running on port 5000. + + - +### Access the library website -### Expose the server port +Once the environment loads, you may see the following warning: -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. +You're seeing this warning because the development server is running on a publicly forwarded port, and GitHub shows a security notice anytime someone accesses a public port. Even in your own codespace, GitHub displays it just to confirm you intended to open that external-facing URL. - +Click "Continue" to load the library application website. -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." + - +You should see the application with some books listed now. -You'll see the text in the *Visibility* column change to `Public`. +### Open the client in a new window -That's it! You're now ready to move to the next section. +If you accidentally close the Client or want to open it in a separate tab/window go to the Ports tab, hover over Client and a world icon should appear. Click it and the client will open in a new tab. + - - -## 🦸 Option 2: Run locally +## 🦸 Option 3: 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. +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 Instruqt or the GitHub codespace, so you might need to adapt some of the commands. :::info -During the lab, we will use GitHub Codespaces. These instructions are here just in case you can't use Codespaces or you _really, really, really_ want a local installation. +During the lab, we will use Instruqt or GitHub Codespaces. These instructions are here just in case you can't use Codespaces or you _really, really, really_ want a local installation. ::: @@ -171,10 +144,10 @@ npm start 1. Before starting the backend, switch to the java-server project. -``` + ``` git checkout java-server -``` -This command moves you into the correct project folder that contains the Java backend code. + ``` + This command moves you into the correct project folder that contains the Java backend code. 2. Set the MongoDB connection string as an environment variable: - On Linux / macOS: diff --git a/docs/50-demo-app/3-configure.mdx b/docs/50-demo-app/3-configure.mdx deleted file mode 100644 index 9d85971..0000000 --- a/docs/50-demo-app/3-configure.mdx +++ /dev/null @@ -1,63 +0,0 @@ -import Screenshot from "@site/src/components/Screenshot"; -import Tabs from '@theme/Tabs'; -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. - -File: `server/.env` - -``` -PORT=5000 -DATABASE_URI="mongodb+srv://user:password@serverurl" -DATABASE_NAME="library" -SECRET="secret" -``` - - -You'll need to change the `DATABASE_URI` parameter to match your connection string. That's the same one you used to import the data. - -:::tip -Don't remember how to get your connection string? Check out the [Import Data](/docs/importing-data/import-data) section. -::: - -Copy and paste your connection string into the `DATABASE_URI` parameter. - -The file will automatically save, and the server will restart. - - - -In the *Terminal* tab at the bottom, look for the `Server is running on port: 5000` line. If you see it, you're good to go! - - - - - - -Verify that your server application is running and the server port is set to "Public". - - - - - - -## Reload the client - -Now that the server is running, you can reload the client to see the application. - -In the upper right panel, click the refresh icon to reload the client. - - - -Clicking this will reload the client, which should now be connected to the database. You should see the application with some books listed now. - -## Open the client in a new window - -If you accidentally close the Client or want to open it in a separate tab/window go to the Ports tab, hover over Client and a world icon should appear. Click it and the client will open in a new tab. - - diff --git a/docs/50-demo-app/3-explore.mdx b/docs/50-demo-app/3-explore.mdx new file mode 100644 index 0000000..512b384 --- /dev/null +++ b/docs/50-demo-app/3-explore.mdx @@ -0,0 +1,15 @@ +import Screenshot from "@site/src/components/Screenshot"; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# πŸ‘ Explore the Dataset + +Now that your environment is set up, you can explore it. + +## Local MongoDB instance + +The database you'll be using in this exercise is a local MongoDB Atlas deployment running inside the codespace's sandbox. + +To explore the database and the imported dataset, click the leaf icon on the left sidebar to open the MongoDB extension. You’ll see a preset connection called **"Library DB"**. Expand it and browse the collections in the **library** database. + +You can open the pre-loaded documents in the collections. For example, expand the `books` collection and open a document of your choice. This will open a JSON preview of the document in the editor. You can even edit the document in the editor - saving the file will update the document in the database. diff --git a/docs/60-schema-validation/2-validate-users.mdx b/docs/60-schema-validation/2-validate-users.mdx index 0a50886..0240914 100644 --- a/docs/60-schema-validation/2-validate-users.mdx +++ b/docs/60-schema-validation/2-validate-users.mdx @@ -6,26 +6,12 @@ import TabItem from '@theme/TabItem'; In this exercise, you will explore the pre-written JSON validation schema for the `users` collection, run a script to apply it to the collection, and test the schema validation by inserting a document that does not match the schema. -## Database user permissions - -To update the validator for any database collection, your database user must have admin privileges. Follow these steps to ensure your user has the correct permissions: - -1. Open the [Atlas UI](https://cloud.mongodb.com?utm_campaign=devrel&utm_source=workshop&utm_medium=cta&utm_content=developer.day&utm_term=project.phoenix). -2. In the left-hand menu, navigate to **Network Settings** and select "Database Access." -3. Locate your database user in the list. Check the **MongoDB Roles** column for the role of the user you are using for this workshop. If the role is not **atlasAdmin@admin**, you will need to update it. -4. If the role is not **atlasAdmin@admin**, click "Edit" button next to the user. -5. Scroll down to the **Database User Privileges** section and expand the **Built-in Role** dropdown. -6. Select "Atlas admin" from the dropdown menu. -7. Click "Update User" to save the changes. - -Atlas will deploy the change in a few seconds. - ## Explore the JSON schema -The JSON schema for the `users` collection is stored in the `server/src/schema-validation/apply-schema.ts` [file](https://github.com/mongodb-developer/library-management-system/blob/main/server/src/schema-validation/apply-schema.ts). Open the file in your GitHub codespace and examine the schema. +The JSON schema for the `users` collection is stored in the `server/src/schema-validation/apply-schema.ts` [file](https://github.com/mongodb-developer/library-management-system/blob/main/server/src/schema-validation/apply-schema.ts). Open the file and examine the schema. @@ -176,11 +162,6 @@ When the application starts, you should see a message confirming that the valida - -:::caution -If you see an error related to your user permissions, go back to the [Database User Permissions](#database-user-permissions) section and update your user permissions. -::: - ## Test the schema validation diff --git a/docs/70-indexing/1-create-compound-index.mdx b/docs/70-indexing/1-create-compound-index.mdx index 749ce34..f311e9c 100644 --- a/docs/70-indexing/1-create-compound-index.mdx +++ b/docs/70-indexing/1-create-compound-index.mdx @@ -139,12 +139,9 @@ As soon as the application starts, you will see log entries showing the creation ## Verify that the index is created -1. Open the **VS Code extension** (leaf icon) 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**. +1. Open the **MongoDB extension** (leaf icon) from the sidebar on the left. +1. Click on **Library DB** to connect to the local MongoDB Atlas deployment. +1. Expand the **library** database, then the **issueDetails** collection, and finally select **Indexes**. diff --git a/package-lock.json b/package-lock.json index 07885a8..5c84ce0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -178,6 +178,7 @@ "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.35.0.tgz", "integrity": "sha512-FfmdHTrXhIduWyyuko1YTcGLuicVbhUyRjO3HbXE4aP655yKZgdTIfMhZ/V5VY9bHuxv/fGEh3Od1Lvv2ODNTg==", "license": "MIT", + "peer": true, "dependencies": { "@algolia/client-common": "5.35.0", "@algolia/requester-browser-xhr": "5.35.0", @@ -338,6 +339,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz", "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==", "license": "MIT", + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -2172,6 +2174,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" }, @@ -2194,6 +2197,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" } @@ -2274,6 +2278,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -2637,6 +2642,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -3316,6 +3322,7 @@ "resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.8.1.tgz", "integrity": "sha512-ENB01IyQSqI2FLtOzqSI3qxG2B/jP4gQPahl2C3XReiLebcVh5B5cB9KYFvdoOqOWPyr5gXK4sjgTKv7peXCrA==", "license": "MIT", + "peer": true, "dependencies": { "@docusaurus/babel": "3.8.1", "@docusaurus/bundler": "3.8.1", @@ -3392,6 +3399,7 @@ "resolved": "https://registry.npmjs.org/@docusaurus/faster/-/faster-3.8.1.tgz", "integrity": "sha512-XYrj3qnTm+o2d5ih5drCq9s63GJoM8vZ26WbLG5FZhURsNxTSXgHJcx11Qo7nWPUStCQkuqk1HvItzscCUnd4A==", "license": "MIT", + "peer": true, "dependencies": { "@docusaurus/types": "3.8.1", "@rspack/core": "^1.3.15", @@ -3520,6 +3528,7 @@ "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.8.1.tgz", "integrity": "sha512-oByRkSZzeGNQByCMaX+kif5Nl2vmtj2IHQI2fWjCfCootsdKZDPFLonhIp5s3IGJO7PLUfe0POyw0Xh/RrGXJA==", "license": "MIT", + "peer": true, "dependencies": { "@docusaurus/core": "3.8.1", "@docusaurus/logger": "3.8.1", @@ -4193,6 +4202,7 @@ "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz", "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/mdx": "^2.0.0" }, @@ -4749,6 +4759,7 @@ "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -4853,6 +4864,7 @@ "integrity": "sha512-ZaDETVWnm6FE0fc+c2UE8MHYVS3Fe91o5vkmGfgwGXFbxYvAjKSqxM/j4cRc9T7VZNSJjriXq58XkfCp3Y6f+w==", "hasInstallScript": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.23" @@ -5804,6 +5816,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz", "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==", "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -6149,6 +6162,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -6216,6 +6230,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -6261,6 +6276,7 @@ "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.35.0.tgz", "integrity": "sha512-Y+moNhsqgLmvJdgTsO4GZNgsaDWv8AOGAaPeIeHKlDn/XunoAqYbA+XNpBd1dW8GOXAUDyxC9Rxc7AV4kpFcIg==", "license": "MIT", + "peer": true, "dependencies": { "@algolia/abtesting": "1.1.0", "@algolia/client-abtesting": "5.35.0", @@ -6752,6 +6768,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001726", "electron-to-chromium": "^1.5.173", @@ -7035,6 +7052,7 @@ "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz", "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@chevrotain/cst-dts-gen": "11.0.3", "@chevrotain/gast": "11.0.3", @@ -7760,6 +7778,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -8085,6 +8104,7 @@ "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.0.tgz", "integrity": "sha512-2d2EwwhaxLWC8ahkH1PpQwCyu6EY3xDRdcEJXrLTb4fOUtVc+YWQalHU67rFS1a6ngj1fgv9dQLtJxP/KAFZEw==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10" } @@ -8494,6 +8514,7 @@ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "license": "ISC", + "peer": true, "engines": { "node": ">=12" } @@ -9809,6 +9830,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -15237,6 +15259,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -15811,6 +15834,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -16714,6 +16738,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -17545,6 +17570,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -17554,6 +17580,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -17609,6 +17636,7 @@ "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-6.0.0.tgz", "integrity": "sha512-YMMxTUQV/QFSnbgrP3tjDzLHRg7vsbMn8e9HAa8o/1iXoiomo48b7sk/kkmWEuWNDPJVlKSJRB6Y2fHqdJk+SQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/react": "*" }, @@ -17637,6 +17665,7 @@ "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", @@ -19946,6 +19975,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -20193,6 +20223,7 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.101.0.tgz", "integrity": "sha512-B4t+nJqytPeuZlHuIKTbalhljIFXeNRqrUGAQgTGlfOl2lXXKXw+yZu6bicycP+PUlM44CxBjCFD6aciKFT3LQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", diff --git a/static/img/screenshots/50-demo-app/2-start-app/7-visit-page.png b/static/img/screenshots/50-demo-app/2-start-app/7-visit-page.png new file mode 100644 index 0000000..d30765f Binary files /dev/null and b/static/img/screenshots/50-demo-app/2-start-app/7-visit-page.png differ