Flower to the People

By E. Luckie ☀️

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.

Technologies Used

React
JSX
JavaScript
Markdown
Drawio
Git

Description

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

Navigating the Site

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

Diagrams

Site Diagram

Component Diagram

Setup/Installation Requirements

Clone this repository to your desktop
Navigate to the top level of this directory in your computer’s terminal
Run the code npm install in your terminal to install the necessary packages and plug-ins
Run the code npm run start in your terminal to start the application in development mode and open the project in your web browser

Known Bugs

Needs error handling for update form - if not filled in, will update all details to null

Stretch Plans

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.

License

MIT License

This project was bootstrapped with Create React App.

eluckie / flower-to-the-people Goto Github PK