Flora Essence 🌱

Project Overview 🌱

The client side of the Online Nursery project is built using React with state management handled by Redux Toolkit. It integrates with Stripe for payment processing and provides a user-friendly interface for browsing products, managing the shopping cart, and completing purchases. The project is developed using modern tools and practices to ensure a smooth and responsive user experience.

Features 🌟

1. Product Browsing and Management 🌿

   • Users can view a list of products, filter and sort them, and search for specific items.
   • Product details, including images and descriptions, are displayed on dedicated product pages.
   • -Suggested Categories: At the bottom of the product details page, users will see a list of suggested categories related to the current product. This helps users discover similar products or explore categories they might be interested in.

2. Shopping Cart 🛒

   • Users can add products to their cart, view cart contents, and manage quantities.
   • The cart persists user selections and allows for easy checkout.

3. Checkout and Payment 💳

   • Secure payment integration using Stripe.js.
   • Users can choose to pay online with Stripe or opt for cash on delivery (COD).

4. Responsive Design 📱

   • The application is designed to work seamlessly on various devices and screen sizes.
   • Utilizes Tailwind CSS for modern, responsive UI components.

5. State Management and Routing 🔄

   • Redux Toolkit manages the global state for products, cart, and user sessions.
   • React Router handles navigation across different pages. -RTK Query: Utilized for efficient data fetching and synchronization with the server. RTK Query simplifies data fetching, caching, and synchronization processes, reducing the need for manual state management and complex async logic.

Installation

1. Clone the repository:

   git clone https://github.com/MdMuzahid07/Online-Nursery-Client.git

2. Navigate to the project directory:

   cd Online-Nursery-Client

3. Install dependencies:

   yarn install

Scripts

• Start Development Server:

  yarn dev

  Starts the development server using Vite.

• Build Project:

  yarn build

  Compiles TypeScript files and builds the project for production.

• Lint Code:

  yarn lint

  Lints code using ESLint.

• Preview Build:

  yarn preview

  Previews the production build locally.

Dependencies

• @reduxjs/toolkit: For state management.
• @stripe/react-stripe-js and @stripe/stripe-js: For Stripe payment integration.
• react and react-dom: Core libraries for building the user interface.
• react-medium-image-zoom: For image zoom functionality.
• react-redux: For integrating Redux with React.
• react-router-dom: For client-side routing.
• sonner: For toast notifications.
• swiper: For implementing product image sliders.

DevDependencies

• @eslint/js: ESLint configuration.
• @types/react and @types/react-dom: TypeScript types for React.
• @vitejs/plugin-react: Vite plugin for React support.
• autoprefixer and postcss: For processing CSS.
• eslint: Linting tool for identifying and fixing code issues.
• eslint-plugin-react-hooks and eslint-plugin-react-refresh: ESLint plugins for React hooks and React Refresh.
• tailwindcss: Utility-first CSS framework for styling.
• typescript: TypeScript compiler.
• vite: Build tool and development server.

Usage

Ensure you have all environment variables configured if needed (e.g., for API endpoints). Start the development server and begin building or customizing the client side of the application.