updated the readme file
This commit is contained in:
113
README.md
113
README.md
@@ -1 +1,112 @@
|
||||
// passcode snackbar logic is in notification.js
|
||||
# Nearl Express - Operator Dispatch Console & Deliveries Portal
|
||||
|
||||
A high-fidelity, real-time dispatcher command center and order-delivery console built using React, React-Leaflet, TanStack Query, and Material UI.
|
||||
|
||||
This platform enables real-time visual tracking of delivery partners, responsive slot scheduling adjustments, route matching analysis, and direct order status management from a cohesive operational interface.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Key Features
|
||||
|
||||
### 📍 1. Real-Time Rider Live GPS Mapping
|
||||
- **Interactive Leaflet Maps**: Displays live geolocated pins for every active and idle rider across Coimbatore.
|
||||
- **Polished Glassmorphism Popovers**: High-fidelity Map Popups loaded with crucial metrics (Active Orders, Contact number, monospaced coordinates, and last-seen timestamps).
|
||||
- **Dynamic Pulsing Live Indicator**: Double-ring animated indicator reflecting current partner connectivity state (pulsing green `#16a34a` for active, red `#dc2626` for idle).
|
||||
- **Rider Routes & Planned Path Overlay**: Parallel Indigo/Emerald rails representing planned paths vs actual tracks side-by-side using perpendicular polyline offsets.
|
||||
|
||||
### 🕒 2. Five-Wave Dispatch Slot Bucketing
|
||||
- **Flexible Scheduling Boundaries**: Segmented timing filters supporting precise fractional-hour offsets (e.g., Slot 1 ends at 12:30 PM, Slot 2 starts at 12:20 PM).
|
||||
- **Default Operational Waves**:
|
||||
- **Slot 1 (Morning Rush)**: 8:00 AM → 12:30 PM
|
||||
- **Slot 2 (Lunch Wave)**: 12:20 PM → 3:00 PM
|
||||
- **Slot 3 (Afternoon Wave)**: 3:00 PM → 7:00 PM
|
||||
- **Slot 4 (Evening Wave)**: 7:00 PM → 8:00 PM
|
||||
- **Slot 5 (Night Wave)**: 8:00 PM → Midnight
|
||||
- **State Validation & Caching**: Employs an array-length-validated state cache (Key version `v6` in LocalStorage) that auto-invalidates older 3-slot schema outputs during reload or hot-deployments to eliminate UI sync race conditions.
|
||||
|
||||
### 📦 3. Live Deliveries Portal & Update Status Modal
|
||||
- **Dynamic Filter Tabs**: Filter deliveries based on active operational states (pending, accepted, on road, completed).
|
||||
- **Interactive Status Dialog**: Positioned directly underneath the Amount inputs, allowing dispatchers to dynamically select and execute delivery state changes rather than submitting hardcoded records.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Technology Stack
|
||||
|
||||
- **Framework**: React 18
|
||||
- **State Management**: Redux Toolkit & React Context
|
||||
- **Server Cache/Queries**: `@tanstack/react-query`
|
||||
- **Mapping Libraries**: `leaflet`, `react-leaflet`, Custom Polyline Offset modules
|
||||
- **Component Styling**: MUI v5 (Material UI) & custom vanilla CSS design systems
|
||||
- **Date/Time Parsers**: `dayjs`
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ Environment Variables Config (`.env`)
|
||||
|
||||
Configure the following variables in your root `.env` or `.env.development` file to supply runtime secrets and API targets:
|
||||
|
||||
```ini
|
||||
REACT_APP_VERSION=v2.1.0
|
||||
GENERATE_SOURCEMAP=false
|
||||
|
||||
# Backend Services Endpoint URLs
|
||||
REACT_APP_API_URL=https://mock-data-api-nextjs.vercel.app/
|
||||
REACT_APP_URL=https://jupiter.nearle.app/live/api/v1
|
||||
REACT_APP_URL2=https://jupiter.nearle.app/live/api/v2
|
||||
REACT_APP_URL3=https://jupiter.nearle.app/live/api/v3
|
||||
|
||||
# API Credentials
|
||||
REACT_APP_GOOGLE_MAPS_API_KEY=AIzaSyCF...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🏃 Getting Started & Local Development
|
||||
|
||||
### 1. Prerequisite Installations
|
||||
Ensure that [Node.js](https://nodejs.org/) (v16+ recommended) is installed on your computer.
|
||||
|
||||
### 2. Install Project Dependencies
|
||||
Use either npm or yarn to fetch the required modules defined in the lockfiles:
|
||||
|
||||
```bash
|
||||
# If using npm
|
||||
npm install
|
||||
|
||||
# If using yarn
|
||||
yarn install
|
||||
```
|
||||
|
||||
### 3. Run Development Server
|
||||
Launches the console locally with real-time hot-reloading:
|
||||
|
||||
```bash
|
||||
# Start standard environment
|
||||
npm start
|
||||
|
||||
# Start dev configuration (loads .env.development)
|
||||
npm run start:dev
|
||||
```
|
||||
*Open [http://localhost:3000](http://localhost:3000) in your web browser to view the console.*
|
||||
|
||||
---
|
||||
|
||||
## 📦 Production Builds & Verification
|
||||
|
||||
To compile the application down to highly optimized, static production files, perform the following commands:
|
||||
|
||||
### 1. Compile the Bundle
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
*(Or `yarn build`). This compiles all files and outputs them to the `build/` directory.*
|
||||
|
||||
### 2. Verify static pages locally
|
||||
To test the production compilation locally before deploying:
|
||||
```bash
|
||||
npx serve -s build
|
||||
```
|
||||
*Click on the output Network addresses (e.g. `http://localhost:3000` or the local IP address) to view the compiled pages.*
|
||||
|
||||
> [!NOTE]
|
||||
> If you run the static build server locally and see a blank white page, ensure you have added `"homepage": "."` to your `package.json` to properly configure relative Webpack asset paths.
|
||||
|
||||
Reference in New Issue
Block a user