From 5c3270eac5cb21e3d49c872fcc40081743220a70 Mon Sep 17 00:00:00 2001
From: Conrad Taylor <conradwt@gmail.com>
Date: Wed, 7 Sep 2022 15:44:57 -0700
Subject: [PATCH] Add Codespaces badge.

---
 README.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/README.md b/README.md
index ebe29ab..5037c64 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,64 @@ Note: This tutorial was updated on macOS 12.5.1.
 - If you **have a feature request**, open an issue.
 - If you **want to contribute**, submit a pull request.
 
+## Codespaces Installation
+
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=140485080)
+
+1.  install and compile dependencies
+
+    ```zsh
+    mix do deps.get, deps.compile
+    ```
+
+2.  create, migrate, and seed the database
+
+    ```zsh
+    mix ecto.setup
+    ```
+
+3.  start the server
+
+    ```zsh
+    mix phx.server
+    ```
+
+4.  navigate to our application within the browser
+
+    ```zsh
+    open http://localhost:4000/graphiql
+    ```
+    
+    Note:  One must update their `Editor preference` to use `Visual Studio Code` located [here](https://github.com/settings/codespaces).
+
+5.  enter the below GraphQL query on the left side of the browser window
+
+    ```graphql
+    {
+      person(id: 1) {
+        firstName
+        lastName
+        username
+        email
+        friends {
+          firstName
+          lastName
+          username
+          email
+        }
+      }
+    }
+    ```
+
+6.  run the GraphQL query
+
+    ```text
+    Control + Enter
+    ```
+
+    Note: The GraphQL query is responding with same response but different shape
+    within the GraphiQL browser because Elixir Maps perform no ordering on insertion.
+
 ## Quick Installation
 
 1.  clone this repository