ReactJS, Express, NodeJS

React Inventory Management Tool
The Idea

I wanted to build a React form that can use the Google Sheets API to populate and manage an inventory, currently stored in a spreadsheet. This could be used by a user or team who needs to update or manage a spreadsheet for inventory or client management, or many other uses.

My Tech Stack:

  • React

  • Node

  • Express

  • CSS

I used React so this component could have live updates, and be dropped into maybe a dashboard page or hosted independently. I needed there to be API calls to the Google Sheets API using Google Cloud, so I built the API calls into a backend Express server, in a production environment this could be built into a more secure cloud server. 

Adding & Updating Items

I initially built the functionality to just add items to the spreadsheet, building into the main app a state for the form data, items, selected item, and row number, an async functions to fetch the items and functions to handle the changes and submissions. My first route in my server allows for adding a row to the spreadsheet. Once I got this up and running, I wanted to add a dropdown to view and select items in the spreadsheet, pulling from the item’s name. Once the item is selected, it fills the rows of the form with the live data, allowing the user to update things like stock levels, prices, etc. 

Additions and Improvements

If I wanted to extend this project I would add a route to delete items from the spreadsheet, maybe add new columns to the sheet if needed.

View Github Repo