diff --git a/content/7-webapp-features/1-fetch-data/ember/demo.hbs b/content/7-webapp-features/1-fetch-data/ember/demo.hbs
new file mode 100644
index 0000000..0878dad
--- /dev/null
+++ b/content/7-webapp-features/1-fetch-data/ember/demo.hbs
@@ -0,0 +1,22 @@
+{{#let (this.fetchUsers) as |request|}}
+  {{#if request.isLoading}}
+
+    <p>Fetching users...</p>
+
+  {{else if request.error}}
+
+    <p>An error occurred while fetching users</p>
+
+  {{else}}
+
+     <ul>
+       {{#each request.users as |user|}}
+          <li>
+            <img src={{user.picture.thumbnail}} alt="user">
+            <p>{{user.name.first}} {{user.name.last}}</p>
+          </li>
+       {{/each}}
+     </ul>
+
+  {{/if}}
+{{/let}}
diff --git a/content/7-webapp-features/1-fetch-data/ember/demo.js b/content/7-webapp-features/1-fetch-data/ember/demo.js
new file mode 100644
index 0000000..99e5878
--- /dev/null
+++ b/content/7-webapp-features/1-fetch-data/ember/demo.js
@@ -0,0 +1,39 @@
+import { tracked } from '@glimmer/tracking';
+import Component from '@glimmer/component';
+
+export default class Demo extends Component {
+  fetchUsers = () => getUsers();
+}
+
+class State {
+  @tracked isLoading = false;
+  @tracked error = null;
+  @tracked data = null;
+}
+
+function getUsers() {
+  let state = new State();
+
+  async function fetchData() {
+    state.isLoading = true;
+
+    try {
+      let response = await fetch('https://randomuser.me/api/?results=3');
+      let { results: users } = await response.json();
+      state.data = users;
+      state.error = null;
+    } catch (err) {
+      state.data = null;
+      state.error = err;
+    }
+
+    state.isLoading = false;
+  }
+
+  fetchData();
+
+  return state;
+}
+
+// NOTE: in Polaris, the backing class for the component isn't needed at all.
+// `getUsers` could be invoked directly.