Fleet Management System - Frontend (fmsystem_fe)

This repository contains the frontend source code for the Fleet Management System (FMS). It's a modern, responsive web application built with React that provides a user-friendly interface for real-time vehicle monitoring, data visualization, and management of fleet assets.

This application is designed to connect to the fmsystem_phx backend.

Key Features

• Interactive Dashboard: A central hub providing quick access to all major management sections.
• Live Vehicle Map: Real-time tracking of all vehicles on an interactive Leaflet map, powered by WebSockets via Phoenix Channels.
• Comprehensive Management Pages: Full CRUD (Create, Read, Update, Delete) functionality for:
  • Vehicles
  • IoT Devices
  • API Authentication Tokens
• State Management: Centralized and predictable state management using Zustand.
• Efficient Data Fetching: Robust data fetching, caching, and state synchronization with the server using TanStack Query (React Query).
• Modern UI/UX: Built with Tailwind CSS and the beautiful, accessible Shadcn/ui component library.
• Authentication: Secure JWT-based login and registration flow with protected routes.

Technology Stack

• Framework: React
• Build Tool: Vite
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Shadcn/ui
• State Management: Zustand
• Data Fetching & Caching: TanStack Query (React Query)
• Mapping: Leaflet & React-Leaflet
• Real-time Communication: Phoenix Channels (via phoenix JS client)
• Routing: React Router

Getting Started

To get the frontend application running locally, follow these steps.

Prerequisites

• Node.js (v18 or later recommended)
• npm, yarn, or pnpm
• A running instance of the fmsystem_phx backend.

Installation & Setup

1. Clone the repository:

   git clone [https://github.com/your-username/fmsystem_fe.git](https://github.com/your-username/fmsystem_fe.git)
   cd fmsystem_fe

2. Install dependencies:

   npm install
   # or yarn install, or pnpm install

3. Configure Environment Variables: Create a .env.local file in the root of the project and add the base URL for your backend API. This should point to where your Phoenix backend is running.

   VITE_API_BASE_URL=http://localhost:4000/api
   

   Note: The backend WebSocket endpoint is derived from this URL in the code.

4. Run the development server:

   npm run dev

   The application will be available at http://localhost:5173 (or another port if 5173 is in use).