Group Project: Blog

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.8.0", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Return Home Report An Issue

Group Project: Blog

You’re going to build a Blog application with a group of 3-4 others to learn more about Phoenix and Ecto.

As we move through the Phoenix and Web Development section, you’ll gradually add more features to your blog.

Overview

As you progress through the course, you will be prompted to complete additional features for your blog. We’ve going to give you a brief overview of the overall domain and the features you’re going to build.

Your blog project should have three main domain concepts. Users, Posts, Comments and Tags.

• Users have many Posts
• Posts have many comments
• Posts have a many-to-many relationship with Tags.

flowchart
Users --have many--> Posts
Posts --have many--> Comments
Posts <--many to many--> Tags

Users will be able to signup and manage their own blog posts that are associated with certain tags such as tech and education. They will also be able to view other user’s blogs and comment on them.

Project Lead

One person in your group will be the project lead. The project lead will be responsible for reviewing/merging PRs and ensuring that the project is tested and runs smoothly.

Initialize Group Project

Have the project lead use phx.new to create a new blog project.

$ mix phx.new blog

Initialize the project with git.

$ git init

Create a GitHub Repository and invite everyone as contributors to the project.

Create Your README

Edit the README.md file initialized in your Phoenix project.

Include alteast the following information:

• Project Name
• Project Summary
• Technologies Used (Phoenix, Elixir)
• Contributors

You may update your README as the project expands

Protect Main

Project your main branch so that no one can push directly to main without a PR review.

This is a common safety mechanism used on most projects to ensure no one can accidentally write to the main branch without review by another member of the project.

Install Tailwind

Follow the Phoenix + Tailwind Installation Guide to add tailwind to your project.

Your team will be responsible for styling your project as you develop features. There will be no strict requirements for styling, and you are open to style your project as you like.

Requirements

Here is a brief summary of the project requirements:

• As a user, I can create, update, and delete my own posts.
• As a user, I can search for and view other users posts that are published and set to visible.
• As a user, I can visit the page for each post to see the post’s information and content.
• As a user, I can comment and see comments on other users posts.
• As a user, I can associate tags with a post.

You will be provided further requirements and instruction in the following upcoming exercises:

• Blog: Posts
• Blog: Search
• Blog: Visibility Migration
• Blog: Comments
• Blog: Seeding
• Blog: Comment Form
• Blog: Authentication
• Blog: Tags
• Blog: Blog Content
• Project Deployment

You will complete the above exercises as we progress through the course. While you should still complete exercises in order, your group is welcome to progress ahead of the established pace of the course. You may also go beyond the requirements if you would like. There will also be bonus features as seen in each individual exercise.

Mark As Completed

file_name = Path.basename(Regex.replace(~r/#.+/, __ENV__.file, ""), ".livemd")

save_name =
  case Path.basename(__DIR__) do
    "reading" -> "group_project_blog_reading"
    "exercises" -> "group_project_blog_exercise"
  end

progress_path = __DIR__ <> "/../progress.json"
existing_progress = File.read!(progress_path) |> Jason.decode!()

default = Map.get(existing_progress, save_name, false)

form =
  Kino.Control.form(
    [
      completed: input = Kino.Input.checkbox("Mark As Completed", default: default)
    ],
    report_changes: true
  )

Task.async(fn ->
  for %{data: %{completed: completed}} <- Kino.Control.stream(form) do
    File.write!(
      progress_path,
      Jason.encode!(Map.put(existing_progress, save_name, completed), pretty: true)
    )
  end
end)

form

Commit Your Progress

Run the following in your command line from the curriculum folder to track and save your progress in a Git commit. Ensure that you do not already have undesired or unrelated changes by running git status or by checking the source control tab in Visual Studio Code.

$ git checkout -b group-project-blog-exercise
$ git add .
$ git commit -m "finish group project blog exercise"
$ git push origin group-project-blog-exercise

Create a pull request from your group-project-blog-exercise branch to your solutions branch. Please do not create a pull request to the DockYard Academy repository as this will spam our PR tracker.

DockYard Academy Students Only:

Notify your teacher by including @BrooklinJazz in your PR description to get feedback. You (or your teacher) may merge your PR into your solutions branch after review.

If you are interested in joining the next academy cohort, sign up here to receive more news when it is available.

Up Next