product-inventory

A product inventory application made using React JS and JSON server, with features like - user authentication, managing products, with a responsive UI and good UX.

PRODUCTS INVENTORY

Screenshots:

Features:

1. Responsive User Interface
2. Appropriate input fields
3. Form validations and user friendly features
4. Search filter to display only a subset of items wherever required
5. Customization of fields displayed
6. User registration
7. User sign-in and authentication
8. Product inventory management
9. Add, update or delete operations only by signed-in user
10. View products by all the users
11. View chart of top viewed products
12. Prompt when user tries to add, edit or delete products, without signing in
13. Pre-populated data of the product in product update page
14. Unique product and user id generation
15. Notify, if the user accidentally moves out of the "Add Product form page" after inputting some data in the form.
16. Deletion of one or more products at a time

How to Run the App:

1. Download or clone the app.
2. To install the required packages and dependencies, run bash npm install in a terminal or the CMD, in the project directory.
3. To start the server, click open the batch file, in the file path: products-inventory/db/ namely- server.bat.
4. To run the app, open the batch file, in the file path: products-inventory/db/ namely- app.bat or type and enter npm start in the CMD/ Windows Powershell/ Terminal in the application directory.
5. Your default browser should open the app and you'll be viewing the home page/ landing page, i.e. the About Page.
6. In the About Page, you can read about the app, view the products list, view the top products, in the Products drop down and you can do all these without even the need to sign in.
7. In the View Products List page, you'll be shown a list of all the available products in the inventory and you can also search for a specific product you're searching for in the search bar, by typing a few characters of the search item, but you can't add, view details or delete products, without signing in.
8. You can also Customize Fields, by clicking on the right button to the card and selecting from the drop down, which all fields you want to view.
9. In the Top Viewed Products page, you should be seeing a bar chart, of the products, which are viewed how many times.
10. If you're already a user, I.e. you've registered successfully earlier, you'll need to sign in, which can be found on the navigation bar, right side or in the Welcome box in the About page. To make sure you're not yet signed in, the nav bar should show the option to Sign In, on it's right side.
11. Once signed in successfully, the Sign In button changes to Sign Out, with a message- Hello, YourUsername adjacent to it.
12. You can click on your username on the navbar, to view the details of yourself, that you would have provided during registration.
13. If you are not already a user, find the button in the About Page, inside the Welcome box and register yourself, by providing the basic details.
14. During registration, you'll have to provide you First and Last names, a valid Email (which would be your username), Password (must be atleast 6 characters long), Mobile number (must be exactly 10 digits) and your Location.
15. On clicking the blue Register button, an alert would pop-up, saying that you're successfully registered. In case you wrongly typed something and want to reset the whole form, click the Reset button.
16. After, registration, you can now proceed to sign in, by providing your correct username (email id) and the password.
17. Once signed in successfully, you'll now be redirected to the View Products page, but now you shall be eligible to- View Details of a product, by clicking on the Product Name, delete one or more products, by selecting the check boxes and pressing the Delete button at the bottom.
18. On clicking on a specific product, you'll be redirected to that Product Details page and here you can view additional data about that product, Add New Product by clicking on the top green button, Edit, Delete product, by clicking on the respective links.
19. On clicking on the Add New Button, you'll be redirected to the Add new product page, where you can add a new product by providing various details. While providing the details, in case you press on some other link or button, you'll be given a prompt, which you need to confirm, if you really wish to switch to some other page or press Cancel to stay in the Add Product Page.
20. In the View Product page, you can Edit the product, by clicking on the Edit link, which would redirect you to the Edit Product Page. Here you should find the data already populated in the fields for your convenience and you only need to make the necessary changes and then click on the Update Product button.
21. In the View Product page, you can Delete the product, by clicking on the Delete link an alert pop up would show up, which you need to confirm to delete that product.
22. Some sample products and users have been added for your reference and time saving. You would find them in the server resources and may use them or create new ones as well.

Some Issues Which You Might Encounter, While Using This App: All measures and testing have been taken proper care of, but still you might face some issues while using the app. In case you face any, most of them would be, browser or internet related issues or issues which can't be avoided, as they're out of this project's scope. Below are a few issues, which you might face, while using the app:

1. Not loading of images immediately - The images used here, are directly fetched from the internet, so in case they don't render immediately, they would definitely in a few milliseconds. Just make sure you're connected to a stable internet.
2. Redirecting to a blank page - Very rarely you might face this issue. It's nothing related to the code, but browser or if you're using any mouse back button(which are mostly available in gaming mouse) only. Kindly type http://localhost:3000/and go back to home or type any other page name in the browser search bar.
3. Pop-up issue - Pop-ups have been enabled in some pages for better user experience. But at times, very rarely though, you may face more than one pop-up at the same time, in the same page. This is simply a browser issue, when the browser is not able to handle multiple pop-ups at times. Kindly keep pressing OK or whichever button is available in that pop-up, till it goes away. At most you may encounter 2 pop-ups at times.

Pages/Components:

1. AboutPage.js - Renders the about page, where user can navigate to sign in, register, view products or view top view products chart pages.
2. AddNewProductsPage.js - A signed in user can add a new product.
3. EditProductPage - A signed in user can edit an existing new product.
4. ProductsDetailsPage.js - A user (who has signed in) can view the details of the product, he/she wishes to view.
5. RegisterPage.js - A visitor (user who has not yet signed in) can register himself/herself, by providing various required information.
6. SignInPage.js - A visitor can sign in himself/herself, by providing various required information.
7. TopViewedProductsPage.js - A visitor or user can view the product views, in the form of a bar bar chart.
8. UserDetailsPage.js - A user, who's signed in can view his/her details, provided by him/her.
9. ViewProductsPage.js - A visitor/user can view the list of all products available in the inventory.

Architecture of the Project: FLUX : The FLUX design pattern or architecture has implemented in this project. In the project directory, you would find folders like, actions, dispatcher, stores, views or components, to be specific, apart from other folders. These folders contain files, where the FLUX design pattern is implemented.

1. Actions : These are helper methods that facilitate passing data to the Dispatcher.
2. Dispatcher : Receives actions and broadcasts payloads to registered callbacks.
3. Stores : They are the containers for the application state and logic, that have callbacks registered to the dispatcher.
4. Views / Components : React Components that grab the state from Stores and pass it down via props to child components.

For the API part, JSON Server has been used to serve data, which provides a REST API. Testing has been done for some of the components and various test cases have been written using React Test Driven Development (TDD), using the Jest framework and Enzyme testing utility. Random images have been used, that are fetched from Lorem Picsum (https://picsum.photos/).

So, experience using _ Product Inventory _ and give feed-backs, if any by making Pull Requests. If you like the app, don't forget to STAR!