DOCSP-33852 Add Example Projects to Remaining SDK Landing Pages (#3075)

## Pull Request Info ### Jira - https://jira.mongodb.org/browse/DOCSP-33852 ### Staged Changes - [React Native](https://preview-mongodblindseymoore.gatsbyjs.io/realm/DOCSP-33852/sdk/react-native/) - [Node.js](https://preview-mongodblindseymoore.gatsbyjs.io/realm/DOCSP-33852/sdk/node/) - [Web](https://preview-mongodblindseymoore.gatsbyjs.io/realm/DOCSP-33852/web/) - [Flutter](https://preview-mongodblindseymoore.gatsbyjs.io/realm/DOCSP-33852/sdk/flutter/) ### Reminder Checklist If your PR modifies the docs, you might need to also update some corresponding pages. Check if completed or N/A. - [ ] Create Jira ticket for corresponding docs-app-services update(s), if any - [ ] Checked/updated Admin API - [ ] Checked/updated CLI reference ### Review Guidelines [REVIEWING.md](https://github.com/mongodb/docs-realm/blob/master/REVIEWING.md)
mongodb · Nov 10, 2023 · 870c6ff · 870c6ff
1 parent a308b56
commit 870c6ff
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 1 deletion.
diff --git a/source/example-projects.txt b/source/example-projects.txt
@@ -41,7 +41,7 @@ Learn about the core features of Realm with Atlas Device Sync.
       - `Flutter <https://github.com/realm/realm-dart-samples/tree/kilochat/kilochat>`__
       - `Kotlin <https://github.com/realm/realm-kotlin-samples/tree/main/AppServicesUsageSamples/apps/property-encryption>`__
       - `.NET <https://github.com/realm/realm-dotnet-samples/tree/main/QuickJournalSync>`__
-      - `Node <https://github.com/realm/realm-js/tree/main/examples/node-connection-and-error>`__
+      - `Node.js <https://github.com/realm/realm-js/tree/main/examples/node-connection-and-error>`__
       - `React Native <https://github.com/realm/realm-js/tree/main/examples/rn-todo-list>`__
       - `Swift <https://github.com/realm/realm-swift-samples/tree/main/OfflineLoginRealmAccess>`__
       - `Web <https://github.com/realm/realm-js/tree/nh/wasm/emscripten_target/examples/example-react-task>`__

diff --git a/source/images/icons/branding_2023/Technical_MDB_StaticHosting10x.png b/source/images/icons/branding_2023/Technical_MDB_StaticHosting10x.png
diff --git a/source/images/icons/branding_2023/Technical_MDB_VectorSearch.png b/source/images/icons/branding_2023/Technical_MDB_VectorSearch.png
diff --git a/source/images/icons/branding_2023/Technical_REALM_Mobile10x.png b/source/images/icons/branding_2023/Technical_REALM_Mobile10x.png
diff --git a/source/sdk/flutter.txt b/source/sdk/flutter.txt
@@ -225,3 +225,42 @@ The usage for Realm with Dart is the same as the Flutter SDK, except you must
 install and set up a separate package.
 
 :ref:`Learn how to set up Realm in your Dart project. <dart-install-steps>`
+
+Example Projects
+----------------
+
+Explore engineering and expert-provided example projects to learn best 
+practices and common development patterns for Realm and Atlas App Services
+using the Flutter SDK. Check out the :ref:`<realm-example-projects-table>` page
+for more Flutter sample apps.
+
+.. card-group::
+   :columns: 3
+   :style: extra-compact
+
+   .. card::
+      :headline: Offline Login and Realm Access
+      :cta: Example project
+      :url: https://github.com/realm/realm-dart-samples/tree/kilochat/kilochat
+      :icon: /images/icons/branding_2023/Technical_REALM_Offline10x.png
+      :icon-alt: Realm Offline Icon
+
+      Log in a Device Sync user and open a synced realm offline.
+
+   .. card::
+      :headline: User's Online State
+      :cta: Example project
+      :url: https://github.com/realm/realm-kotlin-samples/blob/main/AppServicesUsageSamples/apps/presence-detection/README.md
+      :icon: /images/icons/branding_2023/General_CONTENT_Users10x.png
+      :icon-alt: Users Icon
+
+      Detect connectivity and activity of users and devices. 
+
+   .. card::
+      :headline: Provider Shopper
+      :cta: Example project
+      :url: https://github.com/realm/realm-dart-samples/tree/main/provider_shopper
+      :icon: /images/icons/branding_2023/Technical_MDB_StaticHosting10x.png
+      :icon-alt: Local Realm Icon
+
+      Build a modified Flutter sample app that uses a local Realm instead of in-memory collection.
diff --git a/source/sdk/node.txt b/source/sdk/node.txt
@@ -182,3 +182,53 @@ Recommended Reading
       :icon-alt: Electron Icon
 
       Use the Realm Node.js SDK in an Electron desktop application.
+
+Example Projects
+----------------
+
+Explore engineering and expert-provided example projects to learn best 
+practices and common development patterns for Realm and Atlas App Services
+using the Node.js SDK. Check out the :ref:`<realm-example-projects-table>` page
+for more Node.js sample apps.
+
+.. card-group::
+   :columns: 3
+   :style: extra-compact
+
+   .. card::
+      :headline: Vehicle Simulator and Controller
+      :cta: Example project
+      :url: https://github.com/mongodb-industry-solutions/Vehicle-Digital-Twin-Feedback-Loop 
+      :icon: /images/icons/branding_2023/Technical_MDB_VectorSearch.png
+      :icon-alt: Virtual Space Icon
+
+      Build a connected platform to monitor vehicle analytics using MongoDB Atlas and the AWS ecosystem.
+
+   .. card::
+      :headline: Offline Login and Realm Access
+      :cta: Example project
+      :url: https://github.com/realm/realm-js/tree/main/examples/node-connection-and-error
+      :icon: /images/icons/branding_2023/Technical_REALM_Offline10x.png
+      :icon-alt: Realm Offline Icon
+
+      Log in a Device Sync user and open a synced realm offline.
+
+   .. card::
+      :headline: User's Online State
+      :cta: Example project
+      :url: https://github.com/realm/realm-kotlin-samples/tree/main/AppServicesUsageSamples/apps/presence-detection
+      :icon: /images/icons/branding_2023/General_CONTENT_Users10x.png
+      :icon-alt: Users Icon
+
+      Detect connectivity and activity of users and devices. 
+
+   .. card::
+      :headline: Connection State Change & Error Handling
+      :cta: Example project
+      :url: https://github.com/realm/realm-js/tree/main/examples/node-connection-and-error
+      :icon: /images/icons/branding_2023/General_CLOUD_Mobility10x.png
+      :icon-alt: Cloud Mobile Transfer Icon
+
+      Learn best practices around handling Sync errors and client reset 
+      strategies.
+
diff --git a/source/sdk/react-native.txt b/source/sdk/react-native.txt
@@ -244,3 +244,54 @@ Recommended Reading
 
       Build and deploy a React Native application quickly using an
       Expo template application with @realm/react.
+
+Example Projects
+----------------
+
+Explore engineering and expert-provided example projects to learn best 
+practices and common development patterns for Realm and Atlas App Services
+using the React Native SDK. Check out the :ref:`<realm-example-projects-table>` page
+for more React Native sample apps.
+
+.. card-group::
+   :columns: 3
+   :style: extra-compact
+
+   .. card:: 
+      :headline: Netflix-like Movie App 
+      :cta: Example project
+      :url: https://github.com/realm/realm-js/tree/main/examples/rn-multiple-realms
+      :icon: /images/icons/branding_2023/Technical_REALM_Mobile10x.png
+      :icon-alt: Mobile Database Icon
+
+      Build a Netflix-like app for browsing movies from MongoDB's Mflix sample dataset. Use multiple realms to allow registered users to sync and manage movies in their own private list.
+
+   .. card::
+      :headline: Offline Login and Realm Access
+      :cta: Example project
+      :url: https://github.com/realm/realm-js/tree/main/examples/rn-todo-list
+      :icon: /images/icons/branding_2023/Technical_REALM_Offline10x.png
+      :icon-alt: Realm Offline Icon
+
+      Log in a Device Sync user and open a synced realm offline.
+
+   .. card::
+      :headline: User's Online State
+      :cta: Example project
+      :url: https://github.com/realm/realm-kotlin-samples/tree/main/AppServicesUsageSamples/apps/presence-detection
+      :icon: /images/icons/branding_2023/General_CONTENT_Users10x.png
+      :icon-alt: Users Icon
+
+      Detect connectivity and activity of users and devices. 
+
+   .. card::
+      :headline: Connection State Change & Error Handling
+      :cta: Example project
+      :url: https://github.com/realm/realm-js/tree/main/examples/rn-connection-and-error
+      :icon: /images/icons/branding_2023/General_CLOUD_Mobility10x.png
+      :icon-alt: Cloud Mobile Transfer Icon
+
+      Learn best practices around handling Sync errors and client reset 
+      strategies.
+
+
diff --git a/source/web.txt b/source/web.txt
@@ -207,3 +207,34 @@ Recommended Reading
 
       Learn all the ways that you can use the Realm Web SDK with your Next.js
       application.
+
+Example Projects
+----------------
+
+Explore engineering and expert-provided example projects to learn best 
+practices and common development patterns for Realm and Atlas App Services
+using the Web SDK. Check out the :ref:`<realm-example-projects-table>` page
+for more sample apps.
+
+.. card-group::
+   :columns: 3
+   :style: extra-compact
+
+   .. card::
+      :headline: Offline Login and Realm Access
+      :cta: Example project
+      :url: https://github.com/realm/realm-js/tree/nh/wasm/emscripten_target/examples/example-react-task
+      :icon: /images/icons/branding_2023/Technical_REALM_Offline10x.png
+      :icon-alt: Realm Offline Icon
+
+      Log in a Device Sync user and open a synced realm offline.
+
+   .. card::
+      :headline: User's Online State
+      :cta: Example project
+      :url: https://github.com/realm/realm-kotlin-samples/tree/main/AppServicesUsageSamples/apps/presence-detection
+      :icon: /images/icons/branding_2023/General_CONTENT_Users10x.png
+      :icon-alt: Users Icon
+
+      Detect connectivity and activity of users and devices. 
+