HaulTrackr is a full-stack application designed to help truck drivers plan optimal routes and manage Electronic Logging Device (ELD) logs, ensuring compliance with Hours of Service (HOS) regulations. The system integrates a React frontend for user interaction and a Django backend for route planning, log generation, and compliance logic.
Deployed Frontend: https://haultrackr.onrender.com
Deployed Backend: https://haultrackr-fullstack.onrender.com/api
haultrackr-fullstack/
├── apps/
│ ├── backend/ # Django backend application
│ │ ├── eld_logs/ # ELD logs management
│ │ ├── route_planner/ # Route planning and optimization
│ │ ├── users/ # User authentication and management
│ │ └── haultrackrbackend/ # Main Django project configuration
│ │
│ ├── frontend/ # React frontend application
│ │ ├── src/
│ │ │ ├── components/ # Reusable UI components
│ │ │ ├── pages/ # Page components
│ │ │ ├── lib/ # Utility functions and libraries
│ │ │ ├── types/ # TypeScript type definitions
│ │ │ └── App.tsx # Main application component
│ │ └── ...
│ │
│ └── frontend-e2e/ # End-to-end tests
│
├── .github/ # GitHub configuration
├── .vscode/ # VS Code settings
├── node_modules/ # Frontend dependencies
├── venv/ # Python virtual environment
├── .gitignore # Git ignore file
├── package.json # Frontend dependencies
├── pnpm-lock.yaml # Lock file for pnpm
├── README.md # This file
└── tsconfig.base.json # TypeScript configuration
- Route Planning: Calculates optimal truck routes using the OpenRouteService API, factoring in HOS rules, rest stops, and fuel stops.
- ELD Log Generation: Automatically generates HOS-compliant ELD logs and visual log sheets for each trip.
- Trip Management: Allows users to create, view, and manage multi-day trips.
- Rest & Fuel Stop Optimization: Plans required rest and fuel stops along the route.
- Authentication: Secure user registration and login with JWT-based authentication.
- Interactive UI: Modern React frontend with map visualization, trip forms, and log sheet display.
- User Authentication: Secure user registration and login system
-
Frontend:
- React with TypeScript
- Vite for build tooling
- React Router for navigation
-
Backend:
- Django REST Framework
- SQLite database (default)
- JWT authentication
- Modular architecture with separate apps for different features
-
API Docs:
- Swagger and ReDoc available at
/swagger/and/redoc/on the backend server
- Swagger and ReDoc available at
- Node.js (v14 or later)
- Python (3.8 or later)
- pnpm (package manager)
-
Clone the repository:
git clone https://github.com/bridgitkanini/haultrackr-fullstack.git cd haultrackr-fullstack -
Set up Python virtual environment:
python -m venv venv source venv/bin/activate # On Windows: .\venv\Scripts\activate
-
Install Python dependencies:
cd apps/backend pip install -r requirements.txt -
Set environment variables:
- Create a
.envfile or set the following variables in your shell:SECRET_KEY(if overriding default)ORS_API_KEY(for OpenRouteService, if used)- Any other API keys or secrets
- Create a
-
Apply migrations:
python manage.py migrate
-
Start the development server:
python manage.py runserver
The API will be available at http://127.0.0.1:8000/api/
-
Access the API and documentation:
- API root: http://127.0.0.1:8000/api/
- Swagger: http://127.0.0.1:8000/swagger/
- ReDoc: http://127.0.0.1:8000/redoc/
-
Install dependencies using pnpm:
pnpm install
-
Start the development server:
pnpm start
The frontend will be available at http://localhost:4200.
POST /api/auth/register/— Register a new userPOST /api/auth/login/— User loginPOST /api/auth/refresh/— Refresh authentication token
GET /api/trips/— List all trips for the authenticated userPOST /api/trips/— Create a new tripGET /api/trips/{id}/— Get trip detailsPUT /api/trips/{id}/— Update a tripDELETE /api/trips/{id}/— Delete a trip
GET /api/eld-logs/— List all ELD logsPOST /api/eld-logs/— Create a new ELD log entryGET /api/eld-logs/{id}/— Get log detailsGET /api/eld-logs/trip/{trip_id}/— Get logs for a specific trip
GET /api/users/me/— Get current user profilePUT /api/users/me/— Update user profile
For detailed API documentation, run the development server and visit:
- API root: http://127.0.0.1:8000/api/
- Admin interface: http://127.0.0.1:8000/admin/ (requires superuser)
✨ Your new, shiny Nx workspace is almost ready ✨.
Run npx nx graph to visually explore what got created. Now, let's get you up to speed!
Click here to finish setting up your workspace!
To run tasks with Nx use:
npx nx <target> <project-name>For example:
npx nx build myprojectThese targets are either inferred automatically or defined in the project.json or package.json files.
More about running tasks in the docs »
While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.
To install a new plugin you can use the nx add command. Here's an example of adding the React plugin:
npx nx add @nx/reactUse the plugin's generator to create new projects. For example, to create a new React app or library:
# Generate an app
npx nx g @nx/react:app demo
# Generate a library
npx nx g @nx/react:lib some-libYou can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.
Learn more about Nx plugins » | Browse the plugin registry »
Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
Learn more:
And join the Nx community: