This site was created as a tool for a faux business to keep track of inventory levels of their products. Users are able to add/restock items, see a list of items available, "sell" items (decrement stock levels), and delete items.
- React
- JSX
- JavaScript
- Markdown
- Drawio
- Git
This site acts as a simple tool to keep track of inventory for a faux flower business. Upon opening or refreshing the site, the default tab is the spotlight tab. From every page, users are able to navigate to the about us page, shop page, spotlight page, or the new flower page. From the shop page, users are able to click on any flower to navigate to that flower's detail page, where they are able to edit, delete, buy, or restock.
| this link | displays a page that shows... |
|---|---|
| about us | blurb about fake company, store hours, & store location/contact |
| shop | list of current flowers in available. if no flowers are available, page will be empty |
| spotlight | three faux "top staff picks" flowers for sale |
| new flower | form to add a new flower to site |
Click here to view the live version of this flower shop webpage
- filling in all details will add a new flower to the available flowers in shop
- the default quantity for adding a new flower is by the dozen (12)
- clicking update {flower name} will take user to the edit flower form
- clicking kill {flower name} will delete the flower from the site and re-route user to the shop page
- clicking take a flower will lower the in stock level of the selected flower by 1. changes will reflect immediately
- when down to 3 or less flowers in stock, "almost sold out" message will display on flower
- clicking the button with the site icon will restock the selected flower. the default is by the dozen (12) and changes will be reflected immediately
- filling in all details will update the selected flower (noted in the yellow text by name)
- form must be fully filled out
- once updated, user is re-routed to shop page
- when in stock level reaches 0, "currently out of stock" message displays
- note, there is also no take a flower button if flower is out of stock, only the restock button
- Clone this repository to your desktop
- Navigate to the top level of this directory in your computer’s terminal
- Run the code
npm installin your terminal to install the necessary packages and plug-ins - Run the code
npm run startin your terminal to start the application in development mode and open the project in your web browser
- Needs error handling for update form - if not filled in, will update all details to null
- As a user, I want to have flower prices to be color-coded for easy readability. This could be based on their price, their origin or color, or the amount of flowers left.
MIT License
Copyright (c) 2023 Luckie
This project was bootstrapped with Create React App.