=> Creating a React website for a “Book Store”
The purpose of this task
- understand how useContext can solve the problem of global state in React applications
- deepen the technical skills of implementing useContext in a React application
What the “customer” wants for Christmas 🎄:
-
You will create a website that allows a user to
- to enter his name on a page
- select items to purchase on a second page
- to be able to view and edit the items in the shopping cart on a third page
-
The data is managed centrally by useContext.
-
You can fetch the books from this address:
-
Note that the images here are based on the idCode of the book, e.g. for "bashCookbook"
Rule for the task:
-
uses the hooks learned so far as needed (useContext MUST be used)
‼️ ‼️ ‼️ => This is what your PAGE should look like afterwards <=‼️ ‼️ ‼️
BONUS CHALLENGES:
- Make the name entry process more professional and improve user experience
- Display of the waiting time when the page loads slowly (waiting spinners)
- Give the user the ability to not only add books to cart but also remove books from cart
- For books of which more than one copy is ordered, display them together in the shopping cart, e.g. "2x titles"
- When you reload the page, the shopping cart should still be there with the previously selected books.
- Instead of a "Dark Mode", add a "Christmas Mode" 🎅🎄🤶🎄🧑🎄
===============================================================
You can either implement the project alone or code in pair programming (2 people)/mob programming (>2 people): --> What is Pair Programming/ Mob Programming??? 🖥️
- A developer (driver/pilot) takes control, writes the code and shares his screen via Zoom 👏
- The remaining developers (navigators) simultaneously check the correctness of the code and develop possible solutions 👀
- There is almost no division of tasks as all developers have equal rights 👥
- The roles are changed continuously 🔄
- 🤝 So everyone looks at the same code and participates equally in the conversation via Zoom. 💬
===============================================================