Skip to content

docs: add Git branching best practices and optimize Netlify deployment instructions #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Grajales-K wants to merge 6 commits into
base: main
Choose a base branch
from
+42 −17
Open

docs: add Git branching best practices and optimize Netlify deployment instructions #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cde06bb
docs: update deployment criteria for TV Show project
Grajales-K Apr 26, 2026
a10e80e
Update Level 500 guidelines and requirements
Grajales-K Apr 26, 2026
d7be000
docs: update Level 0 to use GitHub Pages and move Netlify to Level 500
Grajales-K Apr 28, 2026
559a208
docs: add final Netlify deployment steps and feature branch instructi…
Grajales-K Apr 28, 2026
1bbbffa
fix: remove duplicate info, the link contain all info needed
Grajales-K May 11, 2026
9b08d5d
fix: removed redundant info.
Grajales-K May 11, 2026
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
31 changes: 16 additions & 15 deletions levels/level-0.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

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.

> [!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.
> 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

Expand All @@ -16,30 +16,31 @@ The goals of level 0 are to:
4. Do not enable `Include all branches`
5. Click the final green button `Create repository from template`

## 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))".
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 a GitHub repository called `Project-TV-Show` which is not a fork of this repo.
- [ ] 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.
28 changes: 26 additions & 2 deletions levels/level-500.md
View file
Open in desktop
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 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.

Have your partner review any changes you have, and make sure they understand them.

---

## 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 @@ -42,3 +57,12 @@ 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)


---

### Final Step: Professional 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.