DEV Community

Vinayak Tiwari
Vinayak Tiwari

Posted on

Dynamic Speed Limit Adjustment Based on Real-Time Weather Conditions

#aws #science #api #webdev

đŸŒĻī¸ Adaptive Traffic Science: Smart Speed Limit Controller 🚗

Image description

Drive Safe, Drive Smart! A React.js prototype that dynamically adjusts speed limits based on real-time weather conditions ⚡

🚀 Features

  • 🌩ī¸ Real-time Weather Detection (Rain/Drizzle)
  • đŸšĻ Dynamic Speed Adjustment (60 km/h in bad weather)
  • 🔄 Manual Refresh Button for instant updates
  • 📱 Responsive UI with clean interface
  • 🔧 IoT-Ready Architecture for future expansion

📋 Table of Contents

  1. Overview
  2. Prerequisites
  3. Tech Stack
  4. Setup Guide
  5. How It Works
  6. Future Plans
  7. Contribution
  8. License

🌍 Overview

Image description

The Adaptive Traffic Science system automatically adjusts highway speed limits using live weather data:

  1. 📡 Fetches weather data from OpenWeatherMap API
  2. ⚠ī¸ Reduces speed to 60 km/h during rain/drizzle
  3. 📊 Displays real-time updates in clean UI
  4. 🔄 Includes manual refresh capability

🛠ī¸ Prerequisites

Before getting started:

Requirement Description
🔑 API Key OpenWeatherMap Account
⚛ī¸ React/TS Basic understanding of React & TypeScript
đŸ–Ĩī¸ Node.js Node.js v16+
📝 Editor VS Code recommended

đŸ’ģ Tech Stack

React TypeScript OpenWeatherMap Axios

Frontend       : React + TypeScript
API Integration: OpenWeatherMap API
HTTP Client    : Axios
Styling        : Pure CSS
Deployment     : Netlify/Vercel
Enter fullscreen mode Exit fullscreen mode

⚙ī¸ Setup Guide

1ī¸âƒŖ Clone Repository 

git clone https://github.com/adaptive-traffic-science.git
cd adaptive-traffic-science
Enter fullscreen mode Exit fullscreen mode

2ī¸âƒŖ Install Dependencies 

npm install
Enter fullscreen mode Exit fullscreen mode

3ī¸âƒŖ Configure API Key

Create a .env file:

REACT_APP_OPENWEATHERMAP_API_KEY=your_api_key_here
Enter fullscreen mode Exit fullscreen mode

4ī¸âƒŖ Start Development Server 

npm start
Enter fullscreen mode Exit fullscreen mode

🧠 How It Works

🔑 Key Components

Component Description
🌤ī¸ WeatherDisplay Shows location, weather condition, and temperature
đŸšĻ SpeedController Dynamically adjusts speed limit based on weather
🔄 RefreshButton Manual weather data refresh capability

⚡ Core Logic 

// SpeedLimitController.tsx
const determineSpeedLimit = (weatherCondition: string): number => {
  const SPEED_LIMITS = {
    NORMAL: 100,   // km/h
    REDUCED: 60    // km/h
  };

  return ['Rain', 'Drizzle'].includes(weatherCondition) 
    ? SPEED_LIMITS.REDUCED 
    : SPEED_LIMITS.NORMAL;
};
Enter fullscreen mode Exit fullscreen mode

🔮 Future Plans

  • 🚨 IoT Integration: Connect with physical speed boards
  • đŸ—ēī¸ Multi-Location Support: Track different highways
  • 🌨ī¸ Advanced Alerts: Snow/fog detection system
  • 📊 Analytics Dashboard: Historical data visualization

🤝 Contribution

We welcome contributions! Please follow these steps:

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/AmazingFeature
  3. Commit your changes: git commit -m 'Add some AmazingFeature'
  4. Push to the branch: git push origin feature/AmazingFeature
  5. Open a Pull Request

GitHub Repo: github.com/your-username/adaptive-traffic-science

📜 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Top comments (0)