hew / react-delivery-app-exercise_matt-jones

Foodee Delivery App Assignment

You're an up and coming delivery logistics company and you are tasked with creating an app for your drivers so that your company can track their progress throughout the delivery.

Your Task

Create a "proof of concept" app using React for how the delivery app should function for a given driver. A data model is provided for you, an no tracking of the driver is required, the app should focus mostly on how a driver will interact with the deliveries.

Main Requirements

• For a given day, list each delivery objects in a card component that you'll make
• Each card should have:
  • pickup time if it hasn't been picked up
  • delivery time if it has been picked up
  • client
  • the restaurant
  • the delivery address
  • the pickup address
  • the total number of items
  • A call to action (button perhaps) to move the delivery to the next state

Secondary Requirements

• The driver should be able to navigate to a delivery summary view and see more details, including all the items that need to be picked up. The call to action to move the delivery to the next state should exist in this view as well.
• When the delivery is in at_restaurant state, make the list of order items a set of checkboxes, to prompt the driver to check off each item before allowing them to move to the next state.
• Make sure that when the app is restarted that the state maintained

Bonus Requirements

• Allow the driver to see future days, so they can confirm that they will take deliveries. Do not let the driver move the deliveries past driver_confirmed state.
• Allow the driver to punch out to google / apple maps by touching the address.

Considerations

• Don't focus too much on making this look great, it's a POC we want to see it function as quickly as possible
• Consider using a router, such as React Router to help facilitate drilling into each of the cards
• Make sure that the list of deliveries is sorted in a way that makes sense for the driver, either by pickup time or delivery time. It may make sense to switch how each delivery gets sorted after the order gets picked up, or perhaps by grouping orders that need pickup / delivery together.
• Consider assigning a color to the card depending on whether it's been picked up or not, the drivers might have a lot of deliveries in a short amount of time, and this can help them differentiate pickups from dropoffs.
• The text in the call to action / button should be driven off the state of the order, come up with good names for each of the states that indicate what the driver needs to do to get to the next state. (e.g scheduled: "Confirm", driver_confirmed: "Arrived at Restaurant"... etc)

States

• scheduled - This means the delivery has been scheduled to a driver but the driver needs to accept the delivery
• driver_confirmed - This means the driver has accepted the delivery, they can accept deliveries at any time
• driver_at_restaurant - This means the driver has arrived at the restaurant
• picked_up - This means the driver has picked up the order
• driver_at_client - This means the driver is outside the client building
• delivered - This means the driver has delivered the food

What is Provided

This repo provides the example React app generated by the create-react-app . It is modified to demonstrate a simple way to fetch deliveries for the given day using local storage.

Fetching and Storing Delivery Objects

Delivery objects are randomly generated for you for a given day. You can fetch them by calling generateDelivery(dayDate) where dayDate can be any given day in the YYYY-MM-DD format. They are generated then stored in local storage.

For the purpose of this exercise in order to to save changes to the delivery object, you are required to save the entire day's worth of delivery objects using storeDelivery(dayDate, deliveries) where deliveries is the complete set of delivery objects for the day as you received them from the store.

moment.js is provided to help you display / format dates in the correct timezone.

Data Model

The following objects are defined in lib/deliveries.js

/**
 * @typedef Delivery
 * @type {object}
 * @property {string} id ID of the delivery
 * @property {string} client name of the client
 * @property {string} restaurant name of the restaurant
 * @property {string} pickupAt Pickup date & time of the delivery in ISO8601
 * @property {string} deliverAt Delivery date & time of the delivery in ISO8601
 * @property {string} state State the delivery is in
 * @property {string} pickupAdddress Pickup address of delivery
 * @property {string} deliveryAddress Delivery address of delivery
 * @property {OrderItems[]} orderItems Set of order items to pick up in the delivery
 * @property {string} timeZone Timezone the delivery is in
 */

/**
 * @typedef OrderItem
 * @type {object}
 * @property {string} id ID of the order item
 * @property {number} qty Quantity of order items
 * @property {string} description Description of the order item
 * @property {number} price Price in cents ($1 = 100 cents)
 */

An enum of all the states is exported for your convience. You can import it using:

import { DeliveryStates } from './lib/deliveries.js'

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify