GBouffard / package-delivery-scheduler

a simple 1-pager webpage for recipients to see what time their package is scheduled to arrive.

📦 Package delivery scheduler 📦

This is Guillaume's package delivery scheduler: a simple 1-pager webpage for recipients to see what time their package is scheduled to arrive.

• The Map section uses Google Maps.
• the marker is shown at the correct address.
• Changing delivery time and subscribing to notifications are just mock ups for now.
• The user is able to add notes to the delivery.

Deployed Link (Github Pages):

Guillaume's Package delivery scheduler

How to run it locally:

git clone [e-mail]:GBouffard/package-delivery-scheduler.git
cd package-delivery-scheduler
npm install

You then will need to add your Google Map api key with the environment variables.

touch .env && echo \"REACT_APP_GOOGLE_MAP_API_KEY=''\" > .env
// then open .env with your editor and enter the value of your google map APi key
npm start

Technologies used:

• JavaScript
• ES6
• Create-react-app
• React
• React-DOM
• Sass
• Flexbox
• Font-Awesome
• Google Maps React
• React Geocode

previews:

Desktop:

Mobile:

How to change the delivery address:

So far restrictions have been added to the selected delivery locations - address autocomplete is not available yet. You can change the location this way:

• Click on the delivery address
• A dropdown meny with a list of known address will open
• select one of the address.
• Geocode will update coordinates and Google map will load the new map in its center