MERN AMAZONA

STEP BY STEP INSTRUCTIONS

1. Introduction

2. Install tools

3. Create react-app

4. Create git repository

5. Add page routing

   1. npm i react-router-dom
   2. create route for home screen
   3. create router for product screen

6. Create Node.JS Server

   1. run npm init in root folder
   2. Update package.json set type: module
   3. Add .js to imports
   4. npm install express
   5. create server.js
   6. add start command as node backend/server.js
   7. require express
   8. create route for / return backend is ready.
   9. move products.js from frontend to backend
   10. create route for /api/products
   11. return products
   12. run npm start

7. Fetch Products From Backend

   1. set proxy in package.json
   2. npm install axios
   3. use state hook
   4. use effect hook
   5. use reducer hook

8. Manage State By Reducer Hook

   1. define reducer
   2. update fetch data
   3. get state from usReducer

9. Add bootstrap UI Framework

10. npm install react-bootstrap bootstrap

11. update App.js

12. Create Product and Rating Component

13. create Rating component

14. Create Product component

15. Use Rating component in Product component

16. Create Product Details Screen

17. fetch product from backend

18. create 3 columns for image, info and action

19. Create Loading and Message Component

20. create loading component

21. use spinner component

22. craete message component

23. create utils.js to define getError fuction

24. Create React Context For Add Item To Cart

25. Create React Context

26. define reducer

27. create store provider

28. implement add to cart button click handler

29. Complete Add To Cart

30. check exist item in the cart

31. check count in stock in backend

32. Create Cart Screen

33. create 2 columns

34. display items list

35. create action column

36. Complete Cart Screen

37. click handler for inc/dec item

38. click handler for remove item

39. click handler for checkout

40. Create Signin Screen

41. create sign in form

42. add email and password

43. add signin button

44. Connect To MongoDB Database

45. create atlas monogodb database

46. install local mongodb database

47. npm install mongoose

48. connect to mongodb database

49. Seed Sample Products

50. create Product model

51. create seed route

52. use route in server.js

53. seed sample product

54. Seed Sample Users

55. create user model

56. seed sample users

57. Create Signin Backend API

58. create signin api

59. npm install jsonwebtoken

60. define generateToken

61. Complete Signin Screen

62. handle submit action

63. save token in store and local storage

64. show user name in header

65. Create Shipping Screen

66. create form inputs

67. handle save shipping address

68. add checkout wizard bar

69. Create Sign Up Screen

70. create input forms

71. handle submit

72. create backend api

73. Implement Select Payment Method Screen

74. create input forms

75. handle submit

76. Create Place Order Screen

77. show cart items, payment and address

78. handle place order action

79. calculate order summary

80. Implement Place Order Action

81. handle place order action

82. create order create api

83. Create Order Screen

84. create backend api for order/:id

85. fetch order api in frontend

86. show order information in 2 cloumns

87. Pay Order By PayPal

88. generate paypal client id

89. create api to return client id

90. install react-paypal-js

91. use PayPalScriptProvider in index.js

92. use usePayPalScriptReducer in Order Screen

93. implement loadPaypalScript function

94. render paypal button

95. implement onApprove payment function

96. create pay order api in backend

97. Display Order History

98. create order screen

99. create order history api

100. use api in the frontend

101. Create Profile Screen

102. get user info from context

103. show user information

104. create user update api

105. update user info

106. Add Sidebar and Search Box

107. add sidebar

108. add search box

109. Create Search Screen

110. show filters

111. create api for searching products

112. display results

deploy