🚀 TrackFlow – Delivery Tracking App

A React Native application that simulates a real-time delivery tracking system with two roles:

• 🚚 Delivery Driver
• 🏢 Operations Dashboard

Built using Expo, React Navigation, and Context API, with mock data and simulated live tracking.

---

📱Demo & Installation

🔗 Live Build (Android APK)

👉 https://expo.dev/accounts/saisudheer09/projects/trackflow/builds/28ac7531-99b0-4c65-bfe1-4092c6d8b6df

📦 How to Install

Open the link on your Android device

Download the APK

Enable installation from unknown sources:

Android 8+: Settings → Apps → Browser → Allow "Install unknown apps"

Older versions: Settings → Security → Enable "Unknown sources"

Install and launch the app 🎉

🎯 Objective

To build a mini delivery system that demonstrates:

• Order lifecycle management
• Real-time tracking simulation
• Role-based application flow
• Clean UI with structured architecture

---

🏆 What We Achieved

This project successfully implements:

✅ Functional Achievements

• Complete order lifecycle flow
• Real-time location tracking simulation
• Proper start/stop tracking logic
• Accurate timeline updates
• Role-based navigation (Driver & Operations)

---

🛠️ Technical Implementation

This project was developed using the following technologies and concepts:

📱 React Native (Expo)

Used Expo to build and run the application across both Android and Web platforms efficiently without complex native setup.

🧭 React Navigation

Implemented stack-based navigation to manage screen transitions between Login, Driver Dashboard, Operations Dashboard, and Order Details.

⚛️ Functional Components

All components are built using modern functional components for better readability and maintainability.

🔄 useState

Used for managing local state such as:

• Form inputs (login)
• UI updates
• Temporary component states

⚙️ useEffect

Used for handling side effects such as:

• Initial data loading
• Triggering tracking logic
• Running interval-based location updates

📋 FlatList

Used to efficiently render lists such as:

• Orders list (Driver & Operations)
• Timeline updates

FlatList ensures better performance compared to traditional loops.

🧠 Technical Achievements

• Centralized state using Context API

• Separation of concerns:

  • UI → components/screens
  • Logic → services
  • Data → context

• Scalable and maintainable architecture

• Clean and reusable components

---

🎨 UI/UX Achievements

• Status-based color system
• Clean card-based layout
• Timeline visualization
• Live tracking indicator
• Responsive design (Web + Android)

---

🔐 Login Credentials

Role	Email	Password
Driver	driver@test.com	123456
Operations	ops@test.com	123456

---

🔁 Application Flow

🚚 Driver Flow

1. Login as Driver
2. View open orders
3. Accept order
4. Update order status:

Accepted → Picked Up → In Transit → Delivered

5. After Picked Up:

   • 🚀 Tracking starts
   • 📍 Location updates every 5 seconds

6. After Delivered:

   • 🛑 Tracking stops
   • 📍 Last location is saved

---

🏢 Operations Flow

1. Login as Operations

2. View all orders

3. Monitor:

   • Status updates
   • Driver location
   • Timeline

👉 Operations acts as a monitoring dashboard

---

📍 Location Tracking Logic

Tracking is simulated using:

const mockRoute = [
  { latitude: 17.385044, longitude: 78.486671 },
  { latitude: 17.395044, longitude: 78.496671 },
  { latitude: 17.405044, longitude: 78.506671 },
  { latitude: 17.415044, longitude: 78.516671 }
];

Behavior:

• Starts after Picked Up
• Updates every 5 seconds
• Stops after Delivered
• Final location remains visible

---

🧠 Architecture Overview

State Management

Managed using:

OrderContext.js

Handles:

• Orders state
• Status updates
• Location updates
• Tracking control

---

Business Logic

Located in:

services/

• orderService.js → order updates
• trackingService.js → tracking logic

---

📂 Folder Structure

src/
│
├── components/        # Reusable UI components
├── context/           # Global state management
├── navigation/        # Navigation setup
├── screens/           # App screens
├── services/          # Business logic
├── styles/            # Styling
└── utils/             # Mock data

---

⚙️ Setup Instructions

1. Install dependencies

npm install

---

2. Run Web

npm run web

---

3. Run Android

npm run android

Requires emulator or Expo Go

---

📸 Screenshots

🌐 Web

🔐 Login

🏢 Operations Dashboard

---

📱 Android

---

🎥 Demo Video

https://drive.google.com/file/d/17hCIMyG3gIHDhN3-1rQN6ANT5xkzasvY/view?usp=sharing

---

## ✨ Key Features

* Role-based login system
* Order lifecycle management
* Real-time tracking simulation
* Timeline tracking
* Cross-platform support
* Clean UI and navigation

---

## ⚠️ Notes

* Uses mock data only
* Tracking is simulated (not real GPS)
* Designed for technical evaluation

---

## 👨‍💻 Author

Sai Sudheer

---

## 🔗 Repository

```text id="https://github.com/saisudheer-18/react-native-delivery-tracker"

---

🏁 Conclusion

This project demonstrates:

• Strong understanding of React Native
• Real-time simulation logic
• Scalable architecture
• Clean UI/UX practices

---

✨ Built as a mini real-world delivery tracking system.