Challenge Overview
Overview
We're continuing development for the Drone DSP. Next on the agenda, we'll start building React components. We recently worked with the community to "slice up" the design into a set of expected components. You can see the marked up version here:
https://topcoderinc.github.io/dsp-docs/
As this will be our very first React component for the project, in this challenge we'd like to build the components on a single page (04_Service-Request in the design).
These are our first steps with creating React components for this application. Part of our goal in this challenge is to learn from the process so that we can figure out the best approach to build React applications with the crowd. Please discuss any and all things at will in the forums so we can learn from you and streamline the process, we're looking for your feedback since we have so many of these components to build.
Detailed Instructions
View the page (04_Service-Request in the design) and note the components outlined visually
Note the Component Structure at the bottom of the page
Create each of the components shown on the page (and in the structure at the bottom)
You have two options as to how to display your newly created components
Option 1: Create a new, standalone project using react-create-app, and display a single page showing the new React components.
Option 2: Start with the existing DSP front-end code and add a new menu item, which links to the newly created page, displaying the newly created React components.
Additional Notes
For the map, you can simply use the Google API to show the user's current location
For Contact Details and Estimated Amount to Pay you can simply make these expand to show a textbox for user input.
For the ServiceDetail component (which contains the Cancel and Send Request buttons), when the user clicks the Send button, use an alert box to display the form data as a JSON object (note: this will be wired to the API soon). When the click the Cancel button, clear the form.
For this challenge, you can skip the DroneCurrentLocation component (no need to draw any paths on the map).
You do need to create the MapLegends component.
Final Submission Guidelines
Submission Guidelines
Please submit a zip file as your submission
Please include a deployment guide (or update the existing deployment guide if you're building off the existing DSP front-end application)
No video necessary