Update instructions to allow for PR based review

.github/pull_request_template.md

@@ -2,11 +2,11 @@
 
 You must title your PR like this:
 
-COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
+REGION | COHORT_NAME | FIRST_NAME LAST_NAME | SPRINT NUM | PROJECT NAME
 
 For example,
 
-NW4 | Carol Owen | HTML-CSS-Module | Week1
+LONDON | ITP-May-26 | Jane Doe | Sprint 4 | Project TV Show
 
 Complete the task list below this message.
 If your PR is rejected, check the task list.
@@ -18,7 +18,7 @@ If your PR is rejected, check the task list.
 Self checklist
 
 - [ ] I have committed my files one by one, on purpose, and for a reason
-- [ ] I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK 
+- [ ] I have titled my PR with REGION | COHORT_NAME | FIRST_NAME LAST_NAME | SPRINT NUM | PROJECT NAME
 - [ ] I have tested my changes
 - [ ] My changes follow the [style guide](https://syllabus.codeyourfuture.io/guides/code-style-guide/)
 - [ ] My changes meet the [requirements](./README.md) of this task

readme.md → README.md

@@ -4,7 +4,7 @@ One of the most powerful things a software engineer can do is take some data and
 
 The aim of this project is to take some data someone else has (and exposes over an API), and display it to users. The data we're using for this project is about episodes of TV shows.
 
-This project will take you multiple weeks to complete. As always, we will break down the project into levels we can deliver incrementally. You must finish each milestone before you start working on the next one (but it's ok to know what the future levels are going to be - it may help you design things). Your goal is to complete all of the levels up to and including level 500 during the Data Flows module.
+This project will take you multiple weeks to complete. As always, we will break down the project into levels we can deliver incrementally. You must finish each milestone before you start working on the next one (but it's OK to know what the future levels are going to be - it may help you design things). Your goal is to complete all of the levels up to and including level 500 during the Data Flows module.
 
 ## Goals
 
@@ -85,3 +85,41 @@ After that, you're going to swap codebases with someone else. You should complet
 You are allowed to change anything in your partner's code to make it easier to understand or build on, but they must understand and accept your changes.
 
 Remember, finish each level before you move on to the next. Reach out for help when you're stuck.
+
+
+## Submission
+This task has 6 steps of implementation: level 0 through to level 500.
+You will **not** submit a PR to `CodeYourFuture/Project-TV-Show` until you have finished level 500.
+You will collaborate with another partner and submit pull requests to each other's repos, instructions will be given in level200 for how to do this.
+
+When you have finished level 500, you will submit a pull request back to `CodeYourFuture/Project-TV-Show`.
+As you will have been using different branches during this project, make sure you are submitting a PR for the correct one.
+Then go through the normal PR flow to finally submit.
+
+Each partner in the pair needs to make their own PR to submit.
+If the reviewer asks for changes you should do so individually on your own PRs.
+
+In the description of your pull request, include a link to the deployed page.
+You should also give the name of the partner you worked with.
+
+There is a stretch level 999 if you want to practice more, you should not submit this as part of your PR.
+If you want feedback, ask for this to be done separately.
+
+### Instructions for Reviewers
+
+#### Requirements
+If this is your first review of the TV show project, familiarise yourself with the task requirements.
+For your convenience, you can find a list of all the requirements [here](levels/Reviewers-All-Requirements.md).
+There are no rules about how the site should look, only how it behaves.
+
+#### How to review
+Submission is done via a PR, like usual.
+The trainees have been working in pairs, so it is normal if you see evidence of collaboration.
+Each pair will have submitted their own final version, and these can differ so they should be reviewed independently.
+
+Do not try to deploy the page for your own review.
+Use the URL to the deployed page provided by the trainee.
+If they did not include this in the PR description, ask for them to add this, and don't proceed with the review until they do so.
+
+Check any changes made, and raise issues for problems in implementation or where the requirements are not met.
+Only the trainee submitting that PR should respond and make changes, not their partner.

levels/Reviewers-All-Requirements.md

@@ -0,0 +1,51 @@
+There are the main requirements that a submitted project needs checked by reviewers.
+Trainees should not need to refer to this document, and should focus on completing each level one at a time.
+
+1. It is deployed on GitHub pages or Netlify
+1. The site must fetch data from an API at `TVMaze.com`, never a JSON file in the repo
+	1. The page should state somewhere that the data has (originally) come from [TVMaze.com](https://tvmaze.com/), and link back to that site. 
+	1. During a visit to the website it should never fetch any URL more than once. (Check this using the dev tools network inspector)
+	1. The site should indicate when data is loading.
+	1. If an error occurred loading the data, notify the user on the page with a useful message (Not only in the console)
+1. Listing Shows - When the site starts, present a listing of all shows ("shows listing")
+	1. For each show, display at least:
+		1. name
+		1. image
+		1. summary
+		1. genres
+		1. status
+		1. rating
+		1. runtime
+	1. When a show name is clicked, it should:
+		1. Fetch and present episodes from that show
+		1. Hide the "shows listing" view
+		1. Enable episode search / select (see below)
+	1. Have a navigation link or button to enable the user to return to the "shows listing"
+		1. When this is clicked, the episodes listing should be hidden
+	1. Ensure that the search and selector controls still work correctly when you switch from shows listing to episodes listing and back
+1. Listing Episodes - When a show is selected, all episodes must be on the page shown for that given show, with at least:
+	1. The name of the episode
+	1. The combined season number and episode number into a zero-padded episode code: `S02E07` is correct, `S2E7` is incorrect.
+	1. The medium-sized image for the episode
+	1. The summary text of the episode
+1. Select Shows - a `select` element to your page so the user can choose a show.
+	1. When the user first loads the page, use the fetched list of available shows, and add an entry to the drop-down per show.
+	1. When a user selects a show, display the episodes for that show after fetching the episode list.
+	1. The select must list shows in alphabetical order, case-insensitive.
+1. Select Episodes - a `select` drop-down which lets the user jump quickly to a particular episode:
+	1. The select options are updated whenever a new show is selected, and this select isn't used otherwise
+	1. The select input should list all episodes in the format: "S01E01 - Episode Title"
+	1. When the user makes a selection, they should be taken directly to that episode on the page
+1. Search Shows - When a user types a search term into the search box:
+	1. Only shows whose summary **OR** name contains the search term should be displayed
+	1. The search should be case-**in**sensitive
+	1. The display should update **immediately** after each keystroke changes the input
+	1. Display how many shows match the current search
+	1. If the search box is cleared, **all** shows should be shown
+1. Search Episodes - When a user types a search term into the search box:
+	1. Only episodes whose summary **OR** name contains the search term should be displayed
+	1. The search should be case-**in**sensitive
+	1. The display should update **immediately** after each keystroke changes the input
+	1. Display how many episodes match the current search
+	1. If the search box is cleared, **all** episodes should be shown
+

levels/level-0.md

@@ -5,16 +5,11 @@ The goals of level 0 are to:
 * Deploy it to Netlify.
 * Make sure whenever you push changes your Netlify site will be updated.
 
-> [!WARNING]  
-> Unlike other projects at CYF, you are not going to _fork_ this project, you're going to create a repository from a template repository.
-
-## Create your repository
+## Fork your repository
 
 1. Go to https://github.com/CodeYourFuture/Project-TV-Show
-2. Click on the green button: `Use this template.`
-3. Name your new repo exactly this: `Project-TV-Show`
-4. Do not enable `Include all branches`
-5. Click the final green button `Create repository from template`
+2. Fork the repo to your account
+3. Do not enable `Include all branches`
 
 ## Deploy your site
 
@@ -28,7 +23,7 @@ The goals of level 0 are to:
 2. Open your repository in VS Code
 3. Open the `index.html` page in Chrome
 4. Make sure in Chrome you can see the text "Got 73 episode(s)" in red. If you can't, something has gone wrong.
-5. Edit `index.html` to include your name and github username in the page title instead of "(My Name (My GitHub username))".
+5. Edit `index.html` to include your name and GitHub username in the page title instead of "(My Name (My GitHub username))".
 
 ## Push your changes
 
@@ -39,7 +34,7 @@ The goals of level 0 are to:
 ## Completion criteria
 
 You have completed level 0 when:
-- [ ] You have a GitHub repository called `Project-TV-Show` which is not a fork of this repo.
+- [ ] You have forked the GitHub repository called `Project-TV-Show` into your account.
 - [ ] The `index.html` page on your GitHub project contains your name and GitHub username.
 - [ ] Your project is deployed to Netlify at `cyf-USERNAME-tv.netlify.app`.
 - [ ] Your deployed project has your name and GitHub username in its title.

levels/level-200.md

@@ -2,11 +2,17 @@
 
 For level 200, you are not allowed to work on the same codebase as you worked on for level 100.
 
-Swap repos with a random person in your class. You do not need to coordinate your schedules.
+Swap repos with a random person in your class. You may find it helpful to do this first step together:
 
-Fork their GitHub repository to your GitHub username. You will need to give it a different name (e.g. `Project-TV-Show-Partner`), because you already have a repo named `Project-TV-Show`.
+1. Go to _your_ copy of `Project-TV-Show` and click on the setting
+2. Go to the "collaborators" section
+3. Next "manage access", click "add people"
+4. Type the username your partner
+5. Click the green add button
+6. Visit the URL for your _partner's_ project and accept the invitation to collaborate / check your email for the invite link
+7. Clone your _partner's_ repository to your laptop, you will need to give it a different name, such as `Project-TV-Show-THEIR_NAME`
 
-Clone their repository to your laptop.
+Now, work individually to complete level 200:
 
 Look at their level 100 implementation.
 
@@ -28,7 +34,14 @@ Some example ideas that you may want to think about:
 1. Could any variables or functions have more clear names, to help you understand what they do?
 2. Would [extracting functions](https://code.visualstudio.com/docs/editor/refactoring) help make some code easier to understand?
 
-Make a pull request to your partner's repo with any changes you want to make. Have them review, and when happy, merge your PR.
+Work in a new branch on your _partner's_ repo, making any changes you think are useful.
+Then make a pull request to your _partner's_ main branch (take care not to PR to the CYF main branch yet).
+Have them review, and when happy, merge your PR.
+
+![Git branch diagram for level200](branch-level200.png)
+
+![Select the partner repo in the dropdown when making a PR for level200](pr-level200.png)
+
 
 ## Adding new functionality
 

levels/level-300.md

@@ -2,7 +2,9 @@
 
 For level 300, you should switch back to your original codebase.
 
-You should have merged someone else's level 200 implementation.
+You should have reviewed and merged your partner's level 200 changes through a PR to your own repo.
+
+Remember to pull the latest changes onto your local machine.
 
 Once again, compare their implementation to yours. Think:
 1. How is it different?
@@ -16,7 +18,7 @@ Have a discussion about your answers to these questions. In class, together, giv
 
 Like with level 200, feel free to change anything in your codebase which you think will make it easier to work with, or to build new features.
 
-Have your partner review any changes you have, and make sure they understand them.
+Make a branch and pull request for yourself, and then have your partner review, making sure they understand the changes made.
 
 ## Adding new functionality
 

levels/level-400.md

@@ -2,6 +2,10 @@
 
 For level 400, you should work in the repo of your partner from level 200.
 
+You do not need to re-add yourself as a collaborator.
+
+Remember to change to the right directory on your machine, and pull the latest changes from their main branch.
+
 Before writing any new code, look at their level 300 implementation.
 
 Compare their implementation to yours. Think:
@@ -18,7 +22,7 @@ Have a discussion about your answers to these questions. In class, together you
 
 Feel free to change anything in your codebase which you think will make it easier to work with, or to build new features.
 
-Have your partner review any changes you have, and make sure they understand them.
+Make a branch and pull request for yourself, and then have your partner review, making sure they understand the changes made.
 
 ## Adding new functionality
 
@@ -44,6 +48,8 @@ We want to display any of them.
 > [!NOTE]  
 > Be _careful_ when developing with fetch. By default, every time you make a small change to your app it will be restarted by live server - if you are fetching JSON on page load, the JSON will be downloaded again and again. These frequent HTTP requests may lead to the API permanently banning your IP address from further requests, or "throttling" it for some time. Worse, if they don't, they may cause performance issues for the API service we are using.
 
+Send a pull request to your partner's repo with this functionality. Have them review, and when happy, merge your PR.
+
 #### Screenshot of minimal version
 
 Note: Provided your project meets the above requirements, it can **look** however you want.

levels/level-500.md

@@ -2,7 +2,7 @@
 
 For level 500, you should switch back to your original codebase.
 
-You should have merged someone else's level 400 implementation.
+You should have reviewed and merged someone else's level 400 implementation.
 
 Once again, compare their implementation to yours. Think:
 1. How is it different?
@@ -16,7 +16,7 @@ Have a discussion about your answers to these questions. In class, together you
 
 Feel free to change anything in your codebase which you think will make it easier to work with, or to build new features.
 
-Have your partner review any changes you have, and make sure they understand them.
+Make a branch and pull request for yourself, and then have your partner review, making sure they understand the changes made.
 
 ## Adding new functionality
 
@@ -42,3 +42,9 @@ Note: Provided your project meets the above requirements, it can **look** howeve
 Here is one example layout.
 
 ![Screenshot of a website with a drop-down list with the show "Breaking Bad" selected](example-screenshots/example-level-500.jpg)
+
+## Submission
+
+Once you have finished your level 500 it is ready to submit.
+
+Check the [README.md](../README.md) for this repo for instructions.

levels/level-999.md

@@ -2,6 +2,8 @@
 
 Do not do any of these until you have completed level 500!
 
+Submit your Pull Request for level 500 first, and then work on these in a new branch for level 999.
+
 Here are some ideas for consideration for further work:
 1. Add cast listing to your show listing, http://api.tvmaze.com/shows/1?embed=cast
 2. Add cast listing to your episode listing, http://api.tvmaze.com/shows/1?embed=cast