mix phx.new live_view_todo --live

.formatter.exs

@@ -0,0 +1,5 @@
+[
+  import_deps: [:ecto, :phoenix],
+  inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
+  subdirectories: ["priv/*/migrations"]
+]

.gitignore

@@ -1,16 +1,34 @@
-# App artifacts
-/_build
-/db
-/deps
-/*.ez
+# The directory Mix will write compiled artifacts to.
+/_build/
 
-# Generated on crash by the VM
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where 3rd-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
 erl_crash.dump
 
-# The config/prod.secret.exs file by default contains sensitive
-# data and you should not commit it into version control.
-#
-# Alternatively, you may comment the line below and commit the
-# secrets file as long as you replace its contents by environment
-# variables.
-/config/prod.secret.exs
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Ignore package tarball (built via "mix hex.build").
+live_view_todo-*.tar
+
+# If NPM crashes, it generates a log, let's ignore it too.
+npm-debug.log
+
+# The directory NPM downloads your dependencies sources to.
+/assets/node_modules/
+
+# Since we are building assets from assets/,
+# we ignore priv/static. You may want to comment
+# this depending on your deployment strategy.
+/priv/static/

README.md

@@ -52,3 +52,148 @@ and
 https://hexdocs.pm/phoenix/installation.html#phoenix
 
 ## How? 💻
+
+> 💡 You can also try the version deployed to Heroku:
+> https://live-view-counter.herokuapp.com
+
+<br />
+
+### Step 0: Run the _Finished_ Todo App on your `localhost` 🏃‍
+
+Before you attempt to _build_ the todo list app,
+we suggest that you clone and _run_
+the complete app on your `localhost`. <br />
+That way you _know_ it's working
+without much effort/time expended.
+
+#### Clone the Repository
+
+On your `localhost`,
+run the following command to clone the repo
+and change into the directory:
+
+```sh
+git clone https://github.com/dwyl/phoenix-liveview-todo-list-tutorial.git
+cd phoenix-liveview-todo-list-tutorial
+```
+
+#### _Download_ the Dependencies
+
+Install the dependencies by running the command:
+
+```sh
+mix setup
+```
+
+It will take a few seconds to download the dependencies
+depending on the speed of your internet connection;
+be
+[patient](https://user-images.githubusercontent.com/194400/76169853-58139380-6174-11ea-8e03-4011815758d0.png).
+😉
+
+#### _Run_ the App
+
+Start the Phoenix server by running the command:
+
+```sh
+mix phx.server
+```
+
+Now you can visit
+[`localhost:4000`](http://localhost:4000)
+in your web browser.
+
+> 💡 Open a _second_ browser window (_e.g. incognito mode_),
+> you will see the the counter updating in both places like magic!
+
+You should expect to see:
+
+<!--
+# Todo: insert screenshot of realtime todo list here
+
+![phoenix-liveview-todo]()
+-->
+
+With the _finished_ version of the App running on your machine
+and a clear picture of where we are headed, it's time to _build_ it!
+
+<br />
+
+### Step 1: Create the App 🆕
+
+In your terminal run the following `mix` command
+to generate the new Phoenix app:
+
+```sh
+mix phx.new live_view_todo --live
+```
+
+The `--live` flag tells the `phx.new`
+(new `Phoenix` App) generator command
+that we are creating a `LiveView` application.
+It will setup the dependencies and boilerplate
+for us to get going as fast as possible.
+
+When you see the following prompt in your terminal:
+
+```sh
+Fetch and install dependencies? [Yn]
+```
+
+Type <kbd>Y</kbd> followed by the <kbd>Enter</kbd> key.
+That will download all the necessary dependencies.
+
+#### Checkpoint 1: _Run_ the _Tests_!
+
+In your terminal, go into the newly created app folder using:
+
+```sh
+cd live_view_todo
+```
+
+And then run the following `mix` command:
+
+```sh
+mix test
+```
+
+You should see:
+
+```
+Generated phoenix app
+==> live_view_counter
+Compiling 14 files (.ex)
+Generated live_view_counter app
+...
+
+Finished in 0.02 seconds
+3 tests, 0 failures
+```
+
+Tests all pass.
+This is _expected_ with a new app.
+It's a good way to confirm everything is working.
+
+<br />
+
+#### Checkpoint 1b: _Run_ the New Phoenix App!
+
+Run the server by executing this command:
+
+```sh
+mix phx.server
+```
+
+Visit
+[`localhost:4000`](http://localhost:4000)
+in your web browser.
+
+![welcome-to-phoenix-liveview](https://user-images.githubusercontent.com/194400/95674046-99a26c00-0ba5-11eb-94e8-eec6840035a0.png)
+
+😱 If you are having problems with the server hanging, try
+[this](#problems-with-dependencies)
+
+> 🏁 Snapshot of code at the end of Step 1:
+> [`#c48488`](https://github.com/dwyl/phoenix-liveview-counter-tutorial/tree/c4848853beb2df3327663270d1018a128bbcf0fa)
+
+<br />

assets/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ]
+}

assets/css/app.scss

@@ -0,0 +1,91 @@
+/* This file is for your main application css. */
+@import "./phoenix.css";
+@import "../node_modules/nprogress/nprogress.css";
+
+/* LiveView specific classes for your customizations */
+.phx-no-feedback.invalid-feedback,
+.phx-no-feedback .invalid-feedback {
+  display: none;
+}
+
+.phx-click-loading {
+  opacity: 0.5;
+  transition: opacity 1s ease-out;
+}
+
+.phx-disconnected{
+  cursor: wait;
+}
+.phx-disconnected *{
+  pointer-events: none;
+}
+
+.phx-modal {
+  opacity: 1!important;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.phx-modal-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+.phx-modal-close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.phx-modal-close:hover,
+.phx-modal-close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* Alerts and form errors */
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.alert-info {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+.alert-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+.alert p {
+  margin-bottom: 0;
+}
+.alert:empty {
+  display: none;
+}
+.invalid-feedback {
+  color: #a94442;
+  display: block;
+  margin: -1rem 0 2rem;
+}