Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions levels/level-0.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,40 @@

The goals of level 0 are to:
* Create a GitHub repository with the starter scaffolding in-place.
* Deploy it to Netlify.
* Make sure whenever you push changes your Netlify site will be updated.
* Deploy it to **GitHub Pages**.
* Make sure whenever you push changes, your live site will be updated.

## Fork your repository

1. Go to https://github.com/CodeYourFuture/Project-TV-Show
2. Fork the repo to your account
3. Do not enable `Include all branches`

## Deploy your site
## Deployment to GitHub Pages

1. Follow [the instructions to deploy your site to Netlify](https://curriculum.codeyourfuture.io/guides/deployment-netlify/).
2. Configure your site for auto-deployments.
3. Ensure your Netlify site is named exactly `cyf-USERNAME-tv.netlify.app` where `USERNAME` is your GitHub username.
Follow the [CYF GitHub Pages Deployment Guide](https://curriculum.codeyourfuture.io/guides/deploying/ghpages/).

> [!TIP]
> Deployment to **Netlify** is only required upon reaching **Level 500**. Using GitHub Pages until then helps conserve build credits during the development phase.

## Get set up on your laptop

1. Clone your repository
2. Open your repository in VS Code
3. Open the `index.html` page in Chrome
1. Clone your repository.
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))".

## Push your changes

1. Commit your changes to your `index.html` to your git repository (with a clear commit message).
2. Push your changes to your GitHub repository. Make sure they show up on GitHub.
3. Ensure your updated site has been deployed to Netlify.
2. Push your changes to your GitHub repository.
3. Check your GitHub Pages URL to ensure the changes are live.

## Completion criteria

You have completed level 0 when:
- [ ] 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.
- [ ] Your project is successfully deployed to **GitHub Pages**.
- [ ] Your deployed project has your name and GitHub username in its title.
25 changes: 23 additions & 2 deletions levels/level-500.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,49 @@ For level 500, you should switch back to your original codebase.
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?
2. What do you prefer about your implementation?
3. What do you prefer about their implementation?
4. What did you learn that you didn't know before?

Have a discussion about your answers to these questions. In class, together you should give a 3 minute talk about your conclusions.

---

### Technical Workflow

**Best Practice: Use Feature Branches**
To maintain a clean workflow, follow these steps for Level 500:
* Once you have merged Level 400 and are satisfied with the changes, **create a new branch** (e.g., `feature/level-500`) to continue your development.
* After completing all Level 500 requirements on this branch, merge it into your main branch.
* **Important:** Test your changes thoroughly on GitHub Pages before moving to the final deployment.

---

## Refactoring

Feel free to change anything in your codebase which you think will make it easier to work with, or to build new features.

Make a branch and pull request for yourself, and then have your partner review, making sure they understand the changes made.

---

## Adding new functionality

Level 500 is about adding a front-page which lets users select (and find) shows from your shows list.

### Requirements

1. When your app starts, present a listing of all shows ("shows listing")
1. For each show, you must display at least name, image, summary, genres, status, rating, and runtime.
1. For each show, you must display at least the name, image, summary, genres, status, rating, and runtime.
2. When a show name is clicked, your app should:
1. Fetch and present episodes from that show (enabling episode search and selection as before)
2. Hide the "shows listing" view
3. Add a navigation link to enable the user to return to the "shows listing"
1. When this is clicked, the episodes listing should be hidden
4. Provide a free-text show search through show names, genres, and summary texts
5. Ensure that your episode search and episode selector controls still work correctly when you switch from shows listing to episodes listing and back
5. Ensure that your episode search and episode selector controls still work correctly when you switch from shows listing to the episodes listing and back
6. During one user's visit to your website, you should never fetch any URL more than once.

#### Screenshot of minimal version
Expand All @@ -43,6 +58,12 @@ 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)

### Deployment to Netlify

To complete the project, we will move from GitHub Pages to **Netlify** to practice using a more advanced hosting platform.

Follow the [Official CYF Netlify Deployment Guide](https://curriculum.codeyourfuture.io/guides/deployment-netlify/) for your project.

## Submission

Once you have finished your level 500 it is ready to submit.
Expand Down