Merge pull request DockYard-Academy#127 from DockYard-Academy/phoenix…

…-and-ecto

Phoenix and ecto

exercises/portfolio_blog_page.livemd

@@ -0,0 +1,72 @@
+# Portfolio: Blog Page
+
+```elixir
+Mix.install([
+  {:kino, github: "livebook-dev/kino", override: true},
+  {:kino_lab, "~> 0.1.0-dev", github: "jonatanklosko/kino_lab"},
+  {:vega_lite, "~> 0.1.4"},
+  {:kino_vega_lite, "~> 0.1.1"},
+  {:benchee, "~> 0.1"},
+  {:ecto, "~> 3.7"},
+  {:math, "~> 0.7.0"},
+  {:faker, "~> 0.17.0"},
+  {:utils, path: "utils"}
+])
+```
+
+## Navigation
+
+[Return Home](../start.livemd)<span style="padding: 0 30px"></span>
+[Report An Issue](https://github.com/DockYard-Academy/beta_curriculum/issues/new)
+
+## Blog Page
+
+You're going to add a blog to your existing portfolio project.
+
+Blog posts should have a title, subtitle, and content.
+
+```mermaid
+classDiagram
+  class Post {
+    title: :string
+    subtitle: :string
+    content: :text
+  }
+```
+
+This is a good example where your context and schema names may not align. For example, you may have a `Blogs` context, with a `Post` schema.
+Or you could use a `Blogs` context with a `Blog` schema, that is up to you.
+
+<!-- livebook:{"break_markdown":true} -->
+
+### Blog Requirements
+
+Ensure you:
+
+* Add the full matrix of HTTP actions under the `"/blog"` route using either `resources/4` or individual `get/4`, `post/4` and `put/4` macros.
+* Create a controller with the corresponding `:index`, `:edit`, `:show`, `:new`, `:create`, `:update`, and `:delete` actions.
+* Create a view and templates for the `:index`
+* Create a context.
+* Create a schema for the blog post with at least the `:title`, `:subtitle`, and `:content` fields.
+* Create a migration to create a blog posts table.
+
+Also ensure that you do not break any existing functionality. You should still
+be able to visit the home page on http://localhost:4000.
+
+Outside of these requirements you may stretch your creativity. Consider spending any additional time you may have on improving the styles for the project.
+
+You may find the `mix phx.gen.html` command useful for this exercise.
+
+<!-- livebook:{"break_markdown":true} -->
+
+### Navigation
+
+Add navigation links on both the blog and home page.
+
+Consider adding this navigation in `lib/portfolio_web/templates/layout/root.html.heex` to have the same navigation on every page and avoid duplicating code.
+
+The navigation should include a link to the `"/"` route to view the home page, and the `"/blog"` route to view the blog page. Consider using [Path Helpers](https://hexdocs.pm/phoenix/routing.html#path-helpers) instead of static routes.
+
+<!-- livebook:{"break_markdown":true} -->
+
+![](images/home_page_with_navigation.png)

exercises/blog_home_page.livemd → exercises/portfolio_home_page.livemd

@@ -1,4 +1,4 @@
-# Blog: Home Page
+# Portfolio: Home Page
 
 ```elixir
 Mix.install([
@@ -21,15 +21,23 @@ Mix.install([
 
 ## Home Page
 
-You're going to build a phoenix blog application.
+You're going to create a portfolio project that you will continue to expand throughout the course.
 
-Create a new phoenix project.
+In this exercise, you'll focus on setting up the project and creating a home page.
+
+First, create a new phoenix project.
 
 ```
-$ mix phx.new blog
+$ mix phx.new portfolio
 ```
 
-In this exercise, you'll focus on setting up the project and creating a home page.
+Start your phoenix server from the project folder.
+
+```
+$ mix phx.server
+```
+
+Then build a home page under the `"/"` route.
 
 You may take inspiration from the previous [Home Page](./home_page.livemd) exercise.
 
@@ -43,8 +51,7 @@ The home page should be visible when you visit http://localhost:4000/
 
 Try to match the document above as best you can, however you may exercise your creativity and do not have to follow the example so long as you have:
 
-* navigation with a link to your github. Ideally use a `<nav>` tag for navigation.
-* a heading saying your name.
-* a paragraph with bold and italic text that describes who you are and what you do.
+* Navigation with a link to your github. Ideally use a `<nav>` tag for navigation.
+* A heading saying your name.
+* A paragraph that describes who you are and what you do.
 * An image (it can be any image if you would prefer to not use a personal photo)
-* an ordered or unordered list with 3+ list items.