Your one-stop online shop for beautiful plants! A modern, responsive web application designed to simplify and enrich the plant purchasing experience.
e-plantShopping is a modern e-commerce web application designed to simplify and enrich the plant purchasing experience. Whether you are a seasoned gardener or a novice plant lover, this platform helps you browse, select, and buy plants with ease.
Grow your collection, one click at a time!
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ │ │ │ │ │
│ Product Feed │ ────> │ Shopping Cart │ ────> │ Secure Checkout │
│ (Browse/Filter) │ │ (Manage Items) │ │ (Order Placed) │
│ │ <──── │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
graph LR
Feed(["🌿 Product Feed <br>(Browse/Filter)"])
Cart["🛒 Shopping Cart <br>(Manage Items)"]
Checkout(["💳 Secure Checkout <br>(Order Placed)"])
Feed -->|"Add to Cart"| Cart
Cart -->|"Proceed to Checkout"| Checkout
Cart -.->|"Continue Shopping"| Feed
style Feed fill:#e8f5e9,stroke:#388e3c,stroke-width:2px,color:#000
style Cart fill:#e1f5fe,stroke:#0288d1,stroke-width:2px,color:#000
style Checkout fill:#f3e5f5,stroke:#8e24aa,stroke-width:2px,color:#000
• 🌿 Extensive Catalog: Browse a wide variety of beautifully categorized plants.
• 🛒 Dynamic Cart: Seamlessly add, remove, and manage plants in your shopping cart.
• 🔍 Search & Filter: Powerful search and filtering tools to find exactly what you need.
• 💳 Seamless Checkout: A smooth, intuitive checkout process to finalize your purchases.
• 👤 User Profiles: Secure user authentication to manage accounts and save preferences.
• 📦 Order Tracking: Keep a close eye on your recent orders and delivery status.
• 📱 Responsive Design: Flawlessly optimized for both mobile and desktop viewing.
| Category | Technologies Used | Purpose |
|---|---|---|
| Frontend Framework | React.js | Building a fast, interactive, and component-based UI |
| State Management | Redux / Context API | Managing shopping cart data across the application |
| Styling & Layout | CSS3, HTML5 | Structuring pages and ensuring mobile responsiveness |
| Version Control | Git, GitHub | Codebase management and feature versioning |
The following screenshots demonstrate the frontend UI rendering, component architecture, and global state management of the application.
1. Application Landing Page
The initial entry point of the React application. This view features a responsive hero section with CSS-styled background rendering, clear typography, and a primary call-to-action component that routes the user into the main shopping experience.
2. Dynamic Product Catalog
The primary shopping interface displaying a dynamically mapped grid of product components. Each plant card integrates nested prop data (image, price, description, sale status) and connects to the global state via the "Add to Cart" action dispatcher.
3. State-Driven Shopping Cart
The cart management interface illustrating real-time state manipulation. This component handles dynamic price calculations, quantity adjustments (increment/decrement), and item removal, reflecting instantaneous updates to the Redux/Context global state without page reloads.
e-plantShopping/
├── public/
│ └── vite.svg # Static public assets
├── src/
│ ├── assets/ # Dynamic application assets (images, icons)
│ ├── AboutUs.jsx / .css # Landing page component and styling
│ ├── App.jsx / .css # Root application component and global layout
│ ├── CartItem.jsx / .css # Shopping cart component and styling
│ ├── CartSlice.jsx # Redux slice for managing cart state (add/remove/update)
│ ├── ProductList.jsx / .css # Product catalog grid component and styling
│ ├── index.css # Global CSS resets and base styles
│ ├── main.jsx # React DOM rendering entry point
│ └── store.js # Redux Toolkit centralized store configuration
├── .eslintrc.cjs # ESLint configuration and rules for code quality
├── .gitignore # Specifies intentionally untracked files for Git
├── index.html # Main HTML template
├── LICENSE # Project license file
├── package-lock.json # Deterministic dependency tree
├── package.json # Project metadata, dependencies, and deployment scripts
├── README.md # Project documentation
├── screenshot4.png # Visual proof: Welcome landing page
├── screenshot5.png # Visual proof: Dynamic product catalog
├── screenshot6.png # Visual proof: State-driven shopping cart
└── vite.config.js # Vite build, plugin, and deployment configuration
To run this e-commerce application locally on your machine:
- Clone the Repository
git clone [https://github.com/HAMED-PAYANDA/e-plantShopping.git](https://github.com/HAMED-PAYANDA/e-plantShopping.git)
cd e-plantShopping
- Install Dependencies Ensure you have Node.js installed, then install the required packages:
npm install
- Run the Development Server Launch the application:
npm start
The application will now be accessible in your web browser at http://localhost:3000/.
This project is licensed under the Apache 2.0 License.
Hamed Payanda
- GitHub: @HAMED-PAYANDA
- Completed as part of the IBM Full-Stack Software Developer Professional.