The latest articles on DEV Community by Vinayak Tiwari (@vinayak_tiwari). https://dev.to/vinayak_tiwari https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2766425%2Fbaad2f8c-aac9-4c39-ab34-1565f4ac612c.png https://dev.to/vinayak_tiwari en Vinayak Tiwari Fri, 07 Feb 2025 19:00:30 +0000 https://dev.to/vinayak_tiwari/dynamic-speed-limit-adjustment-based-on-real-time-weather-conditions-48lb https://dev.to/vinayak_tiwari/dynamic-speed-limit-adjustment-based-on-real-time-weather-conditions-48lb <h1> 🌦️ Adaptive Traffic Science: Smart Speed Limit Controller 🚗 </h1> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwtonu8y3b2bssj90gv47.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwtonu8y3b2bssj90gv47.png" alt="Image description" width="565" height="815"></a></p> <blockquote> <p><strong>Drive Safe, Drive Smart!</strong> A React.js prototype that dynamically adjusts speed limits based on real-time weather conditions ⚡</p> </blockquote> <h2> 🚀 Features </h2> <ul> <li>🌩️ <strong>Real-time Weather Detection</strong> (Rain/Drizzle)</li> <li>🚦 <strong>Dynamic Speed Adjustment</strong> (60 km/h in bad weather)</li> <li>🔄 <strong>Manual Refresh Button</strong> for instant updates</li> <li>📱 <strong>Responsive UI</strong> with clean interface</li> <li>🔧 <strong>IoT-Ready Architecture</strong> for future expansion</li> </ul> <h2> 📋 Table of Contents </h2> <ol> <li>Overview</li> <li>Prerequisites</li> <li>Tech Stack</li> <li>Setup Guide</li> <li>How It Works</li> <li>Future Plans</li> <li>Contribution</li> <li>License</li> </ol> <h2> 🌍 Overview </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcgu8nhlj2i446qigivks.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcgu8nhlj2i446qigivks.png" alt="Image description" width="800" height="461"></a></p> <p>The <strong>Adaptive Traffic Science</strong> system automatically adjusts highway speed limits using live weather data:</p> <ol> <li>📡 Fetches weather data from OpenWeatherMap API</li> <li>⚠️ Reduces speed to <strong>60 km/h</strong> during rain/drizzle</li> <li>📊 Displays real-time updates in clean UI</li> <li>🔄 Includes manual refresh capability</li> </ol> <h2> 🛠️ Prerequisites </h2> <p>Before getting started:</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Requirement</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>🔑 <strong>API Key</strong> </td> <td><a href="https://openweathermap.org/api" rel="noopener noreferrer">OpenWeatherMap Account</a></td> </tr> <tr> <td>⚛️ <strong>React/TS</strong> </td> <td>Basic understanding of React &amp; TypeScript</td> </tr> <tr> <td>🖥️ <strong>Node.js</strong> </td> <td><a href="https://nodejs.org/" rel="noopener noreferrer">Node.js v16+</a></td> </tr> <tr> <td>📝 <strong>Editor</strong> </td> <td> <a href="https://code.visualstudio.com/" rel="noopener noreferrer">VS Code</a> recommended</td> </tr> </tbody> </table></div> <h2> 💻 Tech Stack </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FReact-20232A%3Fstyle%3Dfor-the-badge%26logo%3Dreact%26logoColor%3D61DAFB" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FReact-20232A%3Fstyle%3Dfor-the-badge%26logo%3Dreact%26logoColor%3D61DAFB" alt="React" width="86" height="28"></a> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTypeScript-007ACC%3Fstyle%3Dfor-the-badge%26logo%3Dtypescript%26logoColor%3Dwhite" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FTypeScript-007ACC%3Fstyle%3Dfor-the-badge%26logo%3Dtypescript%26logoColor%3Dwhite" alt="TypeScript" width="126" height="28"></a> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOpenWeatherMap-%2523000000.svg%3Fstyle%3Dfor-the-badge" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FOpenWeatherMap-%2523000000.svg%3Fstyle%3Dfor-the-badge" alt="OpenWeatherMap" width="152" height="28"></a> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAxios-5A29E4%3Fstyle%3Dfor-the-badge" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FAxios-5A29E4%3Fstyle%3Dfor-the-badge" alt="Axios" width="66" height="28"></a><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Frontend : React + TypeScript API Integration: OpenWeatherMap API HTTP Client : Axios Styling : Pure CSS Deployment : Netlify/Vercel </code></pre> </div> <h2> ⚙️ Setup Guide </h2> <h3> 1️⃣ Clone Repository </h3> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>git clone https://github.com/adaptive-traffic-science.git <span class="nb">cd </span>adaptive-traffic-science </code></pre> </div> <h3> 2️⃣ Install Dependencies </h3> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install</span> </code></pre> </div> <h3> 3️⃣ Configure API Key </h3> <p>Create a <code>.env</code> file:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>REACT_APP_OPENWEATHERMAP_API_KEY=your_api_key_here </code></pre> </div> <h3> 4️⃣ Start Development Server </h3> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm start </code></pre> </div> <h2> 🧠 How It Works </h2> <h3> 🔑 Key Components </h3> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Component</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>🌤️ <strong>WeatherDisplay</strong> </td> <td>Shows location, weather condition, and temperature</td> </tr> <tr> <td>🚦 <strong>SpeedController</strong> </td> <td>Dynamically adjusts speed limit based on weather</td> </tr> <tr> <td>🔄 <strong>RefreshButton</strong> </td> <td>Manual weather data refresh capability</td> </tr> </tbody> </table></div> <h3> ⚡ Core Logic </h3> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="c1">// SpeedLimitController.tsx</span> <span class="kd">const</span> <span class="nx">determineSpeedLimit</span> <span class="o">=</span> <span class="p">(</span><span class="nx">weatherCondition</span><span class="p">:</span> <span class="kr">string</span><span class="p">):</span> <span class="kr">number</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">SPEED_LIMITS</span> <span class="o">=</span> <span class="p">{</span> <span class="na">NORMAL</span><span class="p">:</span> <span class="mi">100</span><span class="p">,</span> <span class="c1">// km/h</span> <span class="na">REDUCED</span><span class="p">:</span> <span class="mi">60</span> <span class="c1">// km/h</span> <span class="p">};</span> <span class="k">return</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Rain</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Drizzle</span><span class="dl">'</span><span class="p">].</span><span class="nf">includes</span><span class="p">(</span><span class="nx">weatherCondition</span><span class="p">)</span> <span class="p">?</span> <span class="nx">SPEED_LIMITS</span><span class="p">.</span><span class="nx">REDUCED</span> <span class="p">:</span> <span class="nx">SPEED_LIMITS</span><span class="p">.</span><span class="nx">NORMAL</span><span class="p">;</span> <span class="p">};</span> </code></pre> </div> <h2> 🔮 Future Plans </h2> <ul> <li>🚨 <strong>IoT Integration</strong>: Connect with physical speed boards</li> <li>🗺️ <strong>Multi-Location Support</strong>: Track different highways</li> <li>🌨️ <strong>Advanced Alerts</strong>: Snow/fog detection system</li> <li>📊 <strong>Analytics Dashboard</strong>: Historical data visualization</li> </ul> <h2> 🤝 Contribution </h2> <p>We welcome contributions! Please follow these steps:</p> <ol> <li> <strong>Fork</strong> the repository</li> <li> <strong>Create a feature branch</strong>: <code>git checkout -b feature/AmazingFeature</code> </li> <li> <strong>Commit your changes</strong>: <code>git commit -m 'Add some AmazingFeature'</code> </li> <li> <strong>Push to the branch</strong>: <code>git push origin feature/AmazingFeature</code> </li> <li><strong>Open a Pull Request</strong></li> </ol> <p><strong>GitHub Repo:</strong> <a href="https://github.com/your-username/adaptive-traffic-science" rel="noopener noreferrer">github.com/your-username/adaptive-traffic-science</a></p> <h2> 📜 License </h2> <p>This project is licensed under the <strong>MIT License</strong> - see the <a href="//LICENSE.md">LICENSE.md</a> file for details.</p> aws science api webdev