Table of Contents
This is a simplified delivery fee calculator. Users can type in the value of products, the distance of the delivery, the total number of products, and finally the favourable order time, to calculate the fee for delivering all the products. Users also have the chance to change the data if needed before calculating the final fees.
The calculator follows the following rules when calculating the fee:
- If the cart value is less than 10€, the difference between the cart value and 10€ is added as a surcharge.
- All orders within 1000 meters are charged a basic delivery fee of 2€. An additional 1€ is charged for every additional 500 meters. Additional distances less than 500 meters are rounded up and counted as full 500 meters.
- If there are five or more items, each item above and including the fifth one is charged 50 cents. If the total number of items is more than 12, a separate 1,2€ is charged in addition to the surcharge for each item.
- For orders whose order time is between 3 p.m. and 7 p.m. on Friday, the total fee is multiplied by 1.2.
- The maximum possible delivery fee is 15€.
- All orders with a cart value of more than 200€ enjoy free delivery.
When first loaded, the user is prompted to the front page to type in information. Note that the submit button is disabled at first. It will automatically be enabled once all input fields have received proper inputs. 
After clicking the submit button, the user is prompted to confirm the input or cancel and re-enter the information.
If the user chooses to confirm the order, a new page will show up with the confirmed information and the final delivery fee. The user can then choose to return to the front page by pressing the return button.
This project is deployed on Render. Note: The website is deployed using a free CPU thus it will take some time for the page to load! However, you could still try it locally. There are two options to deploy the project locally. You can use the Docker image provided in this project. It is also possible to try out the project without Docker. This project follows the Test-driven Development (TDD) practice. There are different types of tests in the project. Detailed instructions on how to run them are provided later.
In order to run this project locally, Node.js is needed. Please have a look at the official website and install the latest LTS version Node 20. The Docker file provided has Node configured. Therefore, if you choose to use Docker, it is required that you have Docker additionally installed on your machine. To install Docker, please have a look at the official installation guide at Get Docker.
-
Make sure that you have successfully installed Docker on your machine and that it can work properly. If this is not possible, please skip to Using own machine.
-
At the root directory, run the following command to start the web page
docker compose -f docker-compose.yml up --build
The command will build an image and a container to run the webpage. Please note that the build process may take some time. Once the build process is finished, you should see information like the following appears in the terminal:
INFO Accepting connections at http://localhost:3000
After the aforementioned message has appeared, you can open the webpage at http://localhost:5173.
-
After you've finished using the webpage, please use
Ctrl+cin the same terminal that docker is running to stop the container.
-
At the root directory, install all the dependencies used in this project
npm install
-
Method 1 Run the project with
npm run build
After the build has finished, run the following command
npm run preview
You should see messages like this after some time
vite preview
-> Local: http://localhost:4173
After you've seen this message, you can view the web page at http://localhost:4173. This is a preview of the production version of the webpage.
After you've finished trying the webpage, use
Ctrl+cin the terminal to stop the webpage.Method 2 Run the project with
npm start
You should see something similar to this in your terminal:
VITE v5.0.12
->Local: http://localhost:5173
After seeing this message, you can open the webpage at http://localhost:5173. This method shows the development version of the webpage. After you've finished trying the webpage, use
Ctrl+cin the terminal to stop the webpage.
-
If you've previously used Docker, first use the following command at the root directory to install all packages
npm install
-
To run all the tests for this project, use
npm run test
-
At the root directory, run
npm install
if hasn't been done before to install all the packages needed
-
Start the webpage according to the method chosen.
Docker:
docker compose -f docker-compose.yml up
Own machine:
npm start
Make sure that the webpage is actually running before moving on to the next step
-
If you prefer to use a UI for the e2e tests, in a new terminal at the root directory, run
npm run cypress:open
This command will prompt a window similar to the following one:
Choose E2E testing and choose one of the browsers listed on the next page. After the selection, the next page should look similar to the following:
Choose the test file to start running the e2e tests.Alternatively, in a new terminal under the same root directory, run
npm run cypress:run
to run all the e2e tests in the terminal.
See the change log for a full list of changes.
See the reflection for a reflection on the project, including technology choices, experience, and possible improvements.
Distributed under the MIT License. See LICENSE.txt for more information.
Chen Wang - wang.756090@gmail.com
- This project uses the material provided in Wolt's media kit.