Zahnen Garner Danielle Thompson
No known bugs at this time.
Report bugs here. | Request features here.
Merch Store is a practice in implementing CRUD functionality within a React application. Users can create, read, update, and delete items in a webstore for a fictional band. The webstore will keep track of inventory based on "purchases" and "restocks".
READ onclick to toggle form {done}
CREATE onclick to create an item from form {done}
READ- Details onclick toggle details {done}
UPDATE update whole item {done} onclick for incrementing/decrementing quantity(inventory){done}
DELETE onclick to delete an item && reduce quantity of item (inventory) {done}
- A user should be able to Create, Read, Update and Delete items in the store. Items should have fields for name, description, and quantity (along with any other fields you wish to add).
- Increase or decrease the quantity of an item in the store. For instance, if a user clicks "Buy", the quantity will decrease by one. If a user clicks "Restock", it will increment by a specified number.
- When the quantity of an item is reduced to 0, the item should say "Out of Stock". A user should not be able to reduce the quantity of an item below 0.
- Implement more CSS/CSS objects
- Create a shopping "cart" with inventory number auto-updating upon purchase
- VS Code
- Git & GitHub
- JavaScript ES6
- JSX
- React Framework v17.0
create-react-appnpm install --save-exact react-scripts@3.2.0- webpack
- Babel
- ESLint
- node.js v15.8.0
- Bootstrap v5.0.0
- To access the live page, visit this site.
- Open your git-capable command line program (I recommend Terminal on Mac or Git Bash on PC)
- Ensure you are within the directory you'd like the file to be created in.
- Enter the command
git clone https://github.com/Zahnen/merch-storein your command line - Once cloned, use the
cdcommand to navigate to the directory created in the previous step. - You must have node.js installed in order to run the webpage successfully. If you do not have node.js installed, find more information and download it here
- Once in the newly cloned directory, run
npm installin your command line to install the necessary packages and dependencies.
Once in the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
This software is licensed under the MIT License.
Copyright (c) 2021 Zahnen Garner & Danielle Thompson*