Hardware Handler - A enterprize tool management application

Hardware Handler
Client
A Industrial Application Focusing on product management
Industry
Manufacturing
Company Size
20 - 30
Stack
Context API, Json-server, Cypress, Ant design
Project Duration
2 months (Aug. - Oct. 2020)
Visit Website

This application is a sample React application built to help hardware tool managers within retail companies manage their product assets, which are sent the list to retail stores for ordering.

These pages are where a tool manager will actually go about the business of reviewing tools, adding new products to the ones they manage, and reviewing the list of products they intend to ship to stores. When Hardware Handler is running, the first page a user will see is the home page, which links to all the other pages of the app and displays any items already present in the checkout. Clicking the link for 'My Products' on the homepage of the app or in the navigation bar, will bring the user to their products page. The 'Add New Products' page is a form where product managers can add new products to the list of products they manage. 'Checkout' is what it sounds like. It's a summary of all the products the product manager has added to their checkout. It displays all the relevant product information, the suggested retail price of an individual product, and the ability to remove that product from the checkout.

Features

  1. Refactor class components to use hooks - A big part of modernizing an existing React app hinges on being able to take a traditional, class-based component, maintain its current functionality, and convert it to use hooks under the hood, taking advantage of all that the upgraded dependencies have to offer.

  2. Use the context API and useContext Hook to make state access within the app easier - Although this app lacks the need for a separate global state management library like Redux or Recoil, there are still definite benefits to be gained from React's built-in state passing mechanism: Context.

  3. Automated integration testing with Jest & React Testing Library - Using integration testing for organizing tests in this app, like working from the smallest components to largest ones.

  4. End-to-end test with Cypress - Setting up fake data, mocking API calls, targeting DOM elements to trigger events, and debugging misbehaving Cypress tests with the Cypress test runner.

  5. Implement the Ant Design System to speed up design & development - Add Ant Design to the application, identify some components that would benefit from being switched out with Ant Design components, and do so, working from simple components up to the most complex ones and utilizing the Ant documentation to understand how.

Lessons Learned

  1. Deploy backend using Json-server - One nice idea will be to turn this into a Next.js full-stack app. Due to this, we'll be able to deploy both frontend and backend for free on the same platform. But because I don't plan to change the stack, I used a free service of Render to host the json server.

  2. Ethical Considerations - The use of AI in software development raises ethical concerns, such as the potential for biased algorithms, privacy violations, and job displacement. Developers must consider these issues when integrating ChatGPT into their workflows.

  3. Inaccurate or Insecure Code - Although ChatGPT is a powerful language model, it is not infallible. It may generate incorrect or insecure code, which can lead to vulnerabilities and other issues in the software. Developers must remain vigilant and thoroughly review any code produced by the AI.

Next Steps

Add search module for the users to find his tools easily and if taking performance into accounts, try to deploy it using Nextjs.

Previous
Next