Delivery Fee Calculator

A modern, interactive web application for calculating delivery fees based on cart value, distance, number of items, and time of delivery. Built with React, TypeScript, and Framer Motion for smooth animations.

Features

• Real-time Fee Calculation: Instantly calculate delivery fees based on multiple factors
• Rush Hour Pricing: Automatic 20% surcharge for Friday deliveries between 3-7 PM
• Responsive Design: Works seamlessly on desktop and mobile devices
• Smooth Animations: Beautiful UI transitions powered by Framer Motion
• Type-Safe: Built with TypeScript for better code quality and developer experience
• Comprehensive Testing: Full test coverage with Jest and React Testing Library

Delivery Fee Rules

Base Fee

• €2 base fee for all deliveries

Cart Value Surcharge

• If cart value < €10, add €2 surcharge
• If cart value < €10 and exactly 4 items, €2 surcharge only
• Free delivery for cart value ≥ €100

Item Surcharge

• €0.50 per item for orders with more than 4 items
• Additional €1.20 bulk fee for orders with more than 12 items

Distance Fee

• €1 per 500m beyond the first 1000m
• Maximum delivery fee capped at €15

Rush Hour

• 20% surcharge on Fridays between 15:00-19:00 (3 PM - 7 PM)

Tech Stack

• Frontend: React 18.3.1
• Language: TypeScript 5.9.3
• Styling: CSS with animations
• Animations: Framer Motion 12.25.0
• Icons: React Icons 5.3.0
• Build Tool: Create React App
• Testing: Jest, React Testing Library
• Package Manager: npm

Installation

1. Clone the repository:

git clone https://github.com/gq23401/delivery-fee-app.git
cd delivery-fee-app

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 in your browser.

Usage

1. Enter the cart value in euros
2. Input the delivery distance in meters
3. Specify the number of items in the cart
4. Select the day of the week (0=Sunday, 6=Saturday)
5. Enter the delivery hour (0-23)
6. Click "Calculate Delivery price" to see the result

Testing

Run the test suite:

npm test

Run tests in watch mode:

npm test -- --watchAll=false

Building for Production

npm run build

This creates an optimized production build in the build folder.

Project Structure

src/
├── App.css              # Main styles
├── App.tsx              # Main application component
├── App.test.tsx         # App component tests
├── index.tsx            # Application entry point
├── reportWebVitals.ts   # Performance monitoring
├── types/
│   └── index.ts         # TypeScript type definitions
└── utilityFunctions.ts  # Business logic functions
    └── utilityFunctions.test.ts # Utility function tests

API Reference

getSurCharge(cartValue: number, cartCount: number): number

Calculates the base surcharge based on cart value and item count.

cartQuantity(cartCount: number): number

Calculates additional fees for items beyond the threshold.

splitDist(distance: number, cartValue: number, cartCount: number): number

Main function that calculates the total delivery fee including all factors.

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes and add tests
4. Run tests: npm test
5. Commit your changes: git commit -am 'Add feature'
6. Push to the branch: git push origin feature-name
7. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built as a demonstration of modern React development practices
• Inspired by real-world delivery fee calculation systems
• Uses open-source libraries and tools

Last updated: March 15, 2026

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