Drone Market ReactJS Deployment Plans

00_Home

Component Structure

App
│───Header
└───Content
   └───MainBanner
   └───PopularDrones
      └───PopularDroneHeader
      └───PopularDroneSlider
         └───PopularDroneSliderItem
      └───PopularDronePagination
   └───PromotedService
      └───PromotedServiceHeader
      └───PromotedServiceItem
   └───TopDrones
      └───TopDronesHeader
      └───TopDronesItem
   └───BrowseServices
      └───BrowseServicesHeader
      └───BrowseServicesItem
   └───HowItWorks
   └───LastCompletedMissions
       └───LastCompletedMissionsHeader
       └───LastCompletedMissionsItem
└───Footer

PropTypes

-- PopularDroneSliderItem.jsx --
PopularDrone.propTypes = {
  items: PropTypes.array.isRequired
  total: PropTypes.number.isRequired
};

-- PopularDroneSliderItem.jsx --
PopularDroneSliderItem.propTypes = {
  sponsored: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  tooltips: PropTypes.string.isRequired,
  badge: PropTypes.bool.isRequired,
  completedjob: PropTypes.array.isRequired,
  rating: PropTypes.number.isRequired,
};

-- PromotedService.jsx --
PromotedService.propTypes = {
  sponsored: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  tooltips: PropTypes.string.isRequired,
  completedjob: PropTypes.array.isRequired,
  rating: PropTypes.number.isRequired,
};

-- BrowseServicesItem.jsx --
BrowseServicesItem.propTypes = {
  photo: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
};

-- LastCompletedMissionsItem.jsx --
BrowseServicesItem.propTypes = {
  route: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired,
  provider: PropTypes.string.isRequired,
  date: PropTypes.string.isRequired,
  location: PropTypes.string.isRequired,
};