RoutePulse | Smart Transport Operations Platform

RoutePulse is a complete production-ready Full Stack web application designed to digitize fleet logistics operations, featuring vehicle tracking, driver safety scoring, step-by-step dispatch workflows, maintenance registries, fuel logs, expense aggregations, and live coordinate map previewing.

---

Technical Architecture Stack

• Frontend: React 19, Vite, TypeScript, Tailwind CSS, React Router DOM, TanStack Query, Axios, React Hook Form + Zod, Recharts (analytics graphs), React Leaflet (mapping), Socket.IO client, Lucide Icons.
• Backend: Node.js, Express.js, TypeScript, PostgreSQL, Prisma ORM, JWT Authentication + RBAC access guards, Nodemailer, Socket.IO, Multer, Express Validator, Swagger API docs.
• DevOps: Docker & Docker Compose setup.

---

Quick Start (Local Run Setup)

Database Configuration

Ensure a PostgreSQL server is running. Create a database called RoutePulse. Update the database connection details in backend/.env.

1. Run Backend Server

cd backend
npm install
npx prisma generate
npx prisma db push
npx prisma db seed
npm run dev

• The server will start at: http://localhost:5000
• Swagger documentation is available at: http://localhost:5000/api-docs

2. Run Frontend Dashboard

cd frontend
npm install
npm run dev

• The client application will start at: http://localhost:5173

---

Running with Docker (Recommended)

You can build and spin up the entire stack (Postgres + Express API + React App) using Docker:

docker-compose up --build

Vite React will bind to http://localhost:5173 and Express API to http://localhost:5000.

---

Seed Accounts & Mock Testing

The system seeds the database with the following demo user credentials:

Email	Password	Role / Access Rights
admin@routepulse.com	admin123	Admin (Full settings, profiles & deletion actions)
manager@routepulse.com	manager123	Fleet Manager (Service logs, asset registrations)
dispatcher@routepulse.com	dispatch123	Dispatcher (Schedule and route dispatch dispatches)
driver1@routepulse.com	driver123	Driver (View assigned routes, log fuel refills)

---

Hackathon Workflow Demonstration Steps

1. Operator Log In: Access http://localhost:5173 and log in as dispatcher@routepulse.com.
2. Verify Assets: Navigate to Vehicles and Drivers to review compliance. Observe status badges (Available, OnTrip).
3. Schedule Dispatch:
   • Navigate to Trips Dispatch and click Schedule Trip.
   • Select an available truck (e.g. Volvo VNL) and available driver (e.g. John Doe).
   • Set destination and cargo weight. Note: Setting a cargo weight greater than the vehicle max capacity will trigger safety errors.
   • Click Schedule Dispatch.
4. En-Route Simulation:
   • Click Dispatch on the newly scheduled trip. This marks the vehicle and driver as OnTrip en-route.
   • Go to Live Map and click Start GPS Log Simulation.
   • Watch the vehicle marker shift positions on the Leaflet map in real-time, receiving movements via Socket.IO.
5. Finish Trip & Audits:
   • Go back to Trips page and click Complete.
   • Enter the final odometer reading and the fuel consumed.
   • Navigate to Fuel Management and Expenses to see the automatically generated fuel costs and trip revenues listed in the financial ledger.
   • Open Analytics Reports to verify double-bar ROI graphs, efficiency curves, and click Export CSV to download standard spreadsheets.

---

Production Deployment & Build

To deploy RoutePulse in a production environment, follow these build and environment guidelines.

1. Build and Preview Locally

Frontend

cd frontend
npm install
npm run build     # Compiles TS and builds optimized static assets to dist/
npm run preview   # Serves the production build locally at http://localhost:4173 for preview

Backend

cd backend
npm install
npm run build     # Generates Prisma client and compiles TS to dist/
npm run start     # Starts the compiled production server

2. Frontend Deployment (e.g., Vercel / Netlify)

Deploy the frontend subdirectory. The build command, output directory, and routing are pre-configured:

• Build Command: npm run build
• Output Directory: dist
• Routing rewrite: Handled automatically in vercel.json (rewriting all requests to /index.html to support React Router client-side routing).
• Environment Variables:
  • VITE_API_URL: The base HTTPS API URL of your deployed backend (e.g., https://RoutePulse-backend.render.com/api).
  • VITE_SOCKET_URL (Optional): The base WebSocket URL of your backend (e.g., https://RoutePulse-backend.render.com). If not set, it will be automatically derived from VITE_API_URL.

3. Backend Deployment (e.g., Render / Railway)

Deploy the backend subdirectory. Render Blueprint setup is preconfigured in render.yaml.

• Prisma Client Generation: The build command automatically triggers prisma generate prior to running the TypeScript compiler (tsc).
• Persistent Storage for SQLite: Because the app uses SQLite, make sure to mount a persistent disk (configured automatically to /data in render.yaml with database path set to file:/data/dev.db). This ensures your records are not wiped during deployments or container restarts.
• Environment Variables:
  • PORT: 5000 (or the port defined by host)
  • NODE_ENV: production
  • DATABASE_URL: file:/data/dev.db (or path to your SQLite database)
  • JWT_SECRET: A long, secure random string for JWT access signing.
  • JWT_REFRESH_SECRET: A long, secure random string for JWT refresh signing.
  • FRONTEND_URL: The HTTPS URL of your deployed frontend client (e.g., https://RoutePulse.vercel.app), used to construct password reset links.
  • SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS (Optional): SMTP mailer configs for password reset actions.