E-commerce - React Hook Form, and validation

As a way to figure out the use of connecting, and managing these horrible sphagetti like react state, props, there are two remarkable libraries to use: React Hook Form and validation.

 

And I recently used this number of times but validation tool, such as Zod, Yup.

Looks like this validation is literally acting like schema concept in nestjs (I know logic must be different but concept is).

 

I believe now is the best time to try this out with a new testing purpose project.

But I also want to try out how far I can develop it, looking closer to serviceable page.

 

How to add React Hook Form with Typescript to React Js Application beginner guide

 

So, what else I can do with this?

1. E-commerce Website: You can create an online store where users can browse through products, add them to their cart, and checkout with a payment gateway integration like Stripe or PayPal.
2. stock share recommendation: This is likely the case to subscribe a specific data based on incoming api data from somewhere, if supporting share data still available (last time, I could not find it. So try again). Or perhaps using mongodb atlas as serverless to make up something similar might be good, but try sticking to frontend this time.

I know this looks scary, but making transaction system must be significant achievement if I make this in success.

Alright, then let me do it next week.

 

Planned:

1. Plan and design your website: This involves creating a wireframe and mockup of your website's layout and design. You can use tools like Figma or Adobe XD to do this.
2. Set up your development environment: This involves installing Node.js and creating a new React project using a tool like Create React App.
3. Create the main page: This is the landing page of your website and should include a header, footer, and a list of products. You can use a library like Material UI or Bootstrap to style your components.
4. Implement routing: This involves using a library like React Router to set up the routes for your website. You'll need to create separate components for the main page, shopping cart page, and transaction page.
5. Create a shopping cart: This involves creating a component that displays the items in the cart, allows the user to add or remove items, and calculates the total price.
6. Implement authentication: This involves creating a login and registration page using a library like Firebase Authentication to handle user authentication.
7. Implement payment integration: This involves integrating a payment gateway like Stripe to handle transactions. You'll need to create a component that allows the user to enter their payment information and submit the transaction.
8. Test and deploy: This involves testing your website for bugs and errors and deploying it to a hosting platform like Heroku or Netlify.