Snazzy Stock App
Add new product form with support for variable or simple products
A cart to record sales transactions
The modal to add a product to the cart
Autocomplete search by SKU or product name for adding product to cart
List of sales by date with time span filter
List of sales by date, charts and tables
Sales Record - By Date page
Supplier summaries as links to Supplier pages
Supplier page
Cost/Revenue chart on the Supplier page
Purchase Order page summary section
Purchase Order page chart of category of items purchased
List of products
Product page with Variation sales histories by date
Add new product form with support for variable or simple products
A cart to record sales transactions
Background
Snazzy Stock is an in-development inventory management app for Snazzy Stones Jewellery, a small retail business.
Snazzy Stones currently tracks inventory via hand-written records (for in-person sales) cross-referenced with Woocommerce sales records (for website sales) and Etsy CSV exports (for Etsy sales). The idea behind Snazzy Stock is to have one unified platform into which all records of sale or purchase order transactions will feed to ensure automatic tracking and to provide sales analytics for products.
Features
The app currently contains a rudimentary cart functionality, which doesn't accept payments, but does automatically update the inventor of pre-loaded products, which can be quickly identified via an autocomplete search of product name or SKU. Barcode-tagged products can be scanned with the device's camera for automatic product acquisition. Future versions of the app will integrate with Square's API to automatically generate a subtotal to be charged with in-person sales using the Square terminal.
Product inventory can be managed by adding either simple or variable product types. Instances of each product are tracked from their purchase order to sale.
Purchase orders of products can be uploaded in bulk to update the inventory. Purchase orders include suppliers, purchase date, invoice amount, invoice currency, target price, and quantity. Suppliers and products not already in the database can be created at upload time without leaving the page.
Sales and Purchase Orders can be tracked from a broad aggregate level, or drilled down into the individual sales/purchases. Sales data can be viewed at a date-by-date elevation, such that all transactions for a day are summarized. Analytic charts are available for sales and purchases by category of sales/purchase value and volume, and cost/revenue history over customizable timeframes.
Development
React
React
TypeScript
TypeScript
Material UI
Material UI
Express
Express
Node JS
Node JS
MySQL
MySQL
Snazzy Stock is built with a React front-end, using Material UI as its a component library.
CSV uploads of purchase orders and sales data are parsed into JSON with react-papaparse. Analytics charts are built with react-chartjs-2, and date manipulation is accomplished using dayjs.
The back-end stores data in a MySQL database, which is served up via an Express REST API.