See also, this assignment on Canvas:

Introducting Today’s Team Activity (2:00-2:30)

Today’s activity involves populating a Kanban board for team01.

Here are links to those kanban boards:

You will also need to consult this Kanban board, which is an example for you to follow:

• team01 example kanban board

Step 0: Big Picture

Here’s the big picture for team01:

• The team01 starter code has examples of CRUD operations for Restaurants with name/description
• You are going to add three more items to the Navbar for three things of your own choosing, each of which has at least three data fields. These could be anything you might want to be able to keep track of in a web application.
• For example, you might choose: Hotels, Movies, Books.
• You’ll initially divide into three pairs, A, B and C, and then divide up the work
  • For example, suppose Chris and Jin are on pair A, and they are working on Hotels
  • They probably should initially pair on the hotelFixtures.js and hotelUtilities.js
  • Then, Chris might initially work on the HotelForm, while Jin works on the HotelTable.
  • Then Chris might add the HotelCreate and HotelEdit pages, while Jin works on the HotelIndex and HotelDetails pages
  • However, that’s just one way to divide up the work. Another is that Chris and Jin could “pair program” on all of it.
  • How you divide up the work is up to you.
  • And: ultimately, the entire team is responsible for the entire effort, so help one another out as much as you can.
• Full instructions for team01 are coming soon, but as an overview: you’ll be finished with team01 when you have:
  • A working web app for all three of the new items you added (plus the old stuff for Towns and Restaurants still works)
  • There is 100% test coverage both from npm run coverage and npx stryker run
  • npx eslint --fix . reports no problems
  • Everything is “green on CI”, i.e. GitHub Actions gives you a green check, not a red X.
  • There are storybook stories published on the companion documentation site (more explanation on this later)
  • The README for your repo has a link to the companion documentation site.
  • You’ve turned in a link to your team01 repo on Canvas.

Today’s work is to set up a Kanban board for you to track your efforts on the team01 project.

Step 1: Make sure every team member has access to the board

Each team member should make sure they can bring up the team’s Kanban board.

You can do this by making a post on your team’s slack channel.

To reduce noise in the channel:

• The first person should post “I can access the team kanban board at” (then post the link).
• Everyone else can add a reply to that thread with “me too” or “I’m having trouble”.

Step 2: One member of the team: add the column for “In Review”

If you look at your team’s board, you’ll see that you have three columns; this is the default for a Kanban board in GitHub Projects.

Our practice, however, is to have another column between “In Progress” and “Done” called “In Review”.

See, for example, the example board here:

• team01 example kanban board

Choose one member of the team to create that column with the name “In Review”, the description “This is ready for code review” and the color “Pink”.

Step 3: Divide the team into pairs

Divide the six people on your team into pairs, and post on your team’s slack channel how you are dividing up the work.

• Pair A
• Pair B
• Pair C

Then each of the three pairs will decide on some kind of object that you can use as the basis of building CRUD operations similar to the ones in the STARTER-team01 code for Restaurants.

Make a post to the slack channel in which you:

• Identify who is in your pair
• State what you are going to build, and list what fields it will have.
  • Example: Hotel: name, address, description

Step 4: Add tasks to your Kanban board

In GitHub projects, you can add two types of things to the columns on your Kanban board:

• Drafts: Drafts have very short text descriptions and appear only on the Kanban board.
• Issues: Issues are associated with a particular repo, and can have longer descriptions, and lots of additional data

We’ll start out with just drafts, and convert these to full issues in a later step.

Here’s what it looks like to add draft issues to the TODO column:

Divide into your pairs, and create the following cards in your TODO column for your item. For sake of this example, I’ll use “Hotel”, but you should substitute your own item.

Add the following cards:

• Add hotelFixtures.js (example objects for testing)
• Add hotelUtilities.js (CRUD for Browser Local Storage)
• Add HotelForm component (form for create/edit)
• Add HotelTable component (table for index/details)
• Add HotelIndexPage (including link to it in navbar)
• Add HotelDetailsPage
• Add HotelCreatePage
• Add HotelEditPage

When you are done, there should be 24 cards in all.

Step 5: Convert two drafts per pair to a full issue

Here’s what it looks like to convert a draft to a full issue.

As you can see, part of this process requires you to select a repository. Select your team’s team01 repo.

Now, each pair should convert thes drafts to full issues:

• Add hotelFixtures.js (example objects for testing)
• Add hotelUtilities.js (CRUD for Browser Local Storage)

Once you do that, you should see the issue on the issues tab on your team01 repo, like this:

When the full team is done, there should be six issues on your team01 repo.

Step 6: In your pair, assign issues to team members

Now assign the two issues to the team members; this is where you decide whether to work together as a pair (true pair programming), or divide and conquer.

Here’s what it looks like if you are doing true pairing (in this case, assume the pair is Avishek and Andrew):

Here’s what it looks like if you are dividing up the work:

Either way, when you are done, each member of the pair is assigned to at least one issue.

Step 7: Drag the issue to which you are assigned into the In Progress column

• If you are working as a pair on a single issue:
  • Just one of you: drag that issue and only that issue into the In Progress column
• If you are working as a pair on two separate issues:
  • Each of you separately: drag the issue you were assigned to into the In Progress column.

The idea is that from now until your team is finished with team01, ideally, each team member is assigned to exactly one issue in the in-progress column (no more, and no less), until the team is done.

Completing all of the issues in your TODO column can be considered a single sprint.

Towards the end of a sprint, perhaps a few team members may be finished with issues; at that point they should be helping to do code reviews.

Step 8: Reviewing your work as a team

When each pair has completed the steps above, you are ready to check in and make sure your team has finished the work for p06. Here’s the checklist:

• Pairs documented in slack, with who’s one which pair, what they are adding, and what fields will be on their forms.
• Kanban board has an In Review column between In Progress and Done, with specified title/description/color
• 24 draft issues on the Kanban board under Todo, with 6 of those converted to full issues
• Each team member assigned to exactly one issue in In Progress (whether as an individual or as a pair)

When that’s done, you’ll submit the link to your Kanban board for the P06 assignment on Canvas, and you are done!

What then?

You have a few choices:

• Work/Get help on jpa02 if needed
• Start setting up your team01 repo by pulling from starter code here: <>
• Start work on your in progress issue:
  • You should create a feature branch
  • You may want to discuss a branch naming convention with your team.
• Or, take off early

---