3^nd Homework

The goal of this homework is to create settings page.

There are 3 steps:

• [ ] Create settings page
• [ ] Create a profile form with Chakra UI based on provided design
• [ ] Create a notifications form with Chakra UI based on provided design
• [ ] Forms should be based on React Hook Form and use Zod validation
• [ ] Send a link to a working settings page

Deadline: Monday 06/10/2025 - 23:59:59

Step 0: Connect to the Server

• Connect to the remote server using your editor of choice
• Make sure you base your work on the branch of the git repository:

To get the latest state of Quacker in your folder, open your terminal and run the following commands on the server:

This will fetch the newly created branch from the GitLab origin and reset your code to the final state of the 2nd practical class.

If you have trouble connecting, see "Hello, Server!" guide or contact your teacher.

Step 1: Design settings page

Create a settings page based on provided screenshots. Try to be as close as possible. Use Chakra UI, for more info see here.

Desktop:

Step 2: Connect fields to React Hook Form and use Zod validation

All fields should be connected to React Hook Form library.

There should be validation using Zod on all fields.

• all fields are required (non empty string, etc.)
• email is valid email addres
• "Agree to Terms and Conditions" must be set to

When save button is pressed:

• if form is invalid it should display error messages
• if form is valid it should use to show form values

Step 3: Send a Link to a Working Settings Page

Once you are finished:

• send a link to a working settings page
  https://dev-frontend--vse.handson.pro/practical/03
• using MS Teams to: Matyas Mihalka (@mihm06)

Deadline: Monday 06/10/2025 - 23:59:59

Happy Coding!