🚦 Traffic Monitor AI

A real-time AI-powered vehicle detection and tracking dashboard built with React Native (Expo) and Firebase.

This mobile application serves as a monitoring interface for a YOLO-based computer vision backend, visualizing traffic flow statistics, vehicle classification, and real-time logs in a premium, ultra-modern dark mode UI.

✨ Features

• Live Vehicle Counting: Real-time synchronization with Firebase Firestore to display total detected vehicles.
• Advanced Classification: Categorizes traffic into Cars, Trucks, Buses, and Motorcycles with dedicated statistics.
• Dynamic Dashboard:
  • System Status: Monitors FPS, Latency, and Accuracy (Mock/Live data).
  • Interactive Charts: Visual breakdown of vehicle types with percentage bars.
  • Recent Activity Log: Animated feed of the latest detections.
• Premium UI/UX:
  • OLED-optimized "Pure Black" aesthetic.
  • Smooth scroll-driven animations.
  • Neon accent indicators and live status badges.

🛠️ Tech Stack

• Frontend: React Native, Expo SDK 50+
• Language: TypeScript
• Backend/Database: Firebase Firestore (Realtime updates)
• Styling: StyleSheet, Expo Vector Icons
• AI/CV Logic: Python + YOLOv8 (Running separately, feeding data to Firebase)

🚀 Getting Started

Prerequisites

• Node.js & npm
• generic Expo Go app on your phone (or Simulator)
• A Firebase project with Firestore enabled

Installation

1. Clone the repository

   git clone https://github.com/YunusKok/TRAFFICAI.git
   cd TRAFFICAI

2. Install dependencies

   npm install

3. Configure Firebase

   • Create a firebaseConfig.ts file in the root directory.
   • Paste your Firebase Web Config:

     // firebaseConfig.ts
     import { initializeApp } from "firebase/app";
     import { getFirestore } from "firebase/firestore";
     
     const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
       projectId: "YOUR_PROJECT_ID",
       // ... other keys
     };
     
     const app = initializeApp(firebaseConfig);
     export const db = getFirestore(app);

🚦 Traffic Monitor AI

A real-time AI-powered vehicle detection and tracking dashboard built with React Native (Expo) and Firebase.

This mobile application serves as a monitoring interface for a YOLO-based computer vision backend, visualizing traffic flow statistics, vehicle classification, and real-time logs in a premium, ultra-modern dark mode UI.

✨ Features

• Live Vehicle Counting: Real-time synchronization with Firebase Firestore to display total detected vehicles.
• Advanced Classification: Categorizes traffic into Cars, Trucks, Buses, and Motorcycles with dedicated statistics.
• Dynamic Dashboard:
  • System Status: Monitors FPS, Latency, and Accuracy (Mock/Live data).
  • Interactive Charts: Visual breakdown of vehicle types with percentage bars.
  • Recent Activity Log: Animated feed of the latest detections.
• Premium UI/UX:
  • OLED-optimized "Pure Black" aesthetic.
  • Smooth scroll-driven animations.
  • Neon accent indicators and live status badges.

🛠️ Tech Stack

• Frontend: React Native, Expo SDK 50+
• Language: TypeScript
• Backend/Database: Firebase Firestore (Realtime updates)
• Styling: StyleSheet, Expo Vector Icons
• AI/CV Logic: Python + YOLOv8 (Running separately, feeding data to Firebase)

🚀 Getting Started

Prerequisites

• Node.js & npm
• generic Expo Go app on your phone (or Simulator)
• A Firebase project with Firestore enabled

Installation

1. Clone the repository

   git clone https://github.com/YunusKok/TRAFFICAI.git
   cd TRAFFICAI

2. Install dependencies

   npm install

3. Configure Firebase

   • Create a firebaseConfig.ts file in the root directory.
   • Paste your Firebase Web Config:

     // firebaseConfig.ts
     import { initializeApp } from "firebase/app";
     import { getFirestore } from "firebase/firestore";
     
     const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
       projectId: "YOUR_PROJECT_ID",
       // ... other keys
     };
     
     const app = initializeApp(firebaseConfig);
     export const db = getFirestore(app);

4. Run the app

   npx expo start

📸 Screenshots

📄 License

This project is licensed under the MIT License.