Vehicle Tracking Dashboard Using MERN Stack

Project Overview

The Vehicle Tracking Dashboard Using MERN Stack is a web-based application designed to monitor vehicles, manage fleet information, visualize vehicle locations and analyze vehicle performance through an interactive dashboard.

The project uses React.js for the frontend, Node.js and Express.js for backend development, and MongoDB for storing vehicle information and tracking history. Leaflet and OpenStreetMap provide interactive maps, Recharts displays analytics, and Socket.IO supports real-time communication between the server and connected clients.

The application provides separate Admin and Viewer roles. Administrators can manage vehicle records, while Viewers can access monitoring information without modifying or deleting vehicles.

Available Features

1. Admin Dashboard

• View total vehicles and active vehicle counts.
• Monitor average speed and recorded distance.
• Review vehicle activity through dashboard charts.
• Navigate between tracking, vehicle management, analytics and alerts.
• View statistics generated from actual database records.

2. Vehicle Management

• Add, view, edit and delete vehicle records.
• Store vehicle ID, name, registration number, driver and vehicle type.
• Search and filter vehicles by status or vehicle information.
• Sort records by vehicle ID, speed, status, distance and last update.

3. Interactive Vehicle Tracking

• Display vehicle markers on a Leaflet map using OpenStreetMap tiles.
• View vehicle coordinates, speed and last update time.
• Distinguish active, inactive and offline vehicles using different marker colors.
• Receive vehicle information updates through Socket.IO.
• Store location history with timestamps and data-source information.

4. Analytics and Reports

• Compare current vehicle speeds using charts.
• View stored location activity and distance summaries.
• Identify vehicles exceeding the configured speed limit.
• Identify offline vehicles that may require attention.
• Download available vehicle records as CSV reports.

5. Authentication and Security

• JWT-based user authentication.
• Separate Admin and Viewer permissions.
• Protected API routes and request validation.
• Environment-based configuration for database connections and application secrets.

Administrator Workspace

Administrators can manage vehicle records, review dashboard statistics, monitor fleet activity, inspect alerts and export vehicle reports. The dashboard provides an overview of vehicle status, speed, distance and recorded movement information.

Viewer Workspace

Viewers can access vehicle monitoring information without permission to modify or delete vehicle records. This role is suitable for read-only access to tracking maps, vehicle details and available monitoring information.

Interactive Map and Location History

The tracking interface uses Leaflet and OpenStreetMap to display vehicle markers and their recorded coordinates. Location history includes timestamps and information about the data source, helping users distinguish simulated movement from other location data.

Real-Time Communication

Socket.IO enables the backend to send vehicle updates to connected clients. This allows the dashboard to reflect incoming vehicle information without relying solely on manual page refreshes.

GPS Configuration and Limitations

The supplied project includes simulated vehicle movement for development and testing. Simulated coordinates are not genuine live GPS data. Real vehicle tracking requires a trusted GPS device or provider API, authenticated incoming data, coordinate validation and appropriate backend integration.

Technology Stack

• Frontend: React.js, JavaScript and CSS
• Backend: Node.js and Express.js
• Database: MongoDB
• Database ODM: Mongoose
• Mapping: Leaflet and OpenStreetMap
• Charts: Recharts
• Real-Time Communication: Socket.IO
• Authentication: JSON Web Tokens (JWT)

Software Requirements

• Node.js and npm
• MongoDB or MongoDB Atlas
• Visual Studio Code
• A modern web browser
• Internet access for OpenStreetMap tiles

Installation and Execution

Extract the project ZIP file and open the vehicle-tracking-dashboard folder in Visual Studio Code. Configure the backend environment variables, install dependencies and start the backend server.

Configure the Backend

cd server
copy .env.example .env
npm install

Open server/.env and configure the MongoDB connection and JWT secret. Ensure MongoDB is running if you are using a local database.

Start the Backend Server

npm run dev

The backend normally runs at http://localhost:5000. It initializes demo users and sample vehicles when the database is empty.

Install and Start the Frontend

Open a second VS Code terminal and run:

cd client
copy .env.example .env
npm install
npm run dev

Open http://localhost:5173 in your browser.

Development Login Credentials

The project documentation provides the following development Admin credentials:

• Email: admin@updategadh.local
• Password: Admin@12345

Viewer credentials are provided in the project README. Change default credentials and application secrets before any production deployment.

Project Applications

• Fleet monitoring and vehicle record management.
• Vehicle location visualization.
• Speed and distance analysis.
• Offline vehicle and speed-limit alerts.
• Real-time dashboard development.
• Full-stack MERN development and mapping integration.

More Details and Full Documentation

View Vehicle Tracking Dashboard Using MERN Stack Details