add more detail to README.md and links in tutorial.md #53

README.md

@@ -1,4 +1,23 @@
-# sleep
+<div align="center">
+
+# sleep 💤
+
+![sleep-hero-image](https://user-images.githubusercontent.com/194400/159523182-0db2588a-658d-45ae-8ce3-98c37a47ca72.jpeg)
+
+
+### “_Sleep is the single most effective thing we can do to reset our brain and body health each day._” <br /> ~ Matthew Walker, Why We Sleep: Unlocking the Power of Sleep and Dreams
+
+<br />
+
+[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/dwyl/sleep/Elixir%20CI?label=build&style=flat-square)](https://github.com/dwyl/phoenix-liveview-chat-example/actions/workflows/cy.yml)
+[![codecov test coverage](https://img.shields.io/codecov/c/github/dwyl/sleep/main.svg?style=flat-square)](https://codecov.io/github/dwyl/phoenix-liveview-chat-example?branch=main)
+[![HitCount](http://hits.dwyl.com/dwyl/sleep.svg?style=flat-square&show=unique)](http://hits.dwyl.com/dwyl/sleep)
+
+**Try it**: [**sleepdev.herokuapp.com**](https://sleepdev.herokuapp.com/)
+![wake-sleeping-heroku-app](https://liveview-chat-example.herokuapp.com/ping)
+</div>
+
+<br />
 
 Sleep is the single most important activity in life;
 it restores our tired bodies 
@@ -11,17 +30,19 @@ and reflecting on your sleep quality
 can help you focus on this vital
 aspect of health and longevity.
 
+<br />
 
-# Why?
+# Why? 🤷‍♀️
 
 If you don't get a good night's sleep
 virtually everything about your next day
 will be worse. 
 
-See below for all the areas sleep affects.
+> See below for all the areas sleep affects.
 
+<br />
 
-# What?
+# What? 📱 🛌
 
 This App is the simplest possible sleep tracker
 (_other than using a paper notepad and pen 
@@ -34,33 +55,42 @@ but leaves a lot enhancements out.
 
 If you think of a feature/improvement, _please_
 [**open an issue**!](https://github.com/dwyl/sleep/issues)
-Contributions/ideas are always welcome
+**Contributions/ideas** are **_always_ welcome**
 and we're delighted to extend this
 in response to feedback!
 
-# Who? 
+<br />
+
+# Who? 👤
 
-Everyone sleeps.
+_Everyone_ that sleeps.
 
+<br />
 
-# When?
+# When? 🕗
 
-You can start using this MVP _now_ (_tonight_).
+You can start using the MVP _now_ (_tonight_)!
 
 > If you're reading this past **22:00**,
 go straight to the "***Try it!***" section
 and treat yourself to an _early_ night!
+Bookmark (⭐) the project 
+and come back to it tomorrow
 
+<br />
 
+It's never too late 
+to start focusing on your sleep quality.
 
 
 # How?
 
 
 
-## Try it!
+## _Try_ it! 
 
-Firstly, you can try the App via Heroku:
+Firstly, if you haven't already, 
+you can _try_ the App via Heroku:
 https://sleepdev.herokuapp.com
 
 Try the following actions: 
@@ -73,7 +103,7 @@ Try the following actions:
 + ***Confirm*** your "sleep" session was recorded.
 
 
-## Run it!
+## _Run_ it! 
 
 Now that you've tried it on Heroku,
 if you want to dig deeper,
@@ -100,19 +130,23 @@ Install the dependencies:
 mix deps.get
 ```
 
+_Run_ the app:
 
+```
+mix phx.server
+```
 
 
 
 
-  [![HitCount](http://hits.dwyl.com/dwyl/sleep.svg?style=flat-square)](http://hits.dwyl.com/dwyl/sleep)
-
 
 # Research
 
 We have read several books on sleep (_so you don't have to_).
 
 
+### “_Before you sleep, read something that is exquisite, and worth remembering._” ~ <br /> Desiderius Erasmus
+
 ## Why Focus on Sleep?
 
 If you aren't sleeping enough

lib/app_web/live/app_live.ex

@@ -0,0 +1,11 @@
+defmodule App.AppLive do
+  use AppWeb, :live_view
+
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  def render(assigns) do
+    AppWeb.AppView.render("messages.html", assigns)
+  end
+end

tutorial.md

@@ -1,17 +1,19 @@
 # _Tutorial_
 
-This tutorial takes you through _building_ a sleep tracking App from scratch
-so that you can understand how it works.
+This tutorial takes you through _building_ 
+a sleep tracking App from scratch
+so that you can _understand_ how it works.
 If you get stuck, _please_
 [**ask questions**!](https://github.com/dwyl/sleep/issues)
 
 
 ## Implementation Note
 
 We built this MVP App using using 
-[**`Elixir`**](https://github.com/dwyl/learn-elixir) 
-and 
+[**`Elixir`**](https://github.com/dwyl/learn-elixir),
 [**`Phoenix`**](https://github.com/dwyl/learn-phoenix-framework) 
+and 
+[**`LiveView`**](https://github.com/dwyl/phoenix-liveview-counter-tutorial)
 because it's one of the simplest ways 
 to build web applications
 from first principals.
@@ -37,16 +39,17 @@ might get you different results ...
 https://twitter.com/iamdevloper/status/787969734918668289
 -->
 
-## Create New Phoenix App
+## 1. Create a New Phoenix App
 
 ```sh
-mix phx.new app --no-mailer --no-dashboard
+mix phx.new app --live --no-mailer --no-dashboard
 ```
 
 This creates a new Phoenix Web App named **`app`**
-without the mailer (email) or live dashboard
-but with a database and `LiveView` support.
-
+with everything setup for `LiveView` support
+but  without the mailer (email) or live dashboard
+cause we won't be needing either of those features
+and we don't want unused/untested code.
 
 When you see the prompt asking you 
 to fetch and install the dependencies:
@@ -117,7 +120,7 @@ defmodule ChatWeb.Router do
 ```
 
 Having `Chat` or `ChatWeb` namespace can be useful 
-if you're working on multiple Phoenix apps simultaneously 
+if you're working on multiple Phoenix apps _simultaneously_
 and need to context switch. 
 That's why we use the `Auth` namespace 
 in our Authentication App:
@@ -133,7 +136,10 @@ defmodule AuthWeb.AuthController do
 
 The reasons why _this_ app is namespaced **`App`** are: <br />
 **a)** It's less to type and still provides clarity/context.<br />
-**b)** <br />
+**b)** The word "sleep" has a special significance in Erlang/Elixir
+see: [`sleep/1`](https://www.erlang.org/doc/man/timer.html#sleep-1)
+so we don't want our IDE constantly suggesting that we 
+suspend the process ... <br />
 **c)** If we _succeed_ in building a sleep-tracking app, 
 we will re-use some of the code in our "main" App. 
 [github.com/dwyl/app](https://github.com/dwyl/app)
@@ -142,7 +148,9 @@ This means it's easy to
 without needing to waste time with "find & replace".
 <br />
 
-If you prefer to namespace your app differently, go for it!s
+If you prefer to namespace your app differently, go for it!
+
+<br />
 
 ## Show Me the Code! 👩‍💻
 
@@ -155,14 +163,18 @@ we need to create a new `live` directory
 with the following path:
 `lib/app_web/live`
 
+e.g: `mkdir lib/app_web/live`
+
 ### Create `app_live.ex` File
 
 Inside that newly created `/live` directory,
 create a new file called 
 `app_live.ex` 
-with the path:
+so the file path is:
 `lib/app_web/live/app_live.ex`
 
+_Type_ the following code in the file:
+
 ```elixir
 defmodule App.AppLive do
   use AppWeb, :live_view
@@ -178,8 +190,14 @@ end
 ```
 
 
+
 ### Update `router.ex`
 
+
 and navigate to the 
 `lib/app_web/router.ex` file.
 
+
+
+
+[![HitCount](http://hits.dwyl.com/dwyl/sleep-tutorial.svg?style=flat-square)](http://hits.dwyl.com/dwyl/sleep)