Modern Markup Languages and Their Application

Iteration

You can find up to date version on Gitlab

Forms in React

In this iteration, your task is to create a three-step order placement for an e-shop. Imagine that your customer's cart is already full and they clicked on a button to finish the purchase.

Products in the cart are simulated with a static file `cart.json`, located in `src/static`. You can customize these products as you wish or stick with the prepared ones. Note that the `image` field of each product is an empty string => you can add a valid link to an appropriate image or download images to the `assets` folder and use them locally (but surely add an image to each product to make it look nice).

Tasks:

1) Create a view where you list all the products in the cart. Also, do not forget to show the total price. From this view, you can click on a "next" button to move to the second step.

2) Second view should contain a form to retrieve necessary personal information. Namely, what we want to know about the customer:

full name (required)
delivery address (required)
phone number (required)
email address (optional)
note (optional)

All fields marked as "required" needs to be filled in, so that the customer can proceed to the final step. Also, do not forget to validate user's data.

3) Third screen summarizes the order. You show again - briefly - all the items from the cart and also the information that the user filled in in the previous step.

4) Final step is to show some confirmation to the customer. We need to show them some "success message", so that they can know that everything went well.

That's it! Use your knowledge of react-hook-form, as well as using map to show a list of items and useState hook.

Structure:

src
- assets => place your images and icons here (if you use some)
- components => place your `.tsx` components here
- static => here's the static `.json` data
- styles => for custom `.css` files

Note: if you want to, you can freely use component libraries for form elements (or other) such as for instance, MaterialUI (https://mui.com).

Finally, you can find a visual aid below. Do not take it as a UI design though. It means that we don't expect your solution to look exactly like this. However, create a solution that has a similar visual structure - at least positioning and some minimalistic styling. You don't need to bother with styling details such as colors or shadows. We don't want it to be another css iteration :D Just make your solution visually clear and readable. For that purpose, you can either write your custom css files or use any css framework you like (tailwind, bootstrap...)

If you have any questions, tutors will be available to you on Discord as usually. Good luck!

First step: