SafeDrive

SafeDrive is a React Native / Expo mobile app for detecting driver distraction and harsh driving behavior from device sensors. It follows a dark, neon-style dashboard layout inspired by the UI mockups you shared and shows a live safety score, sensor cards, event detection, a live route map, and a final session summary.

Demo Video

link : https://youtube.com/shorts/BSuYhIFpZfw

Project Overview

The app reads live device motion data during a drive session and detects:

• Harsh braking
• Harsh acceleration
• Sharp turns
• Aggressive steering movements
• Excessive device movement
• Possible phone handling during driving

The score starts at 100 and decreases when events are detected. The dashboard keeps the UI responsive during the session and displays the final safety rating after the drive ends.

Tech Stack

• Expo
• React Native
• Expo Router
• TypeScript
• Expo Sensors
• AsyncStorage for persisted settings
• React Native Safe Area Context

Sensors Used

• Accelerometer
• Gyroscope
• Device Motion
• Magnetometer, for additional motion context
• GPS / location tracking for the route map

Sensor Settings

The profile screen controls the live behavior of the app:

• Motion Sensors: enables or disables accelerometer, gyroscope, device motion, and magnetometer collection
• Live GPS Route: starts or stops route tracking and map markers
• Driving Alerts: shows or hides the live critical event card during a drive
• Battery Saver: lowers sensor and GPS update rates to reduce battery usage

These settings are persisted locally with AsyncStorage and apply across the dashboard and profile screen.

Event Detection Strategy

The app assumes the phone is mounted in portrait mode while driving. That gives the accelerometer a usable forward axis for a classroom-friendly heuristic.

The drive flow includes a short calibration step before active monitoring starts. That baseline helps the app ignore normal sensor noise and a phone that is simply resting on a bed, table, or dashboard while still allowing real driving movement to be detected.

Detection is done in real time from live snapshots:

• Forward axis from accelerometer y
• Lateral axis from accelerometer x
• Angular movement from gyroscope magnitude
• Device motion from DeviceMotion
• Magnetometer is captured as an optional extra signal

Threshold Values

These are the thresholds used in the current build:

• Harsh braking: forward acceleration <= -1.15g with a sudden negative change
• Harsh acceleration: forward acceleration >= 1.15g with a sudden positive change
• Sharp turn: lateral acceleration >= 0.85g and gyroscope magnitude >= 1.1
• Aggressive steering: gyroscope magnitude >= 2.0
• Excessive device movement: accelerometer magnitude >= 2.35 or gyroscope magnitude >= 2.25
• Phone handling: accelerometer magnitude >= 1.75, gyroscope magnitude >= 1.55, and device motion magnitude >= 1.7
• Event cooldown: 1200ms per event type

Driving Score Logic

• Score starts at 100
• Every detected event subtracts its penalty
• Penalties:
  • Harsh Braking: -5
  • Harsh Acceleration: -5
  • Sharp Turn: -3
  • Aggressive Steering: -4
  • Excessive Device Movement: -4
  • Phone Handling: -10
• Score is clamped between 0 and 100
• Final rating bands:
  • 95+ Perfect
  • 85+ Excellent
  • 75+ Good
  • 60+ Caution
  • below 60 Needs Attention

Screens / UI

The app uses a single polished dashboard screen with:

• Top header and settings icon
• Circular safety score ring
• Live sensor cards
• Active monitoring pill
• Real-time critical event card
• Session statistics
• Event breakdown
• Event timeline
• Route map
• Live feed / drive recap
• Start / end / reset controls

How It Works

1. Tap Start Drive
2. The app begins collecting sensor snapshots
3. Events are detected in real time
4. The score updates immediately
5. Tap End Drive to switch to the summary view
6. Review the final score, rating, and breakdown

Local Setup

1. Install dependencies

npm install

2. Start the app

npm run start

3. Open on Android, iOS, or web from the Expo developer menu

Assumptions

• The phone is mounted in portrait mode during driving
• Forward acceleration can be approximated from the accelerometer y axis
• Phone handling is inferred from motion patterns, not from camera or app usage data
• On web, the app keeps the UI visible but live drive analysis requires a physical device with sensors
• The app includes idle, calibrating, active, summary, and unavailable states
• A stationary-device check helps reduce false positives when the phone is not actually moving
• The dashboard reads the live settings state so toggles immediately affect sensor subscriptions, GPS tracking, and alerts

Map / Route Replay

• The app records GPS route points during a drive session
• The map now uses OpenStreetMap in the native app, so no Google Maps API key is required
• The map displays the route path, start point, current point, and event markers when location data is available
• The dashboard also shows distance traveled and route point count
• If location permission is denied, the app keeps the sensor features running but shows a map permission message instead of fake route data
• If Live GPS Route is disabled in Settings, the map switches to a disabled state instead of requesting location permissions

Screenshots

Add screenshots of:

• Idle dashboard
• Active drive session
• Final summary screen

Notes

• Sensor listeners are cleaned up when the session ends or the component unmounts
• The code is structured so the detection logic is isolated from the UI
• The design aims to match the dark neon dashboard style from your mockups
• The app uses real device data only for live driving analysis, so a physical phone is required for meaningful sensor input