20 November 2020
This is an exercise for Epidocodus to practice making a React website with full CRUD functionality. The instructions were to build a tap room in React where a bar or kombucha store can track their kegs.
| # | Story |
|---|---|
| 1 | As a user, I want to see a list/menu of all available kegs. For each keg, I want to see its name, brand, price and flavor. |
| 2 | As a user, I want to submit a form to add a new keg to a list. |
| 3 | As a user, I want to be able to click on a keg to see its detail page. |
| 4 | As a user, I want to see how many pints are left in a keg. Hint: A full keg has roughly 124 pints. |
| 5 | As a user, I want to be able to click a button next to a keg whenever I sell a pint of it. This should decrease the number of pints left by 1. Pints should not be able to go below 0. |
| 6 | As a user, when a keg becomes out of stock, I want to be able to click a button next to the keg to restock it. |
| 6 | As a user, I want the option to edit a keg's properties after entering them just in case I make a mistake. |
| 7 | As a user, I want to be able to delete a keg. |
| 8 | As a user, I want a keg to update with an alert message to say "Out of Stock" once it's empty. |
| 9 | As a user, I want kegs with less than 10 pints to include an alert message that says "Almost Empty" so I can try a pint before it's gone! |
| 10 | As a user, I want alert messages (in stock, out of stock, almost empty) color-coded for easy readability. |
| 11 | As a user, I want this application to be nicely styled. (Use stylesheets and CSS objects!) |
- Navigate to the directory in which you would like to clone this project.
- Run
git clone https://github.com/vanmars/kombucha-store.gitin terminal. - Run
cd kombucha-storeto navigate into new project directory. - Open the cloned repo in a text editor of your choice.
- Run
npm installto download all dependencies. - Run
npm startto start a live server and view projec in the browser.
There are no known bugs at this time. But the following item could be improved:
- Sort product list by name, for readability and for consistency after a change is made to an item on the list.
Connect with me at [email protected] with ideas to improve this project.
- HTML
- CSS
- JavaScript/React
- Webpack
- NPM
Background Image Photo by Klara Avsenik on Unsplash
Copyright (c) 2020 Vanessa Stewart
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.