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,
};