search

atlp-rwanda / dynamites-ecomm-fe

https://dynamites-ecomm-fe.netlify.app/
0 stars 0 forks source link

Feat: implementation of landing page banner section #31

Open Dawaic6 opened 1 week ago

Dawaic6 commented 1 week ago

Description

We need to create a UI the banner section of the landing page using React, Redux, and Tailwind CSS. The banner section will consist of two advertisements: one for quality eggs and another for snacks.

Tasks

  1. Basic Components:

    • [ ] Create a ProductCard component to display advertisement details.

    • [ ] Create a ProductsList component to map over product data and render multiple ProductCard components.

  2. Dynamic Data:

    • [ ] Fetch advertisement data from the Redux store in BannerSection.
    • [ ] Ensure ProductCard displays data dynamically from the Redux state.

  3. Styling and Responsiveness:

    • [ ] Apply Tailwind CSS to match the design.
    • [ ] Ensure the layout is responsive.

  4. Code Review and Testing:

    • [ ] Review code for best practices and readability. [ ] Test the application to ensure all components render correctly and interact as expected.

Definition of Done

Dawaic6 commented 1 week ago

Implementation Plan

Description: The banner section of the landing page using React, Redux, and Tailwind CSS. The banner section will consist of two advertisements: one for quality eggs and another for snacks.

Task :

Day 1:(20th/06/2024)

Create Components: -ProductCard : Create ProductCard component with title, description, image, button text and Apply Tailwind CSS. -BannerSection: Create BannerSection component ,Import and integrate ProductCard for two ads and Apply Tailwind CSS Setup Redux -Store and Actions: Setup Redux store and actions ,Create store.js ,Define state and reducer for ads and Implement actions for fetching/updating ads -Integrate Redux: Connect Redux to React ,Wrap App with Provider and Use useSelector and useDispatch in BannerSection

Day 2(21/06/2024)

Dynamic Data Handling -[ ] Fetch ad data in BannerSection, Dispatch action on mount and Map data to ProductCard components Styling and Responsiveness -[ ] Apply Tailwind CSS ,Style ProductCard and BannerSection and Ensure responsive layout

Day 3(22/06/2024)

Integration -[ ] Add BannerSection to landing page and Import and include BannerSection in App.js Review and Testing -Code Review Review and refactor code -Testing Test components and app functionality

Definition of Done