Stock image of coffee beans, courtesy Lukasz Rawa via Unsplash.
Volume Coffee Roasters is a fictional coffee roastery web app that includes a FOH (Front of House) and BOH (Back of House) area. This iteration of the project takes the BOH structure from a previous project and adds customer-facing features.
How it started: (Live Site | GitHub)
How it's going: (Live Site | GitHub)
- React
- JavaScript
- Bootstrap
- HTML
- CSS
- webpack
- Node.js
- EmailJS
At Volume Coffee Roasters, we use the FOH part of our web app to sell coffee beans and subscriptions to customers & the BOH to track inventory. We get our coffee delivered in large burlap sacks. Here are the details:
- Our inventory of includes multiple types of beans, purchased in large, wholesale-sized burlap sacks
- Each new burlap sack contains 130 pounds of coffee beans
- Every sale decrements one pound of beans from the sack, until it is empty
User Storeis:
- ✅ As a user, I want to be able to toggle between FOH and BOH
- ✅ As a user, I want the site to be easy to use and nicely styled
FOH User Stories:
- ✅ As a FOH user, I want to first see a Landing page (area) that includes a bold, call-to-action to allow customers to subscribe to our mailing list in two clicks.
- ✅ As a FOH user, I want to be able to contact the company directly from the footer & see company contact info
BOH User Stories:
- ✅ As a BOH user, I want to see a list/menu of all available types of coffee beans.
- ✅ For each item, I want to see its name, origin, price, and roast (light, medium, or dark) of the coffee bean. (You are welcome to include anything additional that is relevant to the product your store carries.)
- ✅ As a BOH user, I want to submit a form to add a new burlap sack of coffee to the inventory.
- ✅ As a BOH user, I want to be able to click on a burlap sack to see its detail page.
- ✅ As a BOH user, I want to see how many pounds of coffee beans are left in a burlap sack. A burlap sack has roughly 130 pounds.
- ✅ As a BOH user, I want to be able to click a button to sell a pound of coffee beans. This should decrease the number of pounds left by 1. The number of pounds in a sack of coffee beans should not be able to go below 0.
FOH User Stories (Stretch):
- ✅ As a FOH user, I want to see a featured blend with a link to purchase
- ✅ As a FOH user, I want to be able to click to:
- ✅ view blog details
- ✅ take Know Your Strength quiz.
- ✅ As a FOH user, I want to be able to
- ✅ Add items to a cart
- ✅ Remove items from a cart
- ✅ Change quantites of items in cart
- ✅ View cart summary
BOH User Stories (Stretch):
- ✅ As a user, I want the option to edit a coffee sack's properties after entering them just in case I make a mistake.
- As a user, I want to be able to delete a coffee sack.
- ✅ As a user, I want a coffee sack to update to say "Out of Stock" once it's empty.
- As a user, I want coffee sacks with less than 10 pounds to include a message that says "Almost Empty" so I can buy a pound of it before it's gone!
- As a user, I want to have coffee prices to be color-coded for easy readability. This could be based on their price, their origin or roast, or the amount of pounds left.
- ✅ Build mock up for FOH
- ✅ Revise component drawing
- ✅ Restablish Component Hierarchy
- ✅ Build New Static Components
- ✅ Add State
- ✅ Style to match mockup
- Next Steps:
- Add database so data persists in realtime across many devices
- Add authentication for single 'admin' user
- Buid "Checkout" UI
- Add POS API connection
- ✅ Meet MVP
- ✅ Stretch: build cart feature
- ✅ Stretch: build Know Your Strength quiz
- Implement Next Steps
- Clone this repo to your workspace.
- Navigate to the top level of the directory.
- In the root directory of the project, run this command to install all packages listed in the package.json:
$ npm install
- Then, to build and serve the project, run:
$ npm run start
- No known bugs. If you find one, please email me at [email protected] with the subject [Repo Name] Bug and include:
- BUG: A brief description of the bug
- FIX: Suggestion for solution (if you have one!)
- If you'd like to be credited, please also include your github user profile link
MIT License
Copyright (c) 2023 Kirsten Opstad
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.