🌿 e-plantShopping - React Shopping Cart App

Welcome to e-plantShopping, a React-based shopping cart application built as part of the Developing Front-End Apps with React course. This project showcases key React concepts such as component-based architecture, state management, Redux, and dynamic UI updates.

🚀 Features

🏡 Landing Page

• Beautiful background image
• Brief introduction about the nursery
• "Get Started" button leading to the product listing page

🛍️ Product Listing Page

• Displays at least six houseplants, categorized into three or more groups
• Each product includes:
  • 🌱 Thumbnail image
  • 🌱 Plant name
  • 🌱 Price
  • 🌱 "Add to Cart" button
• Header with:
  • Shopping cart icon displaying total items
  • Navigation links

🛒 Shopping Cart Page

• Shows added products with:
  • 🌱 Product name & thumbnail
  • 🌱 Unit price & total cost
  • 🌱 Quantity adjustment buttons (+ / -)
  • 🌱 Delete button to remove items
• Displays total items & cost
• "Continue Shopping" and "Checkout" buttons

⚡ Technologies Used

• React - Component-based UI
• Redux - State management
• React Hooks - useState, useEffect for dynamic updates
• React Router - Navigation between pages
• CSS Modules - Styling components

📂 Project Structure

e-plantShopping/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── AboutUs.css
│   ├── AboutUs.jsx
│   ├── App.css
│   ├── App.jsx
│   ├── CartItem.css
│   ├── CartItem.jsx
│   ├── CreateSlice.jsx
│   ├── ProductList.css
│   ├── ProductList.jsx
│   ├── index.css
│   ├── main.jsx
│   ├── store.js
├── .eslintrc.cjs
├── .gitignore
├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js

🛠️ Installation & Setup

1. Clone the repository:

   git clone https://github.com/4Min4m/e-plantShopping.git
   cd e-plantShopping

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open in browser:
   • Visit http://localhost:3000

🚀 Live Demo

[Click here to explore the live version] https://github.com/4Min4m/e-plantShopping

💡 Future Enhancements

• 🌱 Add product filtering & search
• 🌱 Implement a backend with a database
• 🌱 Enhance UI/UX with animations
• 🌱 Add authentication for user accounts

🤝 Contributing

Contributions are welcome! Feel free to fork the repo, make improvements, and submit a pull request.

📜 License

This project is open-source and available under the MIT License.

---

📢 Connect with Me

• 🔗 [LinkedIn] : https://www.linkedin.com/in/mohammad-amin-amini/
• 💻 [GitHub] : https://github.com/4Min4m

Happy coding! 🚀