Introduction
The purpose of this project has been to create an asset inventory management web application called inventorypro. The team members are Chris Ndung'u and myself, Alex Jarabi. This project is a solution to the challenge of managing the workflow of asset requisitions and issuance. Chris worked on the backend of the application, which included setting up business logic and storage. I handled the front-end presentation.
Project Inspiration
Our system is designed to simplify asset management, inspired by the following challenges I identified at my previous place of work:
Asset Records: There was no digital record to show available assets in the store. There were no records to show when assets were procured, asset aging or which assets were under maintenance.
Asset Issuance: Asset issuances to and returns from users were recorded in a book. This was quite risky if for example the book got lost or destroyed.
Asset Audit: Asset audits were quite challenging because it was difficult to track asset issuance history
Approval Workflow: Asset requisition was conducted using paper. A user would have to print and fill out the approval form, walk to the line manager for approval, and then to the IT head for issuance (if the request was approved). This process was quite tedious.
Asset Approval History: Further to the previous point, the physical approval forms would always get lost, making it difficult to track approvals for assets.
Accomplishments
For the front end, we chose to use React JS and Bootstrap. This will serve as a good primer for the coming front-end track. These are the completed features:
Feature: User authentication. Protected routes were used to ensure that a user only accesses what they need to.
Feature: User views. Three user levels depending on function (regular, approver and admin). Each user will have a different dashboard based on level.
Feature: Requisition workflow. Each requisition raised by a user will be forwarded to relevant approvers and eventually to the admin for fulfillment.
Not a feature: The entire application is styled with Bootstrap.
The architecture diagram below shows flow of data through the application:
Technical Challenges
Software architecture - This being the first time working on frontend development, it is not clear how to create a well-structured software architecture that is maintainable and scalable over time.
Frontend Frameworks - Working on the front end, the main challenge has been learning a new language while implementing the various aspects, and keeping up with best practices.
Clear requirements - Some unforeseen changes and requirements came up along the coding journey. Halfway through your implementation, you realize certain aspects are missing out and need attention. These eat into development time.
Data handling - This includes managing and displaying data correctly. I had to do a lot of research so that only the necessary data was displayed to a user.
State management - I faced challenges managing state across the application, handling data flow and ensuring that UI components are synchronized with the application’s state.
Data Storage - Working with dummy data, I had to ensure efficient storage and retrieval of client-side data so that it is persistent.
CSS complexity - There can be specificity issues when using both Bootstrap and local CSS files in the project.
Evolving Project Scope: These were the initial design and walk-throughs of the program flow we had in mind. When it comes to coding, we’ve often found ourselves in situations where we had not thought through certain aspects. This has led to increased workloads and moving some functionalities to POST-MVP to allow MVP completion within the set time.
Lessons Learned
As much as I would like to implement a new stack, it is good to watch professional engineers using the same technology to understand the nuances therein. A particular example was the usage of 'useEffect()' hook in ReactJS. I struggled with the concept of side effect and how useEffect rus after page render.
This project strongly confirms my desire to pursue frontend development as a career stack. It is beautiful to see how bringing components and routes together creates a beautiful functioning website.
About Me
My name is Alex Jarabi. Husband to a beautiful wife and father of two wonderful girls. I hail from Kikuyu, Kenya. In My free time, I love to workout, play the bass and play with my children. Technically, I enjoy the process of creating an idea into a solution to problems around me.
You can learn more about me and the source code below:
Deployed project landing page
My Linkedin profile