Скачать или смотреть Build The Frontend For Our Shopping App with NextJS, GraphQL | Fully-Typed End-To-End!

In this video, we will be starting to code the frontend for our little shopping App. We use TypeScript as a programming language and NextJS as our frontend framework.
To run queries and mutation against our NestJs GraphQL Backend, we will be using the Apollo Client.
We also make use of Redux Toolkit, so we are able to access the global state from every component, and also to mutate the global state from every component.
Then, we use GraphQL Code Generator, this tool allows us to generate TypeScript types from our Backend GraphQL Schema automatically. The beauty lies in the type safety. Now we can benefit from awesome autocompletion everywhere:
We exactly see what every mutation and query takes in as arguments, and we also see what fields they return. This makes it super fun, since we run into fewer bugs, and if something is not typed correctly, we immediately see the errors at compile time rather than run time.
I hope you enjoy it !
If you have any questions, leave them down below! Thanks :)


Timestamps:
0:00 Creating the ReactJS Layout component
0:35 Creating the ReactJS Navbar Component & installing React Bootstrap
2:58 Creating the ReactJS Footer component
3:32 Making use of the ReactJS Layout component in _app.tsx
4:14 Customizing the ReactJS Navbar component + adding "open cart"- functionality as well as the abilities to display the number of products in the cart
11:40 Creating the ReactJS Cart component
17:51 Creating the ReactJS Product component
20:28 Using the ReactJS Product component to display every product
23:20 Creating the product details page, using static site generation (since we will have always 6 products and product data will not change on requests)

Github source code
frontend: https://github.com/thebeautyofcoding/...
backend: https://github.com/thebeautyofcoding/...

Do you need something from Amazon? If you want to support my work and motivate me to produce more & better programming content, use my Amazon-Affiliate-Link.
It does not cost you any extra money, but I get a little commission, whenever you buy anything via this link. It means the world to me 😊

🌟 Affiliate-Link: https://amzn.to/3QaXk0A