This is a hotel website you will build with your team. First form your team, then start the project by forking the repo.

1. Form your team

1. Split into teams of 3 or 4. Use a random team generator.
2. Get together with your team during class day and agree on your way of working for this project.

2. Agree your Way of working

We recommend:

• Create a Slack channel for your team. Use this channel and your class time for communication about the project management and the product development.
• Each team member must understand the requirements of a ticket before moving it from the Backlog to Ready. Make use of your class time to discuss the tickets as a team.
• Decide whether you are going to work on tickets individually or as a pair. You may work faster on your own but may learn more as a pair.
• Each feature must be reviewed by another member of your team . Set a branch protection rule on your main branch to enforce this.
• Each team member can pick up a new ticket only when their old ticket is in review. Work on one thing at a time.

3. Set up the repo

1. One person should fork this repo to their own GitHub account.
2. That person should add the other team members as collaborators to the repo.
3. Now someone else should make a copy of the example planner and link it to your project repo.
4. All the tickets for your project are created as issues in this repo. Batch clone the tickets into your project planner.

On your branch protection settings:

Require a pull request before merging. When this is enabled, all commits must be made to a non-protected branch and submitted via a pull request before they can be merged into a branch that matches this rule.

Require approvals: 1. When this is enabled, pull requests targeting a matching branch require a number of approvals and no changes requested before they can be merged.

Git workflow

You will use a feature branch workflow for this project. This means that you will create a new branch for each ticket you work on. When you are done with the ticket, you will open a PR and your team will review your work. Once approved, you will merge the branch into main.

gitGraph
    commit "main"
    branch feature/AppHeader
    commit
    commit
    checkout main
    merge feature/AppHeader
    branch feature/SearchButton
    commit
    commit
    checkout main
    branch feature/Card
    commit
    commit
    commit
    checkout main
    merge feature/SearchButton
    merge feature/Card

You should be familiar with this workflow by now. Let’s put it to the test by working on many different components at the same time, in a real Agile team.

Components

Make your components in the src/components folder. Organize your components into sub-folders and keep everything tidy. There are examples given for you to follow.

Styling

There’s a starter stylesheet set up. It uses sass, which is a way of writing complicated CSS more easily. You can write plain CSS in any .scss file, so you don’t have to learn SASS to do this project. (But you might want to learn it anyway, because it’s awesome.)

If you don’t like these styles, you can replace them with your own. You can also use pre-made stylesheets from Tailwind, Bootstrap, or any other CSS framework you like. But focus on the functionality first, and worry about the styling later.

Tests

The test runner is called Vitest and it’s set up to run tests in the src folder. You can add more tests in the src folder and they will be picked up by Vitest, so long as you name them with the .test.jsx extension. Make sure to use the .jsx extension, not .js.

You can write tests using the same Jest syntax you have already learned in these files.

The React Testing Library is also available in the tests, and the docs are a great resource for learning how to use it.

You will need to write a test for each component you build. Write the test first, based on the requirements given in the ticket. Then write the component to make the test pass.

There are some examples given to help you. Come to class with questions about how to write tests.

Deploying your site

Your site must be deployed and the link shared. You can use Netlify.
If you would like to explore other deployment options, make a ticket on your board and plan it out.