Product Inventory and Order System ( PIOS )

[fsn_row][fsn_column width=”12″][fsn_text]

Simple Inventory and Order Management system using the MERN Stack

  • ReactJS
  • NodeJS
  • ExpressJS
  • MongoDB
  • Bootstrap
  • Redux
  • CRUD

At one of my previous jobs, there was a lot of confusion and everything ran on a series of excel files that needed to be manually updated, I saw this as an opportunity to look into improving the system and automating as much as possible. I was tasked with making a very intuitive system that could be used by everyone in the company to accomplish their jobs. This was a very interesting project for me and helped me grow as a developer.

I began this project by addressing all the dire needs of the company, and that meant importing several thousands of products, and hundreds of orders into one system, so I needed to get a lot of backend experience fast. I built database models, API routes, and middleware functions to attempt to build the most streamlined process that I could. I learned a lot of concepts, and collectively did hundreds of hours of research.

Setting up the API routes on Express couldn’t be any easier, and getting filter parameters from GET requests helped keep the file sizes down, once I had everything returning the desired results, I set up a relational array to handle the caching, and listen out for clear cache requests, since this is a full CRUD application. I enjoyed how logical everything was, and how I was eventually getting to the point at where I was understanding how things in other applications worked by seeing them and thinking them through, suddenly everything became a fun little puzzle.

On the front end, React Hooks was just being released, so I began it in a React – Redux combo, and slowly transitioned to hooks in the later parts of the development. I love how seamlessly everything connects in React, when you are writing self-contained components.

For more rapid development, I was able to bring in Bootstrap through the Reactstrap dependency, which let me focus on features over anything else, while still having a relatively decent looking interface. With the colors, ternary operators, I was able to make the interface communicate a lot more information at a first glance, without overwhelming the user, and more immediate tasks were displayed promptly.

A LOT of information needed to be covered and recorded in this app on a whole, notes for accounts, claims tickets, changes being made to the orders, reflecting item status, and orders sent out in chunks, and it had to be accessible and readable for everyone involved, so I had to set up user roles, access delegation, and a consistent location that would be able to scale with need. With all of these requirements in mind, I had set up modals, tabs, and flags to alert people, I had to record the previous states of the orders, the users who accessed them, the changes being made, and when they had last viewed the item, in case someone else updated something, everyone involved should know that changes were made, and I built it to handle that.

While the Hooks API is immensely easier and was needed in React, I still rather enjoyed the experience that learning Redux had provided me, using the Store, importing and exporting state back to the store, it brought out the engineering in ‘front end engineering’, or as I had described it to others, a backend for the front end, it was all together with a very fun and educational experience.

This was the first full-scale application I had developed, and the experience was just as interesting as it was rewarding.

 

[/fsn_text][/fsn_column][/fsn_row]

Technologies used:
  • ReactJS
  • NodeJS
  • ExpressJS
  • MongoDB
  • Bootstrap
  • Redux
  • CRUD