My First REACT App…
Yes, This is my first react app. I think, I did well….., just read below mentioned points so that you will realize I am not wrong !
Before that take a look at the App
I will explain about this app before telling the story of this app. This is a basic inventory manager app. You can add any product to this inventory and Delete or Edit any product(Fully CRUD). Another good feature is, this app is fully responsive one.
Yes I have lots of points to tell you about this app. First point is, I had to made the backend and frontend to bring my app to live. I used JSON server to make my backend and hosted it in Heroku.com. In front end I had to create 6 component
And I linked all components to Allproducts.js and most of the functionality is done in MainContainer.js including CRUD . I used useEffect hook to fetch products from JSON server and then stored all data in a variable using useState hook and distributed that variable using props to required components to render product cards. To render card, I used map callback function and to the search functionality I added filter callback function before map callback function.
I used “Form” components to get the product details to create product. And passed that data to the top of the components tree using props. After receiving data to Allproducts.js, I made a POST request to the server to create new product and used a spread operator to add returned data to the current product array. After adding data to the array, the component will automatically Re render again because of change of the useState/props.
I used edit product buttons (Mark as Out of Stock Button and Re Stock Button)to trigger PATCH request to the Server. I applied filter function to update the products array and Re render with new details of the product. Also you will be able to delete a product by clicking the “Remove” button. It will trigger DELETE fetch and I used filter callback function to remove that item from current products array.
Another special feature is, I have added a turnery operator to delete request to check the length of products array and if the length is more than 20 it will let you to delete the product. If not, you have to add a product before deleting another product.
If I say something about styling of this app, I have added a popup screen to edit the product by showing the details of the product in a form
And
Added customized massages when you reached the end of the last page and first page.
Also I made another feature to mark products as “Out of stock” or “Restock”. In this feature I made a PATCH request on click event of the button to change the “isInStock” key of the product object from true to false or false to true. Further I made some CSS effects to the clicked card based on the value of “isInStock” key. Also this CSS effect will take effect according to the availability of the product. If the product availability is 0 ,the said CSS effect will take effect(As Shown below in image’s first product)
In addition, I could have applied useContext to use less props in my App. However in future, I will update my App with useContext and some other features.
Like I said at the beginning of this article, I think I did a good job , considering all these explained features.
