Table of Contents
The Delivery Job Generator allows the user to create a delivery job by choosing pick up and drop off addresses. It leverages the Google Maps JavaScript API to load Google Maps positioned at Paris, France.
Addresses introduced by the user are geocoded by sending a request to a private API. If they are valid, a request to the Google Maps JavaScript API adds map markers to the chosen addresses.
When the user clicks on "Create a job", another request to the private API is sent to create the delivery job. If the request is successful, the form is reset, the map markers removed, and a toaster is displayed to notify the user.
- Install Node.js
- Install Git
- Create a project in the Google Cloud Console, enable the Maps JavaScript API and get an API key. This tutorial from the Google Maps Platform documentation will set you up and running!
-
Clone the repo
git clone https://github.com/lauraferrandof/delivery-job-generator.git
-
Install dependencies
npm run deps:install
Or
yarn deps:install
-
Create a
.envfile by duplicating the.env_samplefile and add your API key and URL:API_KEY = YOUR_API_KEY API_URL = YOUR_API_URL
The current project relies on a private GraphQL API. I'm planning on implementing my own API to make this project really usable by other people. In the meantime, you're free to implement your own :)
To start the webpack dev server, run:
npm run startOr
yarn startThe current private API only accepts two valid addresses (case insensitive):
- Pick up address ➡ 29 Rue du 4 Septembre
- Drop off address ➡ 15 Rue de Bourgogne
-
build: executes webpack. WARNING: the current webpack config is not optimized for production. -
deps:install: installs dependencies with Yarn. -
eslint: executes ESLint. -
start: launches the webpack dev server, configured with Hot Module Replacement. -
stylelint: executes Stylelint.
- React architecture (loosely) based on file type.
- Sass architecture based on the 7-1 pattern.
- ESLint configuration based on the Airbnb JavaScript Style Guide.
- Due to the private nature of the API used to geocode and post the delivery job, the project is not ready to be deployed to production, therefore only development webpack config was created.
- The project was bootstraped with a personal template I created. The template is a work in progress, so I had to make some modifications as I worked through the project.
- Geocode the addresses once the user stops typing
- Make the toaster disappear automatically after a few seconds
- Implement a state reducer for state management (either with React Hooks or with Redux)
- Add tests with Jest and Testing Library
- Improve loading experience
- Add error screen
- Performance and accessibility checks
- Create a pipeline with GitHub Actions
- Add CSS transitions and animations
- Refactor to TypeScript
- Implement a custom GraphQL API
Any contributions you make are greatly appreciated!
- Fork the project
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'add an amazing feature') - Push to the branch (
git push -u origin feature/amazing-feature) - Open a pull request against the parent project
Or open an issue if you spot a bug :)
Distributed under the MIT License. See LICENSE for more information.
Laura Ferrando Ferrero - LinkedIn - lauraferrandof@gmail.com