A full-stack route planning and fuel optimization application built with React + Vite on the frontend and Django REST Framework on the backend.

The application helps commercial drivers plan trips by calculating routes and generating optimized fuel stop recommendations while considering vehicle constraints such as fuel efficiency and driving range.

https://eld-route-planner-murex.vercel.app/

https://samavi96.pythonanywhere.com/api/

The ELD Route Planner simulates an Electronic Logging Device (ELD) workflow for commercial transportation.

Users provide:

• Current location
• Pickup location
• Dropoff location
• Current driving cycle usage

The system processes the trip and returns an optimized route plan with fuel stop recommendations.

The optimization logic focuses on:

• Keeping the vehicle within its maximum driving range
• Selecting suitable fuel stops
• Minimizing fuel expenses
• Providing a practical trip plan for drivers

 User
 |
 |
 v
 React Frontend (Vite)
 Hosted on Vercel
 |
 |
 REST API Calls
 |
 |
 v
 Django REST Framework Backend
 Hosted on PythonAnywhere
 |
 |
 ------------------
 | |
 v v
 Trip Management Fuel Optimization
 API Logic
 |
 v
 Database

Users can submit:

• Current location
• Pickup location
• Dropoff location
• Current cycle usage

The backend creates and processes the trip request.

The application determines suitable fuel stops based on:

• Route distance
• Vehicle fuel economy
• Fuel requirements
• Available fuel stations
• Fuel prices

The goal is to produce a cost-efficient and feasible trip plan.

The frontend provides an interactive interface for viewing trip information and optimized results.

The application is deployed using:

Frontend:

• React
• Vite
• Vercel

Backend:

• Django
• Django REST Framework
• PythonAnywhere

• React 19
• Vite
• JavaScript
• Leaflet
• React Leaflet
• Tailwind CSS
• Framer Motion

• Python
• Django 6
• Django REST Framework
• SQLite
• django-cors-headers

eld-app/
├── eld_backend/
│
│ ├── manage.py
│ ├── requirements.txt
│ ├── db.sqlite3
│ │
│ ├── eld_backend/
│ │ ├── settings.py
│ │ ├── urls.py
│ │ └── wsgi.py
│ │
│ └── trips/
│ ├── models.py
│ ├── serializers.py
│ ├── views.py
│ └── urls.py
│
│
└── frontend/
 │
 ├── package.json
 ├── vite.config.js
 │
 └── src/
 ├── api.js
 ├── App.jsx
 └── components/

Clone the repository:

git clone https://github.com/samavinasir/eld-route-planner.git

Navigate to backend:

cd eld_backend

Create virtual environment:

python -m venv venv

Activate environment:

venv\Scripts\activate

source venv/bin/activate

Install dependencies:

pip install -r requirements.txt

Apply migrations:

python manage.py migrate

Start development server:

python manage.py runserver

Backend will run at:

http://localhost:8000

Navigate to frontend:

cd frontend

Install dependencies:

npm install

Create environment file:

.env

Add:

VITE_API_URL=http://localhost:8000/api

Start React development server:

npm run dev

Frontend will run at:

http://localhost:5173

Creates a new trip and generates an optimized route plan.

POST /api/trips/

Production URL:

https://samavi96.pythonanywhere.com/api/trips/

Example:

{
 "current_location": "Los Angeles, CA",
 "pickup_location": "Dallas, TX",
 "dropoff_location": "New York, NY",
 "current_cycle_used": 0
}

Example:

{
 "id": 1,
 "current_location": "Los Angeles, CA",
 "pickup_location": "Dallas, TX",
 "dropoff_location": "New York, NY",
 "fuel_stops": [],
 "total_distance": 2987.5
}

GET /api/trips/<id>/

Example:

https://samavi96.pythonanywhere.com/api/trips/1/

File:

frontend/.env

Example:

VITE_API_URL=https://samavi96.pythonanywhere.com/api

Important Django settings:

SECRET_KEY
DEBUG
ALLOWED_HOSTS
CORS_ALLOWED_ORIGINS

Production example:

ALLOWED_HOSTS = [
 "samavi96.pythonanywhere.com"
]
CORS_ALLOWED_ORIGINS = [
 "https://eld-route-planner-murex.vercel.app"
]

Run:

python manage.py check

Expected:

System check identified no issues.

Using Postman:

Method:

POST

URL:

https://samavi96.pythonanywhere.com/api/trips/

Headers:

Content-Type: application/json

Body:

{
 "current_location": "Los Angeles, CA",
 "pickup_location": "Dallas, TX",
 "dropoff_location": "New York, NY",
 "current_cycle_used": 0
}

Deployment steps:

1. Upload or clone repository
2. Create virtual environment
3. Install requirements
4. Configure WSGI file
5. Run migrations
6. Configure allowed hosts and CORS
7. Reload web application

Deployment steps:

1. Connect GitHub repository
2. Select frontend directory
3. Choose Vite framework
4. Add environment variable:

VITE_API_URL=https://samavi96.pythonanywhere.com/api

5. Deploy

Build command:

npm run build

Output directory:

dist

Add application screenshots here:

screenshots/
├── homepage.png
├── trip-input.png
├── route-results.png
└── map-view.png

Possible improvements:

• PostgreSQL production database
• Authentication and user accounts
• Driver dashboard
• Trip history
• Real-time fuel price updates
• Improved map visualization
• Cloud-based background processing
• More advanced optimization algorithms

Samavi Nasir

Full Stack Developer | AI Engineer & Bioinformatics Developer

GitHub:

https://github.com/samavinasir96

This project was developed as a full-stack technical assessment and portfolio project.