💻 https://reactjs-shopping-cart-app.netlify.app/
The project will be a single-page web application where users will be able to add new products to their shopping lists, store these products on a mock API and update them in their shopping carts. A user-friendly interface will be designed using React and transition between pages will be provided using React Router.
Epic User Story: Developing a Shopping Cart Application 🎖️
User Stories:
1️⃣ Listing Products:
- 🥇 Create components to display existing products.
- 🥈 Fetch and list products from the mock API.
- 🥉 Style the product listing with CSS.
2️⃣ Adding Products
- 🥇 Develop components for users to add new products.
- 🥈 Implement functions to save new products to the mock API.
- 🥉 Perform validation on the product addition form.
3️⃣ Shopping Cart Operations
- 🥇 Create components for users to view their shopping carts.
- 🥈 Fetch and list products from the mock API for the shopping cart.
- 🥉 Implement functions to update and delete product quantities in the cart.
- 🥉 Design and style the cart page layout.
4️⃣ Interface Design and Enhancements
- 🥇 Design the overall user interface and improve usability.
- 🥈 Make necessary corrections and enhancements based on user feedback.
- 🥉 Ensure responsive design for mobile devices.
5️⃣ Creating About Page
- 🥇 Design and implement the layout for the About page.
- 🥈 Add relevant content such as information about yourself.
- 🥉 Style the About page with CSS.
6️⃣ Creating Main Page
- 🥇 Set up the main landing page layout.
- 🥈 Include navigation links to other pages.
- 🥉 Design and implement any additional features on the main page.
7️⃣ Implementing New Product Page
- 🥇 Develop a form for users to input new product details.
- 🥈 Add validation to the new product form.
- 🥉 Implement functionality to submit new product data.
8️⃣ Implementing Product List Page
- 🥇 Display a list of available products fetched from the mock API.
- 🥈 Add filtering or sorting options to the product list.
- 🥉 Include buttons or links to view details or update products.
9️⃣ Implementing Update Product Page
- 🥇 Create a form pre-filled with selected product details.
- 🥈 Allow users to update product on shopping cart.
- 🥉 Implement functionality to update product data.
Additional Requirement: 💥
- The application should have a responsive design.
Shopping Cart (folder)
|
├── public
│ └── index.html
├── src
│ ├── assets
| |
│ ├── components
│ │ ├── Navbar.jsx
│ │ ├── Product.jsx
│ │ ├── ProductCard.jsx
│ │ ├── ProductForm.jsx
│ │ ├── Products.jsx
│ │ └── Summary.jsx
| |
│ ├── pages
│ | ├── About.jsx
│ | ├── Main.jsx
│ | ├── NewProduct.jsx
│ | ├── ProductList.jsx
│ | └── UpdateProduct.jsx
| |
| ├── router
| | └── AppRouter.jsx
| |
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ └──reportWebVitals.js
|
├── .gitignore
├── LICENSE
├── package-lock.json
├── package.json
├── react-shopping-cart.gif
└── README.md
Build a Shopping Cart App using ReactJS.
-
HTML & CSS & JS
-
ReactJS
-
React Router & Hooks
-
Mock API
-
improve coding skills within HTML & CSS & JS & ReactJS.
-
use git commands (push, pull, commit, add etc.) and Github as Version Control System.
Your insights and contributions greatly enrich my projects! Whether you're bursting with fresh project concepts or have ideas to enhance existing ones, your input is invaluable. Feel free to open an issue to initiate a dialogue about your thoughts, or submit a pull request with your proposed modifications. Every contribution plays a vital role in my growth and improvement, so thank you for being an integral part of my community!
This repository is licensed under the GNU General Public License v3.0 License. See the GPL licence file for details. For more information please visit GNU License
☺ Happy Coding ✍