About GardenProject project:

The GardenProject was created for people who love gardening and also value their time. Our website offers a variety of gardening products tailored to meet the needs of gardening enthusiasts. Additionally, we provide a range of items suitable for other family members, making it a one-stop shop for all your household needs.

Features

• Wide Selection of Gardening Tools: From shovels to pruning shears, find everything you need for your gardening projects.
• Plant Care Products: Fertilizers, soil, and plant food to keep your garden thriving.
• Outdoor Furniture: Enhance your garden space with stylish and comfortable outdoor furniture.
• Family-Friendly Products: Discover a range of items for other members of your family, ensuring everyone finds something they need.

Why Choose Us?

• Quality Products: We offer products from trusted brands to ensure durability and efficiency.
• Convenience: Save time by finding all your gardening and family needs in one place.

Backend

Backend [https://github.com/tel-ran-de/telran_backend_garden_shop] [https://telran-backend.onrender.com/products/all]

Contributors

-Olena Kaspruk - Team Lead / Developer -GitHub -LinkedIn

• Elvira Gibner - Scrum Master / Developer
  -GitHub -LinkedIn

Tree our project

├───components │ ├───AllProducts │ ├───BasketCard │ ├───CardDetailsSceleton │ ├───CardSkeleton │ ├───CategoriesCard │ ├───CategoriesSection │ ├───CategoryProductsCard │ ├───DiscountAndOrderForm │ ├───DiscountedCheckBox │ ├───Favorites │ ├───FilterPrice │ ├───Footer │ ├───Header │ │ ├───BurgerMenu │ │ ├───ButtonDiscount │ │ ├───Logo │ │ ├───Navigation │ │ └───Switcher │ ├───Hero │ ├───ImageModal │ ├───MobileMenu │ ├───ModalWindow │ ├───ModalWindowContainer │ ├───ModalWindowContent │ ├───OrderDetailsCard │ ├───ProductDetail │ ├───ProductsCard │ ├───SaleCards │ ├───SaleModal │ ├───SaleSection │ ├───SharedLayout │ ├───SorterSelect │ ├───SortFilteredComponents │ └───UI │ ├───Basket │ ├───BasketHeader │ ├───Button │ ├───ButtonAddToCard │ ├───ButtonCounter │ ├───ButtonSection │ ├───Favorite │ ├───FavoriteHeader │ ├───Input │ └───ScrollToTopButton ├───media │ ├───icons │ └───images ├───pages │ ├───AllProductsPage │ ├───AllSalesPage │ ├───BasketProductsPage │ ├───CategoriesPage │ ├───CategoryProductsPage │ ├───ErrorPage │ ├───FavoritesPage │ ├───MainPage │ └───ProductDetailPage └───redux └───slices

Brackpoints[1440px,1000px,768px,480px,360px]

Libraries Used in the Project

The GardenProject utilizes a variety of libraries to provide a rich and interactive user experience. Below is a summary of the key libraries and their purposes:

Core Libraries

• React: A JavaScript library for building user interfaces.
• React DOM: Provides DOM-specific methods that can be used at the top level of your app.

State Management

• Redux: A predictable state container for JavaScript apps.
• React Redux: Official React bindings for Redux.
• Redux Toolkit: The official, opinionated, batteries-included toolset for efficient Redux development.
• Redux Thunk: Middleware that allows you to write action creators that return a function instead of an action.
• Redux Persist: Persist and rehydrate a Redux store.

Form Management

• React Hook Form: Performant, flexible, and extensible forms with easy-to-use validation.

UI Components and Styling

• @mui/material
• @emotion/react

Routing

• React Router DOM: A collection of navigational components for React applications.

HTTP Requests

• Axios: A promise-based HTTP client for the browser and Node.js.

Testing

• @testing-library/react: Simple and complete React DOM testing utilities that encourage good testing practices.
• @testing-library/jest-dom: Custom jest matchers to test the state of the DOM.
• @testing-library/user-event: Simulates user events for testing.

Utilities

• React Transition Group: A component for managing animations in React.
• React Loading Skeleton: Create skeleton screens that automatically adapt to your app's layout.
• React Lazy: Lazy loading for components to improve performance by splitting code into manageable chunks.

Build and Compile

• @babel/plugin-proposal-private-property-in-object: Babel plugin for parsing private properties in objects.
• @svgr/webpack: Transform SVGs into React components.

These libraries work together to create a seamless, efficient, and user-friendly gardening e-commerce platform.

Deployment

The project was deployed on Netlify with automatic integration to GitHub and is available at GardenProject on Netlify.

Responsiveness

The GardenProject is fully responsive and can be viewed on various devices. The layout adapts seamlessly across the following breakpoints:

• 1440px
• 1000px
• 768px
• 480px
• 360px

This ensures an optimal browsing experience on desktops, tablets, and mobile devices.